I wanna be developer » HTML http://iwannabedeveloper.com Как стать разработчиком с большой буквы Р Wed, 29 Dec 2010 12:51:25 +0000 en hourly 1 От задумки до готового сайта: HTML-верстка http://iwannabedeveloper.com/2010/09/154/ http://iwannabedeveloper.com/2010/09/154/#comments Fri, 24 Sep 2010 16:21:09 +0000 Родион Быков http://iwannabedeveloper.com/?p=154 Современный веб-сайт – это сложная структура. Каждая страница состоит из программного кода и графических элементов, которые собираются в единое целое и отображаются браузером. Верстка – связующее звено в процессе превращения графического дизайна сайта в программный код. Возможно, это не самый захватывающий процесс, но без верстки, нарисованный дизайнером макет не сможет превратится в HTML-код, понятный браузеру.

Процесс

Заказчик или начальник или директор, одним словом Босс, желая создать веб-сайт, обычно руководствуется своим представлением о веб-дизайне. Босс может посмотреть на похожие сайты, чтобы “сделать как у них”, может изложить пару идей и найти десяток картинок или фотографий, которые “обязательно должны быть на сайте”. Крайне редко Босс может структурно изложить свои мысли в виде письменного документа.

Получив от Босса наброски сайта “на салфетке”, картинки и ссылки на похожие сайты, Дизайнер открывает Photoshop и начинает создавать макет. В макете Дизайнер не только подбирает цвета, шрифты и стиль, но также разрабатывает элементы управления (кнопки, меню, таблицы).

С первой версией макета Дизайнер идет к Боссу. После фразы “мне все нравится, но давай переделаем несколько вещей” Босс обычно не оставляет камня на камне от разработанного дизайна. Не слишком довольный Дизайнер возвращается за свой Photoshop исправлять дизайн согласно пожеланиям Босса. Затем уже с исправленным дизайном, Дизайнер снова идет к Боссу. Этот процесс может повторятся не один и не два раза. На встречи с Боссом полезно взять Программиста, которому придется писать функциональность сайта. За каждой формой ведь стоит база данных, за каждой кнопкой логина стоит целая система аутентификации и контроля доступа. Программист должен соотносить программные компоненты с нарисованым интерфейсом и участвовать в процессе разработки дизайна.

Когда дизайн основных страниц сайта более-менее утрясен, Дизайнер передает результат своей работы (чаще всего – PSD-файлы, реже PNG) и заметки Верстальщику. Верстальщик, так же как и Дизайнер, открывает Photoshop (или Fireworks, если предпочитает PNG) и начинает прикидывать, как будет лучше расположить элементы HTML, чтобы нарисованый дизайн корректно отображался. Файл PSD “нарезается” на мелкие картинки, фоны, для текстов подбираются шрифты. Конечным результатом работы Верстальщика будет HTML и CSS код, а также мелкие картинки, файлы шрифтов и др. HTML-код описывает какие элементы будут располагаться на экране, а CSS-код будет описывать их взаимное положение, цвета, стили, шрифты текстов и так далее.

Нарезка

Процесс “нарезки” картинки верстальщиком в какой-то мере творческий, неформализуемый. С другой стороны, грамотный дизайнер позаботится о правильном расположении элементов по слоям в PSD/PNG, чтобы верстальщику не пришлось слишком потеть, вычленяя нужный элемент из общего рисунка. Например лого, или маленькая иконка в списке или менюшке – дизайнер с большой вероятностью вынесет их на отдельный слой и их будет легко подхватить верстальщику. Многие картинки придется вырезать с точностью до пикселя, чтобы избежать “мохнатых” кнопок, или чтобы заставить элементы правильно сопрягатся друг с другом. Вероятно иногда придется вырезать кусочек фона или длинные полоски толщиной в 1 пиксель – для различных фоновых градиентов или “распорок”.

Кодирование

В зависимости от выбранной стратегии, верстальщик может верстать либо “табличной” версткой, либо “блочной”. Табличная верстка сейчас применяется реже, и можно сказать, что она устарела, однако у нее есть свои положительные черты. Главное – это то, что каждый элемент можно легко позиционировать относительно верхнего левого угла ячейки таблицы, и он оттуда уже никуда не денется. На табличной верстке легче сделать “резиновый” дизайн, размеры которого изменяются в зависимости от ширины окна браузера. Разные браузеры более-менее одинаково отрисовывают таблицы, т.е. проблем с отображением сайта на разных платформах и браузерах будет меньше. Если не планируется переделывать дизайн в дальнейшем, то таблица может быть более удачным выбором.

Блочная верстка хороша при необходимости быстро сменить дизайн сайта или подстроить его под отображение скажем на мобильном устройстве. Блочная структура легче поддается распознаванию не-визуальными браузерами и “ботами” поисковых систем. В блочной верстке важно установить иерархию блоков (кто чей контейнер) и затем уже накладывать CSS-стили. Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
  <div id="header">
    <div id="logo">

    </div>
    <div id="tagline">

    </div>
  </div>
  <div id="menu">

  </div>
  <div id="content">

  </div>
  <div id="sidebar">

  </div>
  </body>
</html>
]]> http://iwannabedeveloper.com/2010/09/154/feed/ 0 Введение в HTML http://iwannabedeveloper.com/2010/08/vvedenie-v-html/ http://iwannabedeveloper.com/2010/08/vvedenie-v-html/#comments Tue, 17 Aug 2010 15:03:25 +0000 Родион Быков http://iwannabedeveloper.com/?p=142

]]> http://iwannabedeveloper.com/2010/08/vvedenie-v-html/feed/ 0 Как устроена веб-страница http://iwannabedeveloper.com/2009/02/kak-ustroena-web-stranica/ http://iwannabedeveloper.com/2009/02/kak-ustroena-web-stranica/#comments Mon, 02 Feb 2009 14:53:31 +0000 Скакунов Александр http://iwannabedeveloper.com/?p=63 Веб-страница устроена просто.

Она состоит из двух частей: заголовка (head) и тела документа (body).

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

Содержимое заголовка как правило не видно — оно носит служебный характер.

Тело документа — это собственно всё, что на странице написано и нарисовано: параграфы текста, ссылки, картинки и видео-вставки.

Давайте попробуем написать простейшую веб-страничку. Открываем любой текстовый редактор (только не MS Word! Попробуйте Notepad++) и копируем туда такой текст:


<html>
  <head>
    <!-- это заголовок документа -->
    <title>First blood</title>
  </head>

  <body>
    <!-- это собственно тело -->
    <h1>Hello Rambo!</h1>
  </body>
</html>

Сохраняем файл куда угодно под названием 1.htm и открываем его в браузере (можно просто перетащить файл в браузер). Должна получится примерно такая картина (на рисунке – браузер Google Chrome, у вас может быть другой):

Ура! Теперь осталось выучить несколько основных тегов и попробовать их применять. Тэг H1 мы уже использовали в примере выше — он даёт нам заголовок первого уровня (самый крупный — тут та же идеология, что и с ватманами: А1 больше чем А3):


<strong>жирный</strong> = жирный

<em>курсив</em> = курсив

<a href="http://google.com">ссылка на Google</a> =  ссылка на Google

<input type="button"
  value="Нажми меня"
  onclick="alert('Вот и молодец!')" /> =

На закуску рекомендую прочесть статью “Простейшая веб-страница” — написана просто и с юмором, читается легко.

]]> http://iwannabedeveloper.com/2009/02/kak-ustroena-web-stranica/feed/ 1 Что почитать http://iwannabedeveloper.com/2007/05/reading-advice/ http://iwannabedeveloper.com/2007/05/reading-advice/#comments Thu, 24 May 2007 07:23:24 +0000 Скакунов Александр http://iwannabedeveloper.com/2007/05/24/reading-advice/
  • php.net – сайт-проматерь-пропаперь. Когда в редакторе нет встроенного хелпа по PHP, удобно лазить сюда: http://php.net/php_uname (справка по php_uname())
  • PHP.SPB.RU – хотя сайт староват и давно не обновлялся, здесь много полезных кусков кода с подробными объяснениями. До сих пор пользую модуль для измерения скорости работы PHP
  • phpclasses.org – много не всегда качественных, но уже готовых к использованию PHP-классов. Выкладывать ваши наработки или нет – дело хозяйское. Я выкладываю.
  • htmlcoder – тоже обновляется не часто, но советую перелопатить все имеющиеся здесь статьи по HTML, CSS и JavaScript.
  • dklab – сайт, на страницах которого был выложен класс JsHttpRequest, реализующий AJAX, когда самого термина AJAX ещё не придумали. Автор явно человек с головой. Рекомендую наблы.

    • Приятного чтения!

    ]]>     http://iwannabedeveloper.com/2007/05/reading-advice/feed/ 0     Пример веб-приложения http://iwannabedeveloper.com/2007/05/web-app-example/ http://iwannabedeveloper.com/2007/05/web-app-example/#comments Tue, 22 May 2007 13:21:39 +0000 Скакунов Александр http://iwannabedeveloper.com/2007/05/22/%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80-%d0%b2%d0%b5%d0%b1-%d0%bf%d1%80%d0%b8%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8%d1%8f/ Итак, рассмотрим пример веб-приложения со следующей функциональностью:

    • показать список товаров
    • подредактировать конкретный товар
    • удалить товар
    • добавить товаров

    Исходники (12 Кб)

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

    1. создать базу данных products (удобно через phpMyAdmin)
    2. содержимое файла schema.sql скормить этой базе, в результате чего будет создана одноименная таблица
    3. в файле server.php поправить данные (логин/пароль) для коннекта с базой

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

    У кого что не получается – пишите в комменты, будем делиться опытом друг с другом.

    P.S. Удобно дампить переменные (смотреть их содержимое) с помощью имеющегося в проекте класса dBug, для этого надо сделать такой вызов:

    < ?
new dBug( $var );
?>
    ]]>     http://iwannabedeveloper.com/2007/05/web-app-example/feed/ 5     Вставка PHP-кода http://iwannabedeveloper.com/2007/05/vstavka-php-coda/ http://iwannabedeveloper.com/2007/05/vstavka-php-coda/#comments Fri, 18 May 2007 18:40:14 +0000 Скакунов Александр http://iwannabedeveloper.com/2007/05/18/vstavka-php-coda/ Давайте посмотрим, как вставить в ХТМЛ результаты работы PHP-скрипта.

    <html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №2</h1>
    <p>Сегодняшняя дата:
    <?
      echo date("d.m.Y");
    ?>
    </p>
  </body>
<html>

    При открытии в броузере это будет выглядеть так:

    Пример 2

    Как это получилось: PHP-сервер ищет в тексте файла куски кода, обрамленные в <? … ?>, изымает их текст, выполняет их, а на их место подставляет результаты работы. Обращаю внимание: если в этом коде убрать команду echo, отвечающую за передачу текста в броузер, то на месте этой PHP-вставки будет просто пустая строка.

    Вы можете в броузере посмотреть код результатирующего документа HTML (обычно это меню “Вид” -> “Исходный код страницы” в броузере). Там будет следующее:

    <html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №2</h1>
    <p>Сегодняшняя дата:
    18.05.2007    </p>
  </body>
<html>

    Подробнее о функции date() можно узнать на сайте php.net, рекомендую. Там же после стандартной документации идут комментарии других PHP-разработчиков, часто очень полезные.

    Вместо функции date() может стоять просто строка или арифметическое выражение:

    <html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №2.1</h1>
    <p>Счет до 5:
    <?
    for($i=0; $i<5; $i++)
      echo '<br/>' . ($i+1);
    ?>
    </p>
  </body>
<html>

    И результат:

    Пример 2.1

    Как видно, конкатенация строк производится через символ точки. Использование знака “плюс” сразу приведет оба операнда к числовому типу, что не всегда в ваших интересах :)

    Копируем примеры, пробуем сами, делаем ошибки, набиваем руку, накапливаем вопросы, пишем комменты!

    ]]>     http://iwannabedeveloper.com/2007/05/vstavka-php-coda/feed/ 3     Простейший документ HTML http://iwannabedeveloper.com/2007/05/simple-html-doc/ http://iwannabedeveloper.com/2007/05/simple-html-doc/#comments Thu, 17 May 2007 13:49:18 +0000 Скакунов Александр http://iwannabedeveloper.com/2007/05/17/%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%b5%d0%b9%d1%88%d0%b8%d0%b9-%d0%b4%d0%be%d0%ba%d1%83%d0%bc%d0%b5%d0%bd%d1%82-html/ Документ HTML представляет собой текстовый документ и состоит из тэгов.

    <html>
  <head>
    <title>Умелые ручки</title>
  </head>
  <body>
    <h1>Пример №1</h1>
    <p>Halo world!</p>
  </body>
<html>

    Легко заметить, что документ обрамлён парой тэгов <html>.

    Далее идут две большие секции – <head> и <body>.

    Секция <head> содержит директивы, относящиеся к документу в целом: заголовок (в данном случае это строка “Умелые ручки”, обрамленная тэгом <title> – эта строка будет показана в заголовке окна броузера), кодировку, параметры кэширования, подгрузку внешних файлов со скриптами или стилями, о чем мы поговорим позже.

    Секция <body> содержит сам документ. В нашем примере это два тэга: <h1> (от англ. “header №1” – “заголовок №1“) и<p> (от англ. “paragraph” – “параграф“).

    Вот как может выглядеть результат открытия примера выше в броузере:

    sm_1_1.PNG

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

    ]]>     http://iwannabedeveloper.com/2007/05/simple-html-doc/feed/ 5