Переход от Flash к HTML, CSS и JavaScript


Оглавление (нажмите, чтобы открыть):

Переход от Flash к HTML, CSS и JavaScript

В данной статье рассматривается пример взаимодействия
javascript — функций,
включенных в тело HTML- документа и
флэш-ролика, находящегося в этом же документе.

а) создадим обычный, пустой (пока только основные тэги) , стандартный HTML-документ с помощью любого доступного редактора (в примере — notepad) и назовем его «script.html»

б) во флэш-редакторе создадим новый файл, назовем его «flash.fla», сохраним его в одной дирректории с файлом «script.html», сделаем публикацию (shift+f12) и в результате получим кусочек нужного нам в последствии кода («flash.html»).

в) в документе «script.html» между тэгами напишем три функции, которые потом будем вызывать флэш-роликом и передавать им какие-либо значения.

и так:
— начнем со стандартного заголовка тела ява-скрипта в документе:

Способы вставки Flash в HTML и XHTML

«Как правильно вставить объекты Flash в вашу HTML-страницу?»

Это должно быть простой вопрос, но вероятно вызывает множество споров, так как каждый из доступных способов встраивания объектов имеет свои преимущества и недостатки. В этой статье мы исследуем трудности и тонкости встраивания Flash-содержимого и рассмотрим наиболее популярные способы вставки объектов.

Основные компоненты метода встраивания Flash-объектов

Прежде чем перейти к практике, давайте сначала охарактеризуем идеальный метод. По моему мнению, следующие критерии имеют первостепенное значение.

Соответствие стандартам

Web-стандарты предлагают универсальный язык для создателей браузеров, проектировщиков оборудования и веб-дизайнеров для того, чтобы они могли избежать проблем совместимости, зависимости от производителей, а также нарушения патентных прав. Кроме того веб-стандарты позволяют создавать правильную HTML-разметку, которая к тому же часто является требованием в веб-проектах.

Межбраузерная поддержка

Поддержка всеми основными браузерами и популярными операционными системами — это необходимое условие. Проверить разметку можно с помощью инструментария Flash embed test suite, который позволяет оценить, поддерживают ли браузеры тот или иной метод разметки, с помощью которой можно вставить Flash-объекты. Этот набор тестов может показать информацию о параметрах, в том числе различных настройках Flash, потоках и сценариях, поддерживаемых браузерами и ОС. Вы также можете изучить сводную таблицу, отображающую эти параметры.

Поддержка альтернативного содержимого

Во всех случаях, когда вы создаете содержимое, воспринимаемое поисковыми машинами или доступное людям, которые используют Веб без установки каких-либо плагинов, использование альтернативного содержимого — это наилучшее решение.

Избежание несоответствия между Flash-контентом и версией Flash-плеера

К сожалению для многих из нас, Flash-контент будет воспроизводиться вне зависимости от версии Flash-плеера, для которого он был создан. В этом нет ничего страшного до того момента, пока устаревший плагин не обнаружит функции, которые работают только в его более поздних версиях. Если так произойдет, ваши посетители увидят «нарушенное» содержимое или вовсе ничего не увидят.

Автоактивация интерактивного контента

Браузеры компании Microsoft работают так, что посетители не могут напрямую взаимодействовать с элементами управления Microsoft ActiveX, который позволяет загружать объекты и элементы embed , также называемые «интерактивным контентом».

Короче говоря, браузеры Microsoft не позволят взаимодействовать с интерактивным контентом, пока пользователь самостоятельно его не активирует. Opera также внедрила похожий механизм «click-to-activate». Этот механизм работает как «лежачий полицейский» на дороге: вы должны приостановить движение, медленно переехать через него, и только потом нажать педаль газа. Это может запутать обычного интернет-серфера и разозлить даже самого опытного.

Простота реализации

Конечно же простота имеет значение. Зачем прыгать выше головы, если можно сделать проще?

Основы встраивания Flash-объектов: embed и object

Существуют два элемента HTML, которые позволяют вставить объекты Flash на веб-страницу. В одной руке, у нас есть запатентованный элемент embed , который поддерживается большинством браузеров:

В другой руке у нас элемент object , который является рекомендацией W3C. Так как спецификации W3C предоставляют больше возможностей для отображения подключаемого контента, со временем появились два различных способа реализации объектов.

Большинство современных браузеров выбрали стандартом альтернативу тегу embed , используя при этом MIME-тип объекта, чтобы подключить соответствующий плагин для воспроизведения содержимого:

Этот метод не привязан к какому-либо определенному браузеру и поэтому это предпочтительная реализация.

Второй способ реализации создан специально для Internet Explorer на Windows. При этом требуется, чтобы вы определили атрибут classid у объекта, чтобы браузер смог загрузить необходимый элемент управления ActiveX Flash-плеера. Такой способ допустим, но зависим от типа браузера:

Замечание: В двух последних примерах кода специально не указан параметр codebase — он часто используется, чтобы уточнить URL инсталлятора Flash на серверах Adobe (браузер может автоматически загрузить его, если он еще не установлен). Однако это запрещено согласно спецификациям, которые ограничивают его доступ только в пределах домена текущего документа, и поэтому этот параметр не поддерживается всеми современными браузерами.

Почему embed все еще используется

С появлением веб-стандартов можно было бы совершенно обоснованно удалить элемент embed . Он просто никогда не был рекомендацией W3C и никогда не будет, потому что он уже запатентован. Однако в действительности этот способ лучше поддерживается браузерами, чем отдельная реализация элемента object . В результате такой способ реализации выбран на большинстве веб-сайтов, таких как Google Video и Brightcove.

Хотя веб-стандарты созданы, чтобы избежать проблем совместимости, элемент embed более ясен и недвусмыслен, чем элемент object , одобренный W3C. Жесткие правила реализации элемента embed и хорошая поддержка превратила его в фактический стандарт, который будет использоваться до тех пор, пока не будет универсальной поддержки элемента object , достаточной для того, чтобы игнорировать версии браузеров, которые его не поддерживают.

Где нарушена поддержка веб-стандартов

Двойственная реализация элемента object формально не нарушает веб-стандарты, но создает множество проблем. Следовательно, нам нужно найти способ объединить два метода реализации объектов в один. Еще хуже то, что мы также должны разобраться с браузерами, которые имеют (или раньше имели) неправильную реализацию объектов. Давайте рассмотрим эти проблемы:

  • Общая реализация объектов не работает в Internet Explorer на Windows. IE загружает плагин и SWF-файл, но не показывает его содержимое.
  • Когда мы частично объединяем два способа реализации добавлением параметра movie к общей реализации, Internet Explorer отображает Flash-контент, но не проигрывает его.
  • Если мы полностью соединим две реализации, все заработает в Internet Explorer, но браузеры на базе Gecko проигнорируют Flash-контент и покажут альтернативное содержимое.

Одной из особенностей элемента object является то, что вы можете вставлять этот тег друг в друга:

К сожалению, из-за ошибки в старых версиях Internet Explorer встроенные друг в друга элементы object рассматриваются так, как будто они следуют один за другим, поэтому отображаются оба элемента.

Еще хуже то, что браузеры Safari, начиная с версии 1.2.2 для Mac OS 10.3, игнорируют элемент param , встроенный в object , хотя поддерживают такие же атрибуты для элемента embed .

Замечание: Вы также можете спросить, насколько разумно определять контент, атрибуты и параметры дважды, как в вышеизложенном способе. Этот комбинированный метод также делает более проблематичным использование JavaScript для взаимодействия с Flash-контентом. В таком случае вы должны проверять, с каким объектом вы взаимодействуете.

Некоторые из ошибок уже исправлены, но необщепринятая и ошибочная в Internet Explorer реализация object все еще сдерживает абсолютное принятие этого элемента. Мы можем только надеяться, что это будет исправлено в ближайшем будущем.

Почему object лучше, чем embed

Несмотря на отсутствие поддержки всеми браузерами элемент object все же более предпочтителен, чем элемент embed , потому что кроме соответствия стандартам, он также обладает превосходной поддержкой альтернативного содержимого.

Элемент object позволяет встраивать альтернативное содержимое, и это содержимое отображается, если реализация не поддерживается или не установлен плагин. Также альтернативное содержимое доступно поисковым машинам, а это неоспоримый плюс при оптимизации под поисковые запросы.

Элемент embed поддерживает альтернативное содержимое посредством элемента noembed , но такая реализация работает только в тех браузерах, которые не поддерживают сам элемент embed , например Internet Explorer на платформах Windows Mobile. В отличие от элемента object , embed не поддерживает альтернативное содержимое, когда поддерживается сам элемент embed , но не установлен Flash-плагин. В такой ситуации, можно довольствоваться только атрибутами pluginurl и pluginspage , с помощью которых отображается картинка, кликнув по которой можно установить плагин.

Я думаю, это лучшее решение для отображения альтернативного контента, чтобы описать необходимый плагин и дать намек на то, что пользователь может загрузить и установить плагин Flash. (Тем не менее, нет других причин, по которым мы должны злоупотреблять атрибутом codebase .)

Таким образом, элемент object обладает значительными преимуществами перед элементом embed в том случае, если вы предпочитаете создавать соответствующий стандартам код или доступное, хорошо индексируемое поисковиками содержимое.

Недостаточность методов разметки

Принимая во внимание критерии, определенные нами ранее, — соответствие стандартам, межбраузерную поддержку, поддержку альтернативного содержимого, избежание несоответствий плейер/контент, автоконтроль интерактивного содержимого и простоту реализации — легко понять, что в действительности используются лишь те способы реализации, которые могут быть осуществлены только изменением разметки.

Хотя разметка предоставляет средства показа Flash-контента или альтернативного содержимого, она не способна решить проблемы несоответствия контента и плагина Flash или ошибки при активизации интерактивного контента, и это не всегда самый простой способ решить и ту, и другую проблему.

Однако, давайте сделаем краткий обзор наиболее популярных «комбинированных» методов встранивания Flash, осуществляемых с помощью (X)HTML-разметки.

Двусоставный метод

В Flash IDE, вы можете создавать HTML-страницы с помощью так называемого двусоставного метода, объединяющего реализацию объектов с помощью элемента object и embed , встроенного внутри него как альтернативный контент:

Как видите, этот метод основан исключительно на запатентованной разметке. Он несомненно фокусируется на межбраузерной поддержке, но не соответствует стандартам.

Двусоставный метод использует избыточный код, делает ваши веб-страницы логически непоследовательными и не позволяет вставить альтернативное содержимое. А единственная преимущество — это простота в использовании, так как его генерирует Flash IDE: так что не пытайтесь просить воспроизвести этот метод по памяти.

Метод вложенных объектов

Вложение двух реализаций объектов — хорошая альтернатива двусоставному методу, потому что этот метод соответствует стандартам и поддерживает альтернативный контент:

К сожалению, в этом методе отсутствует межбраузерная поддержка вследствие ошибки вложения элементов object в IE и отсутствия поддержки вложенных элементов param в Safari. Но можно использовать прием с условными комментариями IE, чтобы избежать ошибок браузера:

При использовании приведенного выше «раздутого» кода, этот метод становится даже более сложным для создателя, чем двусоставный. Он использует безобразные уловки, которые могут усложнить процесс создания кода при использовании серверных языков.

Flash Satay

Другая альтернатива — это метод Flash Satay, который основан на общем способе реализации объектов и включает дополнительный параметр movie . Этот параметр необходим, чтобы избежать ошибок отображения контента в IE. Он также включает movie-контейнер Flash (c.swf с переменной path), чтобы исправить ошибку с потоковым воспроизведением в IE:

Хотя он приближает нас к «идеальному», универсальному способу реализации объектов, Flash Satay содержит приемы, применение которых не подойдет каждому? и при использовании этого метода встроенные элементы param не поддерживаются старыми версиями Safari.

Аргументы в пользу DOM

Когда вы думаете о недостаточности методов разметки, вы можете поинтересоваться, почему нельзя использовать скрипты DOM. С помощью них, мы можем динамически управлять разметкой, как того требует каждый браузер, используя:

  • специальную реализацию для IE;
  • запатентованный элемент embed для старых версий Safari;
  • общую реализацию для всех остальных браузеров.

Скрипт DOM к тому же гибкий инструмент, достаточный для решения остальных проблем: прежде всего, мы можем использовать его для решения проблемы несовместимости Flash-плейера и Flash-контента, определяя версию плагина и проверяя то, что нужно показывать — Flash-контент или альтернативное содержимое. Когда необходимая версия плагина недоступна, мы можем инициировать экспресс-установку Adobe, — механизм встроенный в Flash-плейер. Тем самым мы упрощаем загрузку нужной версии.

Решение с применением DOM также позволяет нам избежать механизма «click-to-activate» с помощью динамического создания элементов object .

Будьте осторожны, используя JavaScript

Так как не каждый является опытным специалистом по JavaScript — да и даже тот, кто им является, не должен заново изобретать велосипед — неплохо использовать уже существующие библиотеки JavaScript для встраивания Flash. Давайте рассмотрим критерии выбора надежной библиотеки.

Разметка по стандартам редко поддерживается создателями библиотек, так как эти библиотеки определяют Flash-контент либо в JavaScript, либо другими средствами разработки. Большинство библиотек создают неправильный HTML и, так как разметка написана динамически, W3C-валидатор не способен её проверить.

С другой стороны нужно рассмотреть, как работает такой метод, если JavaScript не доступен, не поддерживается или поддерживается только отчасти. Что делать, если используя JavaScript, вы ограничиваете доступность контента для пользователей?

Приняв во внимание вышесказанное, давайте посмотрим, как работают некоторые популярные библиотеки.

Комплект по определению плейера Adobe Flash

Кроме создания разметки в Flash IDE, Adobe также предоставляет комплект по определению плейера Flash. Существует три способа использовать этот комплект:

  1. Проверив установлен или нет флажок Detect Flash Version (в меню File > Publish Settings > HTML) в Flash 8 IDE.
  2. Вставив его вручную, загрузив дистрибутив этой библиотеки.
  3. Работать в Flex Builder 2, где он включен по умолчанию.

Хотя пакет дает нам все желаемые возможности, такие как определение версии, экспресс-установка и автоактивация интерактивного контента, он нуждается в усовершенствовании. Когда мы полностью перейдем к стандартам, его ждет безнадежный провал: пока что он основан на двусоставной разметке, так как имеет либо реализацию объектов от Microsoft, либо поддержку запатентованного элемента embed , не соответствующего стандартам.

Он также поддерживает альтернативный контент, хотя странным и противоречивым образом. Вы должны определить альтернативный контент дважды: в JavaScript и в элементе noscript .

В конечном счете, комплект по определению плейера нуждается в лучшей реализации.

UFO и SWF Object

Популярные альтернативы с открытым исходным кодом, как UFO Боба ван дер Слуиса и SWF Object Джеффа Стирнса наверное самые полные и простые в использовании библиотеки, доступные в настоящее время.

Хотя на первый взгляд они кажутся похожими, они полностью отличаются внутренним содержанием. Например, SWF Object использует двусоставный метод Adobe, в то время как UFO генерирует главным образом соответствующую стандартам разметку. С другой стороны они используют общие архитектурные принципы: обе библиотеки построены на идее создания разметки, поддерживающей альтернативное содержимое (таким образом доступное и оптимизированное под поисковики), которое замещается DOM-скриптом, когда доступна необходимая поддержка Flash и JavaScript.

Несмотря на их явную поддержку альтернативного содержимого, обе библиотеки имеют один существенный недостаток: они зависят от JavaScript при вставке Flash-контента. В результате небольшая группа посетителей, установившая Flash плагин, но с отключенным JavaScript или с отсутствием достаточной поддержки JavaScript, будут видеть только альтернативное содержимое.

Аргументы в пользу «умеренного» программирования DOM

Чтобы решить все проблемы, вполне логично использовать следующий метод вставки: смешанную разметку, совместимую со стандартами, как та, которая используется методом Flash Satay, чтобы включить и Flash-контент, и альтернативное содержимое, наряду с применением небольшого DOM-скрипта, который необходим для устранения проблем в некоторых браузерах.

ObjectSwap основан на этих принципах и на мой взгляд является образцом для будущих библиотек встраивания Flash-объектов. К сожалению, ObjectSwap концентрируется в основном на автоактивации интерактивного контента, поэтому он не пригоден для определения версии и не решает проблем с разметкой, таких как поддержка потокового воспроизведения в IE или поддержка параметров в старых версиях Safari.


С другой стороны он может быть усовершенствован. При использовании события onload , поведение, основанное на DOM, реализуется только после загрузки всей страницы. Лучшим выбором могло бы быть событие DOMContentLoaded , которое позволяет вам применить свое собственное поведение, как только DOM станет доступен на странице. Так как событие DOMContentLoaded еще не полностью поддерживается браузерами, взамен этого вы можете использовать это решение.

Мастер Йода рекомендует:  Произошла утечка данных о неблагонадежных заемщиках банка Первое ОВК

Будущее встраивания Flash

Хотя совершенное решение пока еще не найдено, мы уже довольно далеко продвинулись в правильном направлении. Когда мы соединяем лучшие возможности различных библиотек, нам следует учитывать все критерии, определенные в начале этой статьи.

How to dou

Чтобы создать лучшие проекты для iPhone, iPad и iPod touch, используйте JavaScript для улучшения функций CSS 3, добавьте интерактивные сообщения , и даже создавать сложные игры и веб-приложения. Относительно простой язык программирования JavaScript работает в веб-браузере.

Adobe Flash является популярным инструментом для видео и анимации уже более десяти лет. Flash упрощает анимацию изображений и текста. Интерфейс в инструменте разработки Flash настроен для дизайнеров для быстрого создания и анимации идей, которые передают более глубокий смысл, чем статические изображения.

Flash также отличный способ добавить забавные эффекты, создать игры и воспроизвести видео. Многие новые формы развлечений были созданы и распространяются через Flash. К сожалению, ни одно из устройств iOS (включая iPhone, iPad и iPod touch) не поддерживает Flash. Если ваш сайт использует Flash и кто-то посещает ваши страницы с помощью одного из этих устройств, посетитель ничего не видит. Нада. Шиш.

Чтобы ваш веб-сайт отображался на iPhone, iPad и iPod touch, вы должны повторно создать флеш-анимацию и другие интерактивные функции, используя HTML5, CSS 3 и JavaScript. Вот несколько дополнительных преимуществ замены Flash-контента на ваших сайтах:

У вас лучшая поисковая оптимизация. Хотя Google стал лучше с годами, он по-прежнему не ищет файлы Flash для информации так же эффективно, как и контент, отформатированный с помощью HTML и CSS.

Скорость загрузки быстрее. Анимация, созданная во Flash, обычно больше, чем эквивалентная анимация, разработанная в HTML5, CSS и JavaScript.

Интерактивные функции не требуют подключаемых модулей. Анимация и другие интерактивные функции, созданные с помощью CSS и JavaScript, выполняются в Apple iOS без использования плагина, что означает, что они работают быстрее и плавнее.

Преобразование флеш-игр в HTML5

Не забудьте указать код в активном обратном вызове, показанном выше. Вот и все!

04. Сохраните игру

Теперь мы находимся в средней точке нашего преобразования Flash в JavaScript — пришло время позаботиться о шейдерах. Чтобы настойчиво хранить локальные данные в ActionScript, вы должны использовать класс «SharedObject». В JavaScript простая замена — это localStorage API, который позволяет хранить строки для последующего извлечения, выжившие перезагрузки страниц.

Сохранение данных очень просто:

Обратите внимание, что в приведенном выше примере переменная «progress», которая является числом, будет преобразована в строку.

Загрузка также проста, но помните, что полученные значения будут нитями или нулями, если они не существуют.

Здесь мы гарантируем, что возвращаемое значение является числом. Если это не существует, то 0 будет присвоено переменной «progress».

Вы также можете хранить и извлекать более сложные структуры, например JSON:

В некоторых случаях объект «localStorage» недоступен. Например, при использовании протокола file: // или при загрузке страницы в частном окне. Вы можете использовать оператор «try and catch», чтобы ваш код продолжал работать и использовать значения по умолчанию, которые показаны в следующем примере:

Еще одна вещь, которую следует помнить, состоит в том, что сохраненные данные сохраняются для каждого домена, а не для каждого URL-адреса. Поэтому, если существует риск того, что многие игры размещаются в одном домене, тогда лучше использовать префикс (пространство имен) при сохранении. В приведенном выше примере «myGame». является префиксом, и вы обычно хотите заменить его именем игры.

Если ваша игра встроена в iframe, то localStorage не будет сохраняться в iOS. В этом случае вам нужно будет хранить данные в родительском iframe.

05. [1945905]

Пользовательский шейдер по умолчанию может использоваться для замены метода тонирования в Phaser и PixiJS. Танки мигают белым при попадании

Когда Phaser и PixiJS визуализируют ваши спрайты, они используют простой внутренний шейдер фрагмента. Он не имеет много функций, поскольку он предназначен для скорости. Однако вы можете заменить это шейдер для ваших целей. Например, лет u может использовать его для проверки overdraw или поддержки дополнительных функций для рендеринга. Ниже приведен пример того, как предоставить свой собственный шейдер фрагмента по умолчанию для Phaser v2.

06. Изменение способа тонирования

Пользовательский шейдер по умолчанию может использоваться для замены методов тонирования в режиме Phaser и PixiJS. Тонирование в Phaser и PixiJS работает путем умножения пикселей текстуры на заданный цвет. Умножение всегда затемняет цвета, что, очевидно, не является проблемой; это просто отличается от тонировки Flash. Для одной из наших игр нам нужно было выполнить тонирование, подобное Flash, и решил, что можно использовать настраиваемый шейдер по умолчанию. Ниже приведен пример такого фрагментарного шейдера:

Этот шейдер освещает пиксели, добавив базовый цвет в оттенок. Чтобы это работало, вам нужно предоставить негативы цвета, который вы хотите. Поэтому, чтобы получить белый цвет, вам нужно установить:

07. Inspect overdraw

На рисунке слева показано, как игрок видит игру, а справа — эффект применения overwraw shader to the same scene

Замена стандартного шейдера также может быть использована для помощи при отладке. Ниже мы объяснили, как overdraw можно обнаружить с помощью такого шейдера.

Overdrawing происходит, когда многие или все пиксели на экране отображаются несколько раз. Например, многие объекты занимают одно и то же место и оказываются друг над другом. Сколько пикселей, которые GPU может отображать в секунду, описывается как скорость заполнения.

Существует простой способ узнать, сколько раз каждый пиксель на экране записывается путем замены глобального фрагмента по умолчанию shader в PixiJS и Phaser с этим:

Этот шейдер освещает обрабатываемые пиксели. Число 7.0 указывает, сколько записей требуется для отображения белых пикселей; вы можете настроить этот номер по своему вкусу. Другими словами, более легкие пиксели на экране были написаны несколько раз, а белые пиксели были написаны как минимум семь раз.

Этот шейдер также помогает находить оба «невидимых» объекта, которые по какой-то причине все еще отображаются, и спрайты которые имеют чрезмерные прозрачные области вокруг, которые необходимо удалить (графический процессор все еще нуждается в обработке прозрачных пикселей в ваших текстурах).

08. Почему физики двигатели ваши друзья

Левая часть изображения — это сцена из игры, а правая сторона показывает то же самое сцена с наложением отладки физики Phaser, отображаемым сверху

Физический движок — это промежуточное программное обеспечение, которое отвечает за моделирование физических тел (как правило, жесткой динамики тела) и их столкновений. 2D или 3D пространства, но n от обоих. Типичный физический двигатель обеспечит:

  • Движение объекта путем задания скоростей, ускорений, суставов и двигателей
  • Обнаружение столкновений между различными типами фигур
  • Расчет столкновения ответы, то есть, как два объекта должны реагировать, когда они сталкиваются.

Существует плагин Phaser, который хорошо работает для этой цели. Box2D также используется в игровом движке Unity и GameMaker Studio 2.

В то время как физический движок ускорит вашу разработку, вам придется заплатить цену: снижение производительности во время выполнения. Обнаружение столкновений и вычисление ответов — задача, требующая большого количества ресурсов. Вы можете ограничить несколько десятков динамических объектов в сцене на мобильных телефонах или ухудшить качество изображения, а также снизить частоту кадров ниже 60 FPS.

09. Экспорт звуков

Если у вас есть звуковые эффекты Flash-игры внутри файла .fla, то экспортировать их из графического интерфейса невозможно (по крайней мере, не в Adobe Animate CC 2020) из-за отсутствия параметров меню, обслуживающих этот цель. Но есть еще одно решение — специальный скрипт, который делает именно это:

Как использовать скрипт для экспорта звуковых файлов:

  1. Сохраните код выше как .jsfl файл на вашем компьютере.
  2. Откройте файл .fla с Adobe Animate.
  3. Выберите «Команды»> «Выполнить команду» в верхнем меню и выберите сценарий в открывшемся диалоговом окне.
  4. Теперь появляется другой файл диалога для выбора каталога назначения экспорта.

Все готово! Теперь вы должны иметь WAV-файлы в указанном каталоге. Осталось только преобразовать их, например, в MP3, OGG или AAC.

10. Как использовать MP3-файлы

Хороший старый формат MP3 вернулся, так как некоторые патенты истекли, и теперь каждый браузер может декодировать и воспроизводить MP3. Это делает разработку немного легче, так как, наконец, нет необходимости готовить два отдельных аудиоформата. Раньше вам нужны, например, файлы OGG и AAC, в то время как теперь MP3 будет достаточным.

Тем не менее, есть две важные вещи, которые вам нужно запомнить о MP3:

  • MP3s необходимо декодировать после загрузки, что может занять много времени, особенно на мобильных устройствах. Если вы заметили паузу после загрузки всех ваших активов, это, вероятно, означает, что MP3-файлы декодируются
  • . Беззаботно воспроизводящиеся петлевые MP3-файлы немного проблематичны. Решение состоит в том, чтобы использовать mp3loop, читайте больше в этой статье, опубликованной Compu Phase.

Эта статья была первоначально опубликована в выпуске 277 журнала веб-дизайна Creative Web Designer. Здесь выдается номер 277 или . .

Переход от Flash к HTML, CSS и JavaScript

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • HTML, CSS, PHP, JavaScript, SQL – что и зачем?

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.


Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

HTML, CSS, PHP, JavaScript, SQL – что и зачем?

В этом материале я хочу обзорно рассмотреть назначение основных языков программирования и разметки, применяющихся в веб-разработке.

Идея написать эту статью родилась не спонтанно, а под влиянием часто повторяющихся вопросов, которые мне присылают в письмах и задают в службе поддержки.

Это вопросы следующего плана:

— В каком порядке надо изучать языки создания сайтов?
— Что сложнее: JavaScript или PHP?
— Зачем нужен язык SQL?
— Чем отличаются версии CSS друг от друга, и какую из них следует изучать?
— Как работаю динамические сайты?
— Для чего нужен PHP?
и т.д…

В данной статье я расскажу о роли каждого из названных языков в создании сайтов и, уверен, что подавляющее большинство общих вопросов отпадет у вас само собой.

В этом материале почти не будет примеров кода, т.к. перед нами стоит другая задача – получить общее представление о назначении каждого из языков и его месте в веб-разработке.

Итак, поехали. Начнем мы с языка HTML.

Расширения файлов: .htm, .html

HTML— это язык разметки гипертекста (от англ. HyperText Markup Language).

Данный язык применяется для создания веб-страниц. Он интерпретируется (обрабатывается) браузером и отображается в виде документа в удобной для человека форме.

HTML – это неотъемлемая составляющая и основа практически любой веб-страницы. Язык HTML в первую очередь выступает как средство логической разметки страницы.

Именно HTML позволяет нам наделять содержимое страницы определенным смыслом, а реализуется это с помощью так называемых тэгов.

Тэги – это специальные маркеры, которые определенным образом интерпретируются браузером. Суть тэгов в том, что содержимое страницы, заключенное в разные тэги, по-разному обрабатывается браузером.

Скажем, мы можем заключить контент (содержимое) страницы в тэг параграфа, и данное содержимое будет считаться браузером параграфом.

Мы можем заключить содержимое в тэг списка, и тогда информация внутри него будет интерпретироваться как список.

Мы можем поместить контент в тэг таблицы, и содержимое в итоговом документе будет отображаться в виде таблицы и т.д.

Иными словами, каждый из HTML-тэгов, предназначенных для разметки текстовой информации, придает этой информации некоторый смысл.

Язык HTML имеет достаточно длительную историю развития, и за это время претерпел значительные изменения. Большая часть изменений связана с добавлением в язык новых тэгов и «выводом из обращения» устаревших. На момент написания этой статьи уже была начата разработка версии HTML 5.1.

Для разных версий HTML предусмотрено разное объявление типа документа. Рассмотрим с вами пару примеров объявления типа HTML 4.01 (на данный момент его можно считать уже устаревшим).

1. Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated):

2. Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML:

3. С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов:

Объявления типов документов, приведенные выше, со временем будут все больше уходить в прошлое, уступая место версии HTML 5.

В HTML 5 используется только один вариант DOCTYPE (тип документа):

Также следует упомянуть о том, что существует еще и язык XHTML. Это расширяемый язык разметки гипертекста (от англ. Extensible Hypertext Markup Language). На данный момент его развитие остановлено и рекомендуется использовать HTML. Новые версии XHTML не выпускаются.

В заключение хочу отметить также тот факт, что средствами HTML все же можно управлять не только логической структурой веб-страниц, но и некоторыми аспектами ее внешнего вида.

Однако такой подход считается неверным и устаревшим, т.к. для задания внешнего вида существует отдельный язык.

На этом с HTML мы завершаем и переходим к языку CSS.

Расширение файлов: .css

CSS – это язык описания внешнего вида документа, написанного с использованием языка разметки. Название произошло от англ. Cascading Style Sheets — каскадные таблицы стилей.

Проще говоря, язык CSS предназначен для того, чтобы придавать необходимый внешний вид HTML-документам.

Придание внешнего вида документам HTML – это хоть и самый популярный, однако лишь частный случай применения языка CSS, т.к. с его помощью можно придавать вид и документам других типов: XHTML, SVG и XUL. Про них мы отдельно говорить не будем, т.к. это выходит за рамки рассматриваемого вопроса.

Итак, целью создания CSS было отделение описания логической структуры веб-страницы от ее внешнего вида. Как вы уже знаете, для описания структуры используется HTML, для описания же того, как эта логическая структура будет выглядеть, отвечает как раз CSS.

Раздельное описание логической структуры и представления документа позволяет более гибко управлять внешним видом документа и минимизировать объем повторяющегося кода, который бы неизбежно возникал при использовании HTML для описания внешнего вида документа.

С помощью CSS веб-разработчик может задавать для страницы и отдельных ее элементов различные гарнитуры и размеры шрифта, цвета элементов, отступы элементов друг от друга, расположение отдельных блоков на странице и т.д.

Разумеется, для того, чтобы использовать CSS для придания внешнего вида HTML-документу, нужно этот документ как-то связать со стилями, т.е. «сообщить» HTML-документу, что он будет оформлен с помощью CSS.

Для этого существуют различные способы подключения CSS к документу, которые дают браузеру знать, что к странице в целом, либо к каким-то отдельным ее элементам должно быть применено стилевое оформление.

Мастер Йода рекомендует:  Типы анимации в компьютерной графике

Таблицы стилей могут располагаться как непосредственно внутри того, документа, к которым они будут применяться, так и находиться в отдельном файле, имеющем расширение .css.

Важно понимать, что CSS-файл – это обычный текстовый файл. В нем пишутся специальные инструкции, описывающие внешний вид элемента и его позиционирование на странице а также комментарии (произвольные пояснения относительно написанных инструкций).

Стили CSS могут быть подключены к странице (либо внедрены в нее) четырьмя следующими способами:

1. Если таблица стилей находится в отдельном файле, то она подключается к документу с помощью специального тэга link, который должен располагаться в этом документе внутри тэга head:

В атрибуте href при этом указывается путь до подключаемого файла стилей.

2. Второй способ подключения применяется также в том случае, если стили находятся в отдельном файле. При этом используется директива @import, которая должна находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head):

Здесь, как вы можете видеть, путь до подключаемого файла указывается в круглых скобках после слова url.

3. Третий способ используется в случае, когда стили CSS расположены внутри того документа, к которому они должны применяться. В этом случае стили должны находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head):

В примере выше внутри тэгов style расположен стиль, задающий красный цвет текста для элемента body веб-страницы.

4. Четвертый способ также применяется в случаях, когда таблица стилей описана в самом документе. При этом стилевое оформление задается для какого-то конкретного элемента веб-страницы (тэга) посредством использования его атрибута style.

При этом все CSS-правила, заданные таким образом, будут применяться только к текущему тэгу (элементу веб-страницы).

В примере выше мы задаем размер шрифта и его цвет для одного конкретного абзаца текста в рамках документа.

Подводя итог по способам подключения стилей, можно сказать, что в первых двух случаях к документу применялись внешние таблицы стилей, в то время как в 3 и 4 способах мы имеем дело со встроенными (или внутренним) стилями.

Сами стилевые правила задаются в виде пар «свойство: значение;». При этом применяются эти правила к так называемым селекторам. Скажем, в 3 примере мы имеем дело с селектором элемента (body). В качестве свойства выступает color, а в качестве значения – red.

Всего существует 10 видов селекторов, рассмотрение которых, по понятным причинам, выходит за рамки данного обзора.

Важно, чтобы вы понимали общий принцип.

Селектор определяет один или группу элементов, к которым будут применяться стилевые правила (в нашем случае это все содержимое тэга body)

Свойство можно определить как вид преобразования, которое будет применено к элементу (в нашем случае это color, т.е. цвет текста).

Значение же определяет непосредственно значение определенного вида преобразования (в нашем примере это red, т.е. красный цвет).

В процессе своего развития язык CSS уже прошел достаточно длинный путь, и в настоящее время существует несколько его уровней: CSS1, CSS2, CSS2.1, CSS3. C конца 2011 года разрабатывается уже CSS4.

Смысл разных уровней в том, что происходит исправление существующих ошибок, добавление новых свойств, расширение механизма селекторов и т.д.

Иными словами, каждый следующий уровень является не чем-то обособленным, а логическим развитием и продолжением предыдущего уровня, позволяя более тонко и гибко управлять внешним видом web-страниц.

На этом обзор CSS мы заканчиваем и переходим к следующему звену – языку PHP.

Расширение файлов: .php

Когда вы уже хоть немного разобрались с HTML и CSS, то сразу возникает вопрос: «А что же дальше?». Вы же хотели создавать классные сайты, а с помощью HTML и CSS сделать этого ну никак не получается…

Здесь вам нужен уже язык совершенно другого типа и назначения.

PHP на протяжении многих лет стабильно находится с списке наиболее популярных языков программирования и веб-разработки.

Что же такое PHP?

PHP расшифровывается как Hypertext PreProcessor (что-то вроде «преобработчик HTML»).

Что это означает? Начнем немного издалека: есть два типа языков. Один тип называется «клиентским», а другой — «серверным».

Это значит, что клиентские языки работают в браузере каждого конкретного человека. Типичным представителем клиентских языков является JavaScript, о котором Вы наверняка слышали.

Все действия и команды, которые мы задаем, скажем, на языке JavaScript, выполняются браузером (для упрощения мы не рассматриваем серверный JavaScript).

Это означает, что один и тот же код, написанный нами, обрабатывается в одном случае браузером Internet Explorer, в другом — Firefox, в третьем — Opera, в четвертом — Google Chrome, т.е. тем обозревателем, который использует каждый конкретный человек для просмотра нашей страницы.

Браузер, таким образом, имеет альтернативное название — клиент.

В случае с серверными языками (к которым и относится PHP) мы наблюдаем другую картину.

Наш сайт всегда расположен на каком-либо сервере, т.е. мощном компьютере, специально предназначенном для размещения на нем сайтов многих людей.

Все команды и скрипты, написанные на языке PHP, выполняются именно на сервере, и никак иначе. После того, как PHP-скрипт выполнится на сервере, сервер «отдает» результат своей работы браузеру, который преобразует этот результат в удобный для нас вид.

Здесь важно понимать следующий момент: по исходному коду веб-страницы, который можно посмотреть в любом браузере через опцию вроде «Исходный код страницы» нельзя определить, использовался ли язык PHP для создания данной страницы, или нет.

Невозможно это сделать как раз потому, что PHP-скрипты обрабатываются на сервере, а в браузер передается уже готовый, обработанный вариант. По сути, только HTML-код.

Разница по сравнению с обычными статичными HTML-страницами заключается в одном дополнительном этапе обработки кода.


В случае с HTML-страницей есть только один этап: браузер обрабатывает HTML-код, т.е. разметку страницы в соответствии с определенными правилами, в результате чего мы и видим веб-страницу в нормальном виде.

В случае с PHP-страницей есть два этапа: сначала так называемый PHP-интерпретатор (обработчик) производит выполнение PHP-кода (в результате этого получается простой HTML-код), а после этого уже браузер обрабатывает результат этой обработки, т.е., по сути, выполняется тот самый этап, который является единственным в случае с HTML-страницей.

Вообще PHP прекрасно работает в паре с HTML. Более того, в HTML-код можно делать вставки PHP-кода, а с помощью PHP выводить HTML-разметку.

Важно запомнить следующий простой момент: Не имеет значения, насколько сложен Ваш PHP-код, в конечно итоге «на выходе» он станет обычным HTML.

Для чего использовать PHP?

HTML на 100% статичен. Встраивая же в наши страницы PHP-код, мы можем добиться того, чтобы содержимое одной и той же страницы было различно в зависимости от определенных условий (динамические страницы).

За долгие годы своего существования язык PHP зарекомендовал себя как великолепное решение для создания динамических веб-сайтов.

Что нужно, чтобы начать работать с PHP?

Для полноценной работы с PHP на Вашем компьютере нужны следующие вещи:

1. Веб-сервер Apache (он используется в большинстве случаев);
2. Система Управления Базами Данных (СУБД) MySQL (в базе данных хранится наполнение сайта);
3. Установленный интерпретатор PHP;
4. Текстовый редактор, в котором Вы будете писать код;
5. Браузер.

Теперь чуть подробнее о первых трех пунктах.

1. Веб-сервер предназначен для имитации на Вашем компьютере того самого сервера, на котором потом будет размещаться Ваш сайт уже на хостинге в Интернет. Это нужно для того, чтобы у себя на компьютере Вы могли писать любые PHP-скрипты и смотреть, как они работают, вносить в них изменения и правки. Одним словом, это необходимо для так называемой отладки.

2. СУБД MySQL нужна для хранения информации, которая будет на Вашем сайте. В случае с HTML-страницами все содержимое сайта находится непосредственно в них. Каждая страница содержит определенный объем информации (контента).

При использовании PHP для целей хранения полезного информационного наполнения сайта используется, как правило, база данных. В подавляющем большинстве случаев это MySQL.

3. Интерпретатор PHP — это своеобразная программа, которая осуществляет обработку PHP-кода на веб-сервере. Без него мы никак не сможем выполнить наши PHP-скрипты и увидеть результат их работы.

Для того чтобы сообщить веб-серверу о том, что должна быть произведена обработка PHP-кода, необходимо использовать следующий синтаксис при добавлении PHP в HTML-документ:

В этом случае веб-сервер, дойдя до открывающего тэга PHP ( ) интерпретатор PHP прекращает свою работу.

Вернемся теперь к роли PHP в создании сайтов.

Представим для начала, что у нас есть простой статичный сайт, написанный на языке HTML. Он состоит из ряда страниц и представляет собой просто набор неизменных файлов.

На таком сайте нет возможности создать форму обратной связи, комментарии, регистрацию пользователей, поиск и т.д.

Кроме того, у такого сайта не может быть панели управления, из которой мы могли бы добавлять новые страницы, либо редактировать и удалять уже существующие.

При использовании только языка HTML мы сильно ограничены в создании действительно удобных и функциональных сайтов, поскольку мы не имеем никаких «рычагов управления» каждой конкретной страницей.

Все, что мы можем – это вручную открыть отдельную HTML-страницу в редакторе кода и как-то ее модифицировать.

Использование же языка PHP позволяет нам создавать действительно мощные сайты благодаря тому, что мы можем продумывать и реализовывать «поведение» нашего сайта.

Иными словами, мы можем сделать так, чтобы наш сайт вел себя по-разному в разных ситуациях, действуя по прописанным нами алгоритмам в зависимости от выполнения или невыполнения определенных условий.

Возможность задания нужной нам логики «поведения» сайта является одной из важнейших и наиболее ценных в языке PHP.

Наряду с уже озвученными преимуществами следует упомянуть, что PHP предоставляет нам множество инструментов для работы с данными различных типов.

Чаще всего приходится иметь дело с текстовыми данными и данными, представленными в виде массивов. Для облегчения этих задач в PHP предусмотрены многочисленные функции, позволяющие с легкостью манипулировать любой информацией.

Помимо этого, язык PHP позволяет нам работать с файлами и папками. Мы можем его средствами создавать, редактировать и удалять файлы и папки. Мы можем перемещать и переименовывать их и выполнять множество других операций.

Конечно же, нельзя обойти стороной и такой важный момент, как возможность использования PHP для организации более удобного взаимодействия пользователя с сайтом.

Это такие вещи, как:

— форма обратной связи;
— возможность комментирования;
— регистрация пользователей;
— поиск по сайту;
— запоминание введенной пользователем информации (по принципу «покупательской тележки»); и т.д.

И, разумеется, PHP активно используется для создания самых разных панелей администратора, откуда вы можете просто и удобно управлять своим сайтом.

Добавление новых материалов, редактирование категорий, модерирование комментариев, изменение пунктов меню сайта, управление настройками – все это и многое-многое другое можно реализовать средствами PHP.

Резюмируя обзор по языку PHP, можно сказать, что следующим шагом после освоения HTML и CSS должно быть изучение языка PHP, т.к. именно он позволит вам перейти на принципиально иной уровень в создании сайтов.

С PHP мы заканчиваем и переходим к еще одному языку – JavaScript.

Расширение файлов: .js

JavaScript – это язык программирования, нашедший наиболее широкое применение в браузерах для придания интерактивности веб-страницам.

Важно понимать, что это далеко не единственная область применения JavaScript, однако в рамках нашей темы наиболее уместно рассматривать именно такой вариант использования этого языка.

Основной задачей JavaScript в рассматриваемом нами контексте является манипулирование элементами DOM-модели web-страницы.

Давайте разберемся с тем, что же такое DOM.

DOM – это объектная модель документа (от англ. Document Object Model).

Согласно DOM, документ (например, веб-страница) может быть представлен в виде дерева объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:

— получение узлов;
— изменение узлов;
— изменение связей между узлами;
— удаление узлов.

Именно эти манипуляции и позволяет нам осуществлять над элементами страницы язык JavaScript.

Для добавления JavaScript-кода на страницу можно использовать тэг script. Его рекомендуется помещать внутри тэга head, хотя это и не обязательно.

Контейнеров script в одном документе может быть сколько угодно. При этом атрибут «type=’text/javascript’» указывать необязательно, т.к. значение javascript является значением по умолчанию.

Ниже приведен пример скрипта, выводящего так называемое модальное окно с классической надписью «Hello, World!» внутри браузера:

Располагать JavaScript-код можно и внутри тэга. Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Рассмотрим такой пример:

В примере выше при нажатии на ссылку «Удалить» функция confirm(‘Вы уверены?’); вызывает модальное окно с надписью «Вы уверены?».

При этом при отрицательном ответе (т.е. «нет», если мы не уверены) происходит блокировка перехода по ссылке.

Обратите внимание, что такая практика использования JavaScript не считается хорошей.

Правильным вариантом применения JavaScript был бы такой подход. Сперва мы снабжаем идентификатором ( ) ссылку:

В этом примере мы создаем функцию, срабатывающую при загрузке веб-страницы. Эта функция находит элемент с идентификатором alertLink и отслеживает событие клика по нему (т.е. по ссылке «Удалить»).

По событию клика мы выводим модальное окно с уже знакомым нам сообщением.

Возможно, данный пример покажется вам немного сложным, если вы ничего не знаете о JavaScript, но на данном этапе это не так важно.

Важно, чтобы вы поняли сам принцип, подход к работе при использовании JavaScript.

И, наконец, как я и обещал чуть выше, давайте рассмотрим, как можно подключить JavaScript из внешнего файла.

Здесь ситуация очень похожа на ту, что была в случае с CSS, только вместо CSS-кода мы пишем в файле (с расширением .js) JavaScript-код, после чего подключаем его в нужный нам файл в тэге head при помощи конструкции:

После такой манипуляции нам будут доступны все функции, которые были написаны нами в JavaScript-файле.

Итак, можно сказать, что JavaScript – это язык, который позволяет вам активно управлять структурой вашей страницы, манипулировать ее элементами.

На практике это находит свое применение при создании различных анимационных эффектов, эффектов перемещения, растворения, увеличения и уменьшения объектов.

JavaScript применяется для создания различных фотогалерей, так называемых слайдеров или ротаторов контента, суть которых заключается в том, чтобы в определенном ограниченном пространстве происходило чередование различных объектов (например, изображений).

Часто JavaScript используется и для первичной проверки данных, которые пользователь вводит в формы.

Говоря о JavaScript, нельзя не упомянуть о специальных JavaScript-библиотеках (jQuery, Prototype, MooTools и др.)

Смысл JavaScript-библиотек заключается в том, чтобы предоставить кросс-браузерный интерфейс к методам DOM.

Это означает, что вы можете использовать определенные функции, уже написанные в рамках той или иной библиотеки и получать необходимый вам результат, одинаково хорошо работающий во всех браузерах.

К тому же библиотеки избавляют веб-разработчиков от необходимости изучать в деталях сам JavaScript, предоставляя ряд удобных в использовании инструментов, позволяющих с легкостью управлять объектной моделью документа.

Резюмируя, можно сказать, что JavaScript может стать «изюминкой» вашего сайта, причем как в плане его украшения, так и в плане дополнительного функционала, который можно обеспечить с помощью данного языка.

С JavaScript у нас все, и мы переходим к последнему языку – SQL

Расширения файлов: .sql

SQL – это информационно-логический язык, предназначенный для описания, изменения и извлечения данных, хранимых в реляционных базах данных.

Для того чтобы лучше разобраться с этим определением, мы начнем с самых основных понятий, без которых дальше идти просто бессмысленно.

Для чего вообще нужна база данных?

Сейчас, при разработке серьезных веб-приложений, практически всегда используются базы данных. В них хранится информация, необходимая для работы сайта — начиная от самого содержимого (контента), и заканчивая логинами и паролями пользователей и различными настройками сайта.

Несмотря на то, что в базе данных можно хранить не только текстовую информацию, но и, скажем, картинки, какие-то документы и т.д, как правило она все же используется именно для хранения текстовой информации, а информация другого типа хранится в виде файлов.

Базы данных имеют ряд преимуществ по сравнению, например, с хранением текстовой информации в файлах:

1. Высокая скорость получения информации;

2. Они позволяют получать произвольный доступ к данным. (т.е. легко обратиться к какой-то одной, конкретной записи в базе);

3. Из базы данных можно извлекать данные, соответствующие определенным критериям, которые нас интересуют;

4. Применение базы данных позволяет нам не беспокоиться о параллельном доступе к данным. Т.е. для нас в этом случае не важно, что одну и ту же запись одновременно могут затребовать несколько десятков человек.

Если бы мы имели дело с файлами, то нам пришлось бы намного сложнее.

Мастер Йода рекомендует:  Одностраничное приложение для управления задачами с использованием Backbone.js Javascript

Поэтому, параллельный доступ к данным — одно из важнейших преимуществ баз данных.

Отличие базы данных от СУБД

Важно различать термины «база данных» и «система управления базами данных» (СУБД).

База данных — это информация, которую мы храним и структура этой информации, в то время как СУБД — это программа, которая предоставляет внешним приложениям доступ к базам данных.

База данных — это вещь, которую мы самостоятельно проектируем для каждого конкретного проекта, задавая ее структуру исходя из функций нашего будущего приложения.

СУБД же выбирается нами из определенного ограниченного списка (Oracle, MySQL, PostgreSQL и т.д.)


Чаще всего можно встретить связку PHP + MySQL. В большинстве случаев вы также будете работать именно с ней.

Рассмотрим теперь понятие реляционной базы данных.

На сегодняшний день так называемые реляционные базы данных являются самыми популярными.

Реляционные базы данных — это базы данных, состоящие из таблиц.

Само же слово «реляционные» происходит от англ. relation — отношение.

Под «отношением» понимается связь между различными таблицами, входящими в базу данных.

Что характерно, таблицы в базе данных — это действительно обычные таблицы, которые по своей сути идентичны любым таблицам, с которыми вы сталкивались в жизни — начиная от таблицы умножения, и заканчивая таблицами в Microsoft Excel.

Таблица имеет некоторое ограниченное количество столбцов (как правило, небольшое) и сколь угодно много строк.

Каким образом можно вставлять новые данные в базу, изменять их, удалять и производить иные манипуляции?

Для этого и существует специальный язык SQL (от англ. Structured query language — язык структурированных запросов).

Т.е. SQL — это универсальный компьютерный язык, разработанный именно для управления реляционными базами данных.

С его помощью мы можем выполнить практически любую операцию: начиная от создания базы данных и заканчивая выборкой из базы любого набора информации.

Как правило, SQL-запросы передаются в СУБД посредством внешней программы. При этом СУБД выполняет указанный запрос и возвращает в ответ некоторый результат.

Каждая команда SQL — это либо запрос данных из базы, либо обращение к базе данных, которое приводит к изменению данных в базе. В соответствии с тем, какие изменения происходят в базе данных, различают следующие типы запросов:

— запросы на создание или изменение в базе данных новых или существующих объектов (при этом в запросе описывается тип и структура создаваемого или изменяемого объекта);
— запросы на получение данных;
— запросы на добавление новых данных (записей)
— запросы на удаление данных;
— обращения к СУБД.

Таким образом, язык SQL является тем связующим звеном, которое обеспечивает взаимодействие веб-приложения с базой данных и хранящейся в ней информацией.

Язык SQL сложно назвать простым, и полноценное его использование потребует от вас достаточно больших усилий по его изучению.

Именно поэтому во многих инструментах веб-разработки (к примеру, во фреймворке CodeIgniter) взаимодействие сайта с базой данных реализовано с помощью своеобразной «надстройки», которая позволяет выполнять с ней все необходимые действия, не изучая при этом сам язык SQL.

Однако если вы не используете инструментов, подобных CodeIgniter, то для создания полноценного веб-приложения, управляемого базой данных, вам, разумеется, нужно будет освоить SQL.

Ну что ж, давайте подведем небольшой итог этого обзора.

Фундаментом веб-разработки был и остается язык HTML. Без него все остальное практически лишено смысла, ведь именно HTML-разметка преобразуется браузером в ту итоговую картину, что мы видим на экране монитора.

CSS является инструментом задания внешнего вида и позиционирования различных элементов веб-страницы, что позволяет нам гибко управлять обликом нашего веб-приложения.

PHP позволяет нам создавать мощные динамические сайты, обладающие определенной логикой поведения. PHP также дает нам практически неограниченные возможности по расширению функционала сайта.

JavaScript выступает в качестве важного, но не всегда обязательного дополнения. Он способен существенно повысить удобство использования вашего сайта и его интерактивность, добавить в него определенную «изюминку».

Наконец, SQL позволяет нам организовать взаимодействие сайта с базой данных, что и позволяет нам, в связке с языком PHP создавать действительно мощные, функциональные сайты.

На этом данный обзор можно считать оконченным. Я надеюсь, что он был для вас полезен и помог разобраться с наиболее важными фундаментальными моментами веб-разработки.

С уважением, Дмитрий Науменко.

P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Подключение css и javascript к сайту

Обычно css и javascript подключаются так

но возможно ли их подключать в любом другом теге ?

например внутри в

Если это возможно то в каком теге лучше это делать и вообще могут ли быть проблемы с таким подключением?

1 ответ 1

JavaScript работает с DOM моделью документа html, модель DOM формируется пока не загрузится весь html, Вы можете подключать JS в любом месте, но это не рекомендуется, а если на то пошло, то подключать нужно перед закрывающим тегом body. То есть после всего содержимого, так как оно должно загрузится, чтобы сформировать DOM модель.

UPD: Забыл про стили.

Стили можно подключать только в теге head. Так, как это определено в спецификации.

Google Chrome и Firefox прощаются с Flash и переходят на HTML 5

Сегодня Google официально заявила о скором прекращении поддержки мультимедийного контента в формате Flash в своем браузере Google Chrome. В середине мая компания предупредила рекламодателей, что от «морально устаревшей» технологии пора отказываться и в качестве альтернативы выбрала HTML5.

Сегодня более 90% интернет-страниц испытывают чрезмерные нагрузки и нуждаются в аналитике. Именно Flash замедляет процесс мониторинга и уже с сентября этого года, версия браузера Chrome 53 начнет блокировать подобный контент.

HTML5 намного легче, намного быстрее, и позволяет максимально эффективно рендерить веб-страницы. Сразу после запуска вы увидите насколько лучше стали работать привычные сайты. В декабре же, после релиза Chrome 55, мы планируем тотальное отключение Flash и полный переход на HTML5 на сайтах, которые его поддерживают.

Говоря о сайтах, Google подразумевает: ok.ru, vk.com, mail.ru, yandex.ru, live.ru, yahoo.com, youtube.com, facebook.com, amazon.com.

Одновременно с Chrome приступит к принудительной блокировке и конкурирующий продукт — браузер Mozilla Firefox. По словам представителей компании, отказ от Flash позволит сократить зависания и баги в работе браузера на 10%. [iClar]

Пример внешнего API: связь между ActionScript и JavaScript в веб-обозревателе

Flash Player 9 и более поздних версий, Adobe AIR 1.0 и более поздних версий

Этот образец приложения демонстрирует применение подходящих методов обмена данными между ActionScript и JavaScript в веб-обозревателе в контексте приложения для мгновенного обмена сообщениями, которое позволяет человеку участвовать в чате с самим собой (отсюда и имя приложения: Introvert IM). Пересылка сообщений между формой HTML на веб-странице и интерфейсом SWF выполняется с помощью внешнего API. В этом примере показаны, например, следующие методы:

Правильная инициация обмена данными путем проверки готовности обозревателя к связи перед установкой подключения

Проверка наличия у контейнера поддержки внешнего API

Вызов функций JavaScript из ActionScript, передача параметров и получение в ответ значений

Предоставление возможности вызова с помощью JavaScript методов ActionScript и выполнение этих вызовов

Получить файлы приложения для этого примера можно на странице www.adobe.com/go/learn_programmingAS3samples_flash_ru. Файлы приложения Introvert IM находятся в папке Samples/IntrovertIM_HTML. Приложение состоит из следующих файлов.

Основной файл приложения в формате Flash (FLA) или Flex (MXML).

Класс, который устанавливает связь между ActionScript и контейнером и управляет ею.

Заказной тип события, отправляемого классом IMManager при получении сообщения из контейнера.

Перечислимый тип, значения которого отражают разные значения состояния «доступности», которые можно выбрать в приложении.

HTML-страница приложения для Flash (html-flash/IntrovertIMApp.html) или шаблон, который использовался для создания HTML-страницы приложения для Adobe Flex (html-template/index.template.html). Этот файл содержит все функции JavaScript, которые делают контейнер частью приложения.

Подготовка связи между ActionScript и обозревателем

Одно из наиболее частых применений внешнего API состоит в том, чтобы позволять приложениям ActionScript связываться с обозревателем. С помощью внешнего API методы ActionScript могут вызывать код, написанный на языке JavaScript, и наоборот. Из-за сложности обозревателей и их метода внутренней визуализации страниц не существует метода, гарантирующего, что документ SWF зарегистрирует обратные вызовы перед тем, как будет запущен первый код JavaScript на HTML-странице. По этой причине перед вызовом функций в SWF-документе из JavaScript ваш SWF-документ должен всегда вызывать HTML-страницу, чтобы уведомить ее о том, что SWF-документ готов к приему подключений.

Например, выполнив ряд действий с применением класса IMManager, Introvert IM определяет, готов ли обозреватель для связи, и подготовить SWF-файл для связи. Первый шаг состоит в определении времени, когда обозреватель готов для связи. Он выполняется в конструкторе IMManager следующим образом:

Первым делом код проверяет, доступен ли внешний API в текущем контейнере с помощью свойства ExternalInterface.available . При этом он приступает к установке подключения. Поскольку исключения, связанные с безопасностью, и другие ошибки могут происходить при попытке связи с внешним приложением, код упакован в блок try (соответствующие блоки catch были пропущены при перечислении для краткости).

Затем код вызывает метод isContainerReady() :

Метод isContainerReady() в свою очередь обращается к методу ExternalInterface.call() , чтобы вызвать функцию JavaScript isReady() следующим образом:

Функция isReady() просто возвращает значение переменной jsReady . Этой переменной исходно присвоено значение false ; после запуска события onload на веб-странице переменная принимает значение true . Другим словами, если ActionScript вызывает функцию isReady() перед загрузкой страницы, JavaScript возвращает false для ExternalInterface.call(«isReady») , а метод ActionScript isContainerReady() возвращает соответственно значение false . После завершения загрузки страницы функция JavaScript isReady() возвращает значение true . Поэтому метод isContainerReady() в ActionScript также возвращает true .

В конструкторе IMManager происходит одно из двух событий в зависимости от готовности контейнера. Если isContainerReady() возвращает true , код просто вызывает метод setupCallbacks() , который завершает процесс установки связи с JavaScript. С другой стороны, если isContainerReady() возвращает false , процесс по существу откладывается. Создается объект Timer, которому дается инструкция вызывать метод timerHandler() раз в 100 миллисекунд:

Каждый раз, когда вызывается метод timerHandler() , он снова проверяет результат метода isContainerReady() . После инициализации контейнера этот метод возвращает значение true. Затем код останавливает Timer и вызывает метод setupCallbacks() , завершая процесс установки подключения к обозревателю.

Предоставление методов ActionScript JavaScript

Как показано в предыдущем примере, после того, как код определяет, что обозреватель готов, вызывается метод setupCallbacks() . Этот метод готовит ActionScript для принятия вызовов со стороны JavaScript, как указано ниже:

Метод setCallBacks() завершает задачу подготовки связи с контейнером путем вызова метода ExternalInterface.addCallback() для регистрации двух методов, которые можно будет вызвать из JavaScript. В этом коде первый параметр (имя, под которым этот метод известен JavaScript ( «newMessage» и «getStatus» ) идентичен имени метода в ActionScript. В данном случае использование других имен не давало преимущества, поэтому для простоты повторно применялось одно и то же имя. В итоге метод ExternalInterface.call() использовался для вызова функции JavaScript setSWFIsReady() , которая уведомляет контейнер о том, что функции ActionScript были зарегистрированы.

Связь между ActionScript и обозревателем

Приложение Introvert IM демонстрирует целый ряд примеров вызова функций JavaScript на странице контейнера. В простейшем случае (пример из метода setupCallbacks() ) функция setSWFIsReady() в JavaScript вызывается без передачи каких-либо параметров или получения в ответ значения:

В другом примере из метода isContainerReady() ActionScript вызывает функцию isReady() и получает в ответ логическое значение:

Передать параметры функциям JavaScript можно также с помощью внешнего API. Рассмотрим, к примеру, метод sendMessage() класса IMManager, который вызывается, когда пользователь отправляет новое сообщение своему «собеседнику»:

И снова здесь применяется метод ExternalInterface.call() для вызова назначенной функции JavaScript, уведомляя обозревателя о новом сообщении. Кроме того, само сообщение передается в качестве дополнительного параметра методу ExternalInterface.call() и соответственно передается в качестве параметра функции JavaScript newMessage() .

Вызов кода ActionScript из JavaScript

Связь предполагает двусторонний обмен, и приложение Introvert IM не является исключением. Не только клиент системы мгновенного обмена сообщениями в проигрывателе Flash Player вызывает JavaScript для отправки сообщений. HTML-форма также вызывает код JavaScript для отправки сообщений и запроса информации из SWF-файла. Например, когда SWF-файл уведомляет контейнер о том, что он закончил устанавливать контакт и готов к связи, обозреватель первым делом вызывает метод getStatus() класса IMManager, чтобы узнать исходное состояние доступности пользователя из клиента системы мгновенного обмена сообщениями SWF. Это выполняется на веб-странице функции updateStatus() следующим образом:

Код проверяет значение переменной swfReady , которая следит за тем, уведомил ли SWF-файл обозреватель о том, что он зарегистрировал свои методы в классе ExternalInterface. Если SWF-файл готов к приему связи, следующая строка ( var currentStatus = . ) фактически вызывает метод getStatus() в классе IMManager. В этой строке происходят три события.

Вызывается функция getSWF() для JavaScript, которая возвращает ссылку на объект JavaScript, представляющий SWF-файл. Параметр, переданный getSWF() , определяет, какой объект обозревателя возвращается в том случае, если на HTML-странице имеется более одного SWF-файла. Значение, переданное этому параметру, должно соответствовать атрибуту id тега object и атрибуту name тега embed , используемым для включения SWF-файла.

С помощью ссылки на SWF-файл метод getStatus() вызывается так, как если бы он был методом объекта SWF. В данном случае применяется имя « getStatus », потому что это то имя, под которым зарегистрирована функция ActionScript с помощью метода ExternalInterface.addCallback() .

Метод getStatus() для ActionScript возвращает значение, и это значение присваивается переменной currentStatus , которая затем назначается в качестве содержимого (свойство value ) текстового поля status .

Функция sendMessage() для JavaScript демонстрирует передачу параметра функции ActionScript. ( sendMessage() — это функция, которая вызывается, когда пользователь нажимает кнопку «Отправить» на HTML-странице.)

Метод newMessage() для ActionScript ожидает один параметр. Поэтому переменная message для JavaScript передается в ActionScript. Она служит в качестве параметра при вызове метода newMessage() в коде JavaScript.

Определение типа обозревателя

Из-за различий в методе доступа обозревателей к содержимому важно всегда применять JavaScript, чтобы определить выбранный пользователем обозреватель и вызвать ролик в соответствии с синтаксисом для конкретного обозревателя с помощью объекта окна или документа, как показано в функции getSWF() для JavaScript в этом примере:

Если в вашем сценарии не определен тип обозревателя пользователя, пользователь может столкнуться с неожиданным поведением при воспроизведении SWF-файлов в контейнере HTML.

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Переход от Flash к HTML5/CSS/и т.д.

Несколько лет назад я решил обойти все несоответствия браузеров, создав сайты полностью во Flash. Теперь это не очень хорошее решение, поэтому я переписываю свою платформу полу-CMS в php, javascript/jQuery и HTML. Один из аспектов моих Flash-сайтов, которым я очень доволен, — это возможность загружать все страницы или состояния в фоновом режиме, чтобы пользователь редко запрашивал страницу, которая еще не загружена. Когда это произойдет, я смогу отобразить индикатор выполнения. В AJAX я не могу показать прогресс, но я также нашел существенную разницу, которую я не ожидал. Во Flash я полностью загружаю .swf для страницы 1, прежде чем загружать страницу 2. Это означает все, включая изображения и т.д. В AJAX я не вижу способа сделать это. Я могу проверить, что сам файл HTML завершил загрузку, но не все его изображения загрузились перед загрузкой следующего файла HTML. Возможно ли это?

Если вы ищете решение HTML5, а не просто решение AJAX, вы можете изучить кэш приложений. Есть событие прогресса, в которое вы могли бы попасть, хотя он, возможно, не попадает в уровень детализации, который вам нужен. Насколько мне известно, ресурсы начнут загружаться в том порядке, в котором они указаны в файле манифеста.

Javascript выше Flash при помощи CSS

Многие задают себе вопрос, каким же образом можно сделать Javascript или др. элементы выше элементов Macromedia Flash. И после многих проб говорят себе, да это же невозможно, ан нет, это очень просто. Дело в том, что элемент флешь не будет выше всего, если его записать в сокращенном виде, как мы сделаем это сейчас.

Секрет 1-го примера заключается в том, что мы добавляем дополнительный параметр param name = «wmode» value = «opaque» / >

Секрет 2-го примера заключается в том, что мы добавляем дополнительный атрибут wmode=»transparent»

В добавок стоит написать, если flash-файл является формой для написания каких-либо данных и при этом используется атрибут wmode=»transparent» , то русский текст писать в этой форме не получится, все вопросы к flash-разработчикам 😉

Добавить комментарий