Hyper Text Markup Language (язык разметки гипертекста) – язык, используемый для создания документов в Интернете. Гиперссылка (Hyperlink) – базовый функциональный. - презентация

1

2 Hyper Text Markup Language (язык разметки гипертекста) – язык, используемый для создания документов в Интернете. Гиперссылка (Hyperlink) – базовый функциональный элемент html-документа, представляющий собой реализацию динамической связи какого-либо объекта данной web-страницы с контекстным содержимым другого документа.

3 Браузер – программа для просмотра html- документов, предназначенная для динамической обработки кода НТМL и отображения web-страниц. Сервер – это компьютер с установленным на нем специальным программным обеспечением, имеющий собственное доменное имя

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

5

6 HTML5 – спецификация, включающая в себя правила описания элементов web-страниц и правила отображения этих элементов CSS – каскадные таблицы стилей. Позволяют отделить правила оформления страницы от ее содержимого. jQuery, JavaScript, Ajax – технологии, позволяющие создавать динамические web- страницы

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

8 Набор средств, реализующих типовые операции над сайтом, позволяющие управлять его содержимым. Позволяют подключать сторонние модули. Применяются для создания типовых сайтов. Примеры Joomla Wordpress Bitrix

9 Кодировка кириллицы - общепринятый стандарт, включающий набор символов, позволяющий отображать знаки русского алфавита KOI8 является основным стандартом для серверов, работающих на базе платформы UNIX Windows 1251 используется для отображения русских символов в браузерах, работающих под управлением операционных систем компании Microsoft Unicode (UTF-8) был создан с целью объединения всех существующих на сегодняшний день национальных кодировок в одну

10 редактор web-кода (web-кодер, web- верстальщик); web-мастер (web-программист); web-дизайнер

11 кодирует web-страницы на языке разметки HTML и автоматизирует их оформление с помощь таблиц стилей CSS входит умение отлаживать элементы и сценарии, созданные с использованием технологий DHTML и JavaScript

12 Специалист, полностью обеспечивающий интерактивность web-сайтов практически любой сложности В обязанности web-мастеров входит администрирование web-серверов, клиентское и серверное программирование с использованием современных технологий и обеспечение публикации баз данных в Интернете. Для того чтобы успешно работать в качестве web-мастера необходимо знание: HTML и CSS; JavaScript и DHTML; web-мастеринга; web-программирования.

13 Специалист, отвечающий за структуру и внешний вид сайта Необходимо знание HTML, CSS и графических программ Работа web-дизайнера включает в себя следующие функции: создание макета сайта; распределение информации по разделам сайта; разработку навигации; использование шаблонов; макетирование сайта с учетом эргономики (web- usabllity); создание иллюстраций для web-страниц; создание анимационных элементов и баннеров; разработку динамических элементов (ролловеров); оценку и тестирование сайта.

14 Зачем вам нужен web-сайт? На какую аудиторию вы нацелены? Кто будет работать на вашем сайте? Сколько разработчиков планируется привлечь к созданию сайта? Как вы будете создавать или откуда собираетесь брать текст и изображения для вашего сайта? Как следует организовывать файлы вашего сайта? Будут ли на сайте располагаться мультимедиа-файлы Flash или RealAudio? Нужны ли вам такие интерактивные функции, как форма обратной связи, гостевая книга, форум, чат? Какая система навигации будет на вашем сайте? Как вы будете решать проблемы роста и в дальнейшем разрабатывать сайт?

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

16 составление технического задания; подготовка текстового содержания и иллюстраций; разработка дизайна сайта; кодирование и программирование; тестирование сайта; публикация и раскрутка сайта

17 Персональный сайт Визитная карточка Промо-сайт Корпоративный сайт Интернет-магазин Тематические порталы

18 Самый простой способ разделения файлов – разделение по выполняемым функциям. В простом статическом сайте можно выделить несколько групп файлов: странички сайта, файлы с расширением HTML; таблицы стилей, файлы с расширением CSS; клиентские скрипты, обычно написанные на JavaScript, файлы с расширением JS; графические файлы, используемые в дизайне сайта, файлы с расширением JPG, GIF, PNG, SWF; файлы для скачивания посетителями, файлы с расширением ZIP, RAR, МРЗ, PDF, DOC и т. п.

19 Графика, используемая в дизайне сайта: логотип, графические элементы оформления, разнообразные кнопки и пиктограммы. Иллюстрирующая графика

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

21 Правила наименования файлов в Windows и UNIX разные. Основное различие, которое и вызывает большинство проблем, – регистр символов в именах файлов. Вторая большая проблема в именах файлов – это русские буквы

22 в именах файлов можно использовать только латинские буквы [a-z], цифры [0-9], знак подчеркивания «_» и дефис «-»), а также точку «.» как разделитель собственно имени файла и его расширения; в именах файлов должны использоваться только символы нижнего регистра; имя файла должно начинаться с буквы; во избежание проблем длина имени файла не должна превышать 31 символ.

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

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

25 Указания посетителям должны быть сформулированы в повелительном наклонении, но в мягкой форме Следует избегать употребления восклицательных знаков Стараться как можно реже использовать слова, набранные прописными буквами Вместо подробного словесного описания использовать краткие примеры или просто иллюстрации

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

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

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

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

30 Избегайте использования фоновых изображений, поверх которых идет текст. Пусть изображение само по себе интересно – в качестве фона посетители все равно не смогут его толком разглядеть. Если же в изображении нет ничего интересного – значит, оно вообще не нужно. Сейчас использование фоновых изображений – признак плохого вкуса.

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

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

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

34 Ссылка на локальный документ Регистр Неправильный путь к файлу

35 Рекомендуется использовать альтернативный текст для картинок-ссылок. На каждой странице рекомендуется писать ее заголовок Цвет посещенных и не посещенных ссылок должен различаться; В каждой директории размещайте файл index.html (default.html); Описание и ключевые слова (Meta) должны присутствовать и различаться для каждой страницы; Проверьте орфографию.

36 Разбивайте большие таблицы Оптимизируйте графику Задавайте ширину и высоту рисунков Многократно используйте одни и те же изображения Применяйте каскадные таблицы стилей (CSS) Храните таблицу стилей во внешнем файле Размещайте важную информацию наверху страницы

37 Бесплатный хостинг Хостинг у провайдера Платный хостинг Хостинг у знакомых

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

39 Регистрация в каталогах и поисковых системах Размещение описания сайта в рассылках- обзорах Сети Обмен ссылками с другими сайтами Баннерная реклама Написание собственных статей Открытие собственной рассылки

40 Кроссбраузерная верстка – это верстка сайта, которая позволяет отображать его во всех браузерах одинаково

41 Наличие некоторых стандартов HTML, которым ваша верстка может не соответствовать Использование новых технологий, неподдерживаемых старыми версиями браузеров Собственные правила поведения IE Значение атрибутов по умолчанию

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

43 Адаптивные шаблоны Поддержка экранов Retina Закрепленные шапки Полноразмерные фоновые изображения CSS-прозрачность Минималистические целевые (посадочные) страницы Цифровые QR-коды Бесконечный скроллинг Гиды по свойствам на главной странице Скользящие панели веб- страниц Переключение мобильной навигации API и open source Глубокие тени блоков CSS3-анимации Вертикальная навигация Одностраничный веб- дизайн Округлые элементы дизайна

44 Не заставляйте меня думать! Количество щелчков мышью не имеет значения до тех пор, пока каждый клик очевиден Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось