Представьте себе первобытных людей, сидящих в пещере и грызущих кости диких животных: они и подумать не могли о том, что их будущим сородичам придет в голову изобрести такую оригинальную машину, как компьютер, а уж тем более пользоваться так называемым интернетом, создавать свои сайты и продвигать их. Сейчас многие уже загорелись мечтой о создании интересных web-страничек. К осуществлению желаемого приходится приложить немало креативности и знаний о современных технологиях.
С чего все началось? Сеть Internet постепенно становилась более популярной. Изначально были электронные доски, где зарегистрированные пользователи передавали друг другу информацию. Затем Тим Бернерс-Ли изобрел протокол передачи гиперссылок (HTTP), а также язык гипертекстовой разметки (HTML). Такое событие можно считать великим началом движения вперед.
Статические страницы.
Проще, конечно, создать статический сайт. Но есть важная деталь: для любого сайта важно то, чтобы его просматривали. Обычный текст на белом фоне никого уж точно не заинтересует. Тут-то мы и понимаем, какую роль играет дизайн нашей статической странички – набор картинок и gif-анимации, текстов и других элементов, положение которых остается неизменным (статическим). А создание дизайна начинается с создания логотипа, который всегда отображается рядом с именем страницы. Логотип, gif-анимации, картинки создаются в графических редакторах (в настоящее время самым распространенным является Adobe Photoshop). Мы должны помнить, что логотип очень важен для сайта, потому что он буквально является его лицом. Например, логотипы многих социальных сетей ( Facebook, Twitter), форумов и интернет-магазинов известны во всем мире. Создание самой web-страницы заключается в написании текстового файла с расширением *.html и содержащим набор тегов. Каждый тег обозначает конкретный тип содержимого и его расположение, например <h1>Заголовок статьи 1</h1> — заголовок первого уровня, <h2>подзаголовок статьи 1</h2> — заголовок второго уровня.
Обратим внимание на то, что написание сайта начинается с тега <!DOCTYPE…>, перед которым не должно быть ни пробелов, ни пустых строк. Этот самый тег указывает на версию языка разметки. Далее идет тег <html>…</html>, внутри которого помещается весь остальной код HTML. Код HTML внутри тега «<html>…</html> делится на две части: 1-ая часть составляет «голову» кода и обозначается тегом «<head>…</head>», в котором мы указываем название страницы и общую информацию о содержимом, обычно не отображающуюся; 2-ая часть составляет «тело» сайта и обозначается тегом «body>…</body>». Это та составляющая web-страницы, которую видят пользователи.
Динамические страницы.
И все-таки динамические страницы взяли верх над статическими. Все дело в непрерывном развитии, в постоянном продвижении.
Динамическая страница- это web-страница, содержимое которой может меняться в режиме реального времени. За оформление такой страницы отвечает технология CSS. Она способна добавить анимацию, прозрачность и другие эффекты объекту, определить его расположение. Принято описывать команды CSS в отдельном файле с расширением *.css и прикреплять его к *.html-файлу при помощи специального тега «<link…>», который располагается между тегами «<head>…</head>». Существует множество способов сделать сайт динамическим, например использовать язык разметки HTML5, новейшую версию уже знакомого нам HTML, или один из языков web-программирования PHP ( при этом расширение файла меняется на *.php). В оформлении динамической страницы участвуют скрипты, самым распространенным из которых является JavaScript. Его важная технология – Ajax, которая использует набор методов для загрузки информации на страницу по мере необходимости.
Со временем создаются новые команды, теги, скрипты, поэтому у разработчиков появляется необходимость тестировать технологии на правильность отображения в различных браузерах. Если одна технология не подходит для работы с определенным браузером, нужно использовать другую.
Согласитесь, что невозможно не совершенствоваться и не совершенствовать. Популярность сайта напрямую зависит от идей, вкусов и знаний, так что все в наших руках!
Вот примеры интересных дизайн решений:
http://www.aquacp.com/
http://www.thebicwall.com/
http://theenemy.typepad.com/stumble/drewcope_p.swf
http://wordcloud.pagemon.net/
http://www.karusel-tv.ru/games
http://whiteboard.is/
http://provincestudio.ru/
