От задумки до готового сайта: HTML-верстка

September 24th, 2010 No Comments »

Современный веб-сайт – это сложная структура. Каждая страница состоит из программного кода и графических элементов, которые собираются в единое целое и отображаются браузером. Верстка – связующее звено в процессе превращения графического дизайна сайта в программный код. Возможно, это не самый захватывающий процесс, но без верстки, нарисованный дизайнером макет не сможет превратится в 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>

Базы данных в реальном мире

January 13th, 2010 No Comments »

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

Студент будучи хорошим учеником, спроектирует что-то вроде такой схемы:

products (id, name, price, quantity) -- для хранения товаров и остатков
users (id, name) -- для хранения пользователей
orders (id, date, sum) -- для хранения заказов

Потом студент свяжет эти таблицы, и будет прав, теория на его стороне:

users_orders (id_user, id_order)
orders_products (id_order, id_product)

Если студент был не просто хорош, а очень хорош, он навесит индексы, и foreign-keys.

Магазин начал работу, товары вносятся в базу, появились клиенты, пошл продажи. Все хорошо, убрали позиции старого ассортимента, добавили новые, пара клиентов забыли свои пароли и создали новые аккаунты. Тут начались чудеса – звонит клиент и просит найти старый заказ, а его нет. А если есть заказ, он оказывается пуст… В чем же ошибка ?

Ошибка в том что в эту сферически-вакуумную базу не были внесены некоторые неидеальности, чтобы учесть неидеальность реальности.

Заказ в интернет-магазине – это не просто список, это факт. Это – снимок реальности в каком то моменте времени. Поэтому таблица должна была выглядеть так:
orders_products (id_order, product_name, product_price, quantity, sum)

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

С foreign keys и каскадным удалением тоже шутить не надо – удаление плохого пользователя из таблицы users не должно удалять его заказы. Заказ – это факт свершенный, отрицать его или выкинуть ради красоты теории будет неверным.

EasyEclipse

February 7th, 2008 1 Comment »

Ранее я писал о том какой есть замечательный редактор Eclipse. Однако, Eclipse – это конструктор, и его не каждый хотел бы собирать. Для таких случаев создан проект Easy Eclipse: http://www.easyeclipse.org

На этом сайте представлены сборки Eclipse, “заточенные” под специальные задачи – Java-

Эклипс-универсал

January 3rd, 2008 3 Comments »

Вы все еще ищете крек для своего платного php-редактора ? Тогда мы идем к вам ! Причем не затем, чтобы надавать по рукам, а с мирной просветительской целью.

Дело в том что существует современный, мощный, гибкий и при этом совершенно бесплатный Eclipse. Причем это не редактор, а интегрированная расширяемая среда среда разработки, которую с помощью расширений (плагинов) можно превратить в “редактор чего угодно”. Сначала существовал как среда разработки на Java, но быстро вышел за первоначальные рамки. Вот список проектов в рамках которых разрабатываются плагины для Eclipse; спектр широк – от редакторов кода для разных языков до рисования диаграмм, от клиента для сервера базы данных до узкоспециальных вещей вроде составления химических молекул. О возможностях “клипсы” к расширению даже пошутили, что скоро Эклипс станет плагном к Эклипс. Своей “широкой душой” и бесплатностью Эклипс обрела популярность не только среди разработчиков ПО, но и в научной и университетской среде.

Расширить функциональность с помощью плагина легко – достаточно скачать соответствующий архив и развернуть плагин в папку с установленной Eclipse (тут только одна уловка – на эту папку у пользователя должны быть права, иначе не запустится) Другой путь – это установка плагина из самой Eclipse. Для этого надо выбрать пункт меню Help -> Software Updates -> Find and Install и в соответствующем диалоговом окне ввести URL откуда клипса сама заберет нужные ей файлы. Вот пара примеров:

Рассчитываю, что у вас свежая на текущий момент Eclipse 3.3.1 (Europa):
Клиент Subversion (SVN)

А например это надо будет скачать и развернуть в папку с Eclipse “руками”:
Помошники для работы с HTML/CSS: Web Standard Tools
Редактор для PHP: PHPEclipse

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

Ссылки по теме
Скачать Eclipse с официального сайта

Устанавливаем MS SQL Server 2005 Express Edition

November 23rd, 2007 1 Comment »

Может показатся, что другого бесплатного сервера БД кроме MySQL на текущий момент не существует – слишком уж он распространен. Однако это не совсем верно. Даже не говоря о таких замечательных open source СУБД как Postgre, на текущий момент разработчик может сводобно получить и использовать такие “большие” системы как MS SQL Server, IBM DB2 и даже Oracle.

Самый легкий для понимания и установки, а также довольно распространенный в наших широтах, MS SQL Server 2005 Express Edition доступен на сайте Microsoft для свободного скачивания и использования. Чтобы познакомится поближе с этим зверем делаем так:

  1. Скачиваем MS SQL Server 2005 Express Edition Download
  2. Скачиваем архиполезную тулзу MS SQL Server Management Studio Express
  3. Скачиваем сопутствующие вещи (ссылки см. там же) – например .NET Framework 2.0
  4. Устанавливаем это хозяство на своей машине

Очень сложно, верно ? Отож.

С помощью Server Management Studio можно создавать и удалять базы и таблицы, просматривать данные в таблицах MSSQL, делать запросы, создавать процедуры и триггеры, управлять аккаунтами пользователя. С помощью Server Configuration Manager настраиваются сетевые соединения и прочее.

После того как базовые функции освоены, можно попробовать использовать MSSQL в связке с PHP, Coldfusion, ASP.net или чем угодно для создания веб-сайтов или desktop-приложений. Как это делать – зависит от конктретного языка, в любом случае это не сложнее чем с MySQL. Есть правда несколько ловушек куда можно угодить, делая первые шаги:

  • Супер-пользователь в SQL Server зовется не “root” а “sa”
  • Протокол TCP/IP по умолчанию отключен, посему соединится с сервером из скрипта может не получится. Чтобы активировать протокол нужно воспользоваться тулзой MS SQL Server Configuration Manager: в разделе Protocols найти TCP/IP и его свойствах на вкладке протокол поставить Yes рядом с позицией Enabled.
    SQL Server Configuration Manager
  • В отличие от прошлых версий и от MySQL, в MS SQL Server 2005 Express Edition порт не установлен жестко в конкретное значение. Поэтому если вы зовете MSSQL по стандартном порту 1433 – он вас не услышит. Узнать какой порт используется в конкретном случае можно той же тулзой MS SQL Server Configuration Manager, поле TCP Dynamic Ports на закладке IP Addresses в Свойствах (Properties) протокола TCP/IP.
  • По умолчанию, в SQL Server отключена “родная” аутентификация, и включена только Windows Authentification. Проще говоря, просто по логин-паролю в сервер не зайдешь. Чтобы включить SQL Server Authentication, зайдите тулзой MS SQL Server Management Studio Express используя Windows-аутентификацию, клацнув правой клавишей на сервере вызовите его Свойства (Properties), в закладке Security позиция Server Authentification – выставить радиобатон в позицию “SQL Server and Windows Authentication mode”
  • Лучший способ принести или унести БД целиком – сделать Detach базы данных в одном месте, и сделать Attach на другом сервере – дешево и сердито. База данных в сервере MS SQL – это один файл с расширением .mdf + файл лога .ldf (но он не требуется при переносе)
  • Если вы создали таблицу под одним пользователем (например находясь в Management Studio Express под пользователем sa), а пытаетесь работать с таблицей из PHP под другим пользователем, то таблицу вы скорее всего не увидите, поскольку они созданы в разных схемах. Под sa эта схема скорее всего называется ‘dbo’, а у пользователя – совпадает с его логином. Так что dbo.Accounts и vasya.Accounts – это две разные таблицы. Чтобы перекинуть таблицы из одной схемы в другую можно сделать одну хитрость. Запустить скрипт приведенный ниже:

    SELECT 'ALTER SCHEMA dbo TRANSFER ' + TABLE_SCHEMA + '.' + TABLE_NAME
    FROM INFORMATION_SCHEMA.TABLES
    WHERE TABLE_SCHEMA = 'vasya'
    

    Затем скопипастить получившиеся строки в окно запроса и выполнить их все. Таблицы перейдут из схемы vasya в схему dbo.

Microsoft прилагает массу усилий в конкурентной борьбе за долю MS SQL Server на рынке. Интернет щедро заполнен публикациями о том как делать те или иные вещи с помощью MS SQL, а сам сервер и сопутствующее ПО достаточно дружественны к неопытному пользователю.

Ссылки по теме:
IBM DB2 Trial Downloads
Oracle Database 10g Express Edition