FAQ по веб-дизайну для начинающих

Автор: content Пятница, Апрель 11th, 2008 Нет комментариев

Рубрика: Интернет

Сей документ меня побудило написать рвение многих моих знакомых непременно сделать свой сайт. Серьёзный человек посмотрит на этот FAQ и скажет: «Зачем плодить ламерьё?» Однако, некоторые люди попадаются вроде толковые, или просто любознательные, или такие, кого нужда заставила сделать сайт, которым не хватает совета более опытного товарища. Не каждому дано дойти до всего самому, но даже этот FAQ — всего лишь указание более короткого и простого пути, толчок к дальнейшим поискам, а не глобальная инструкция по ваянию суперсайтов за три дня. Каждый вопрос — тема для отдельной статьи, а может быть и книги… Так что, дерзайте.

Q: Хочу сделать сайт. С чего начать?
A: Начать прежде всего следует с HTML. За неделю, а то и за пару часов реально сбацать простенький сайт. Если его вы уже изучили, поинтересуйтесь JavaScript. Если вы уже собрались с силами, чтобы начать делать нормальный сайт, изучите рекомендации, советы по этой теме. Купите наконец хорошую книгу, она направит вас к дальнейшим действиям.

Q: Какими программами следует пользоваться?
A: На самых ранних этапах стоит поработать в Блокноте, что позволит вникнуть в суть. После хорошей практики набивки кода вручную, можно попробовать какой-нибудь несложный визуальный редактор HTML-страниц. Их — миллион, но хороший — один: Macromedia Dreamweaver MX 2004. Он большой и сложный, но не поленитесь изучить его, и будете вознаграждены свободой творчества и богатством возможностей. Для просмотра сайтов сойдёт Internet Explorer 6 (сейчас уже все окончательно перешли на него), Firefox Mozilla, Opera 6-8. Важно тестировать сайт в нескольких браузерах, поскольку все они могут давать разные результаты. Это научит вас выражать свои идеи настолько просто и ясно, что любой браузер будет выдавать то, что вы задумывали.

Q: Что такое JavaScript и для чего это надо?
A: JavaScript — это язык программирования, используемый в составе HTML для увеличения функциональности и возможностей взаимодействия с пользователями. Многие начинающие «веб-мастера» во всю силу своей фантазии используют «украшения», сделанные из готовых скриптов, хотя этот язык обладает и более серьёзными возможностями. Вот наиболее частые примеры применения JavaScript: проверка введённых пользователем данных до их отправки на сервер, организация меню со сложной структурой, вывод вспомогательных окон. Если нет серьёзной необходимости в украшениях и наворотах, советую не тратить время на JavaScript. До сих пор JavaScript поддерживается не у всех, а если и поддерживается, то у каждого по-своему :) .

Q: Что такое CSS?
A:CSS — Cascade Style Sheets (каскадные стилевые таблицы). Вещь, на которую стоит тратить времени даже чуть больше, чем на HTML. CSS — это мощное средство управления оформлением сайта. CSS включается непосредственно в HTML файл или загружается отдельно. Этот файл очень напоминает по структуре файлы типа INI. Один файл CSS может задавать оформление тысяч страниц. Забудьте про тэги FONT (теперь это стало дурным тоном), всё оформление сайта будет задаётся в одном месте. Например, если указатьP {color: red;}то на всех страницах сайта цвет абзацев (<P>) изменится на красный. В комплекте с Macromedia HomeSite есть замечательная программа Top Style 2 для визуального редактирования CSS файлов. В Dreamweaver есть встроенный редактор. Это действительно стоит попробовать и на это действительно стоит потратить время!

Q: Как использовать графику на веб-страницах?
A: Главное правило — графики должно быть минимум. Многие любят украшать сайт, как новогоднюю ёлку, да ещё не дай Бог с анимацией. Один рисунок на заголовок (логотип), пара значков, пара фонов для табличных ячеек и всё. Форматы — традиционный GIF, прогрессивный PNG и для фотографий JPEG. Каждый файл — не более 5-10 килобайт. Иной раз заходишь на сайт и видишь: текст давно загрузился, а графические пробелы продолжают заполняться минуты две. А информации четыре строчки! Вот и думаешь, что здесь главное, красивый дизайн или информация? Запомните правило: графики должно быть не больше чем полезной информации, ведь пользователь пришёл к вам не на картинки смотреть, верно?

Q: Что такое сервер, хостинг, как «выложить» сайт в интернет?
A: Сервер — это удалённый (в смысле, где-то далеко) мощный компьютер, постоянно подключенный к Интернету, на котором работает специальная программа-сервер. Когда вы запрашиваете определённую страницу, запрос проходит через сети, маршрутизаторы и т.д., пока наконец не попадёт на сервер назначения. Программа обработает запрос и выдаст вам нужную страницу. В остальном сервер почти ничем не отличается от вашего домашнего компьютера. Странички на сервере хранятся как и у вас — на дисках, в папках. Существуют публичные серверы для публикации сайтов — так называемые хостинг-провайдеры. Вы заходите их сайт, регистрируетесь, платите определённую сумму за услуги (там всё подробно расписано), вам выдаётся учётная запись. Используя выданный вам логин и пароль, вы подключаетесь к хостинг-серверу через FTP-протокол. Это делается при помощи FTP-клиентов, которые чем то напоминают Проводник. Далеко ходить за ним не надо, наверняка у всех есть Total Commander или FAR. На худой конец, FTP-протокол поддерживается самим Провдником :) Закачали файлы на сервер, ничего сложного в это нет, ввели адрес вашего нового сайта (который вы зарегистрировали) и уже ваш сайт в Интернете, УРА! Если вас напугала платность услуг, не расстраивайтесь. Есть и бесплатные службы хостинга, например Narod.Ru, но качество хостинга оставляет желать лучшего. Есть службы хостинга, предоставляющие профессиональное качество и функциональность за очень скромную плату, как например HCenter.info (воспринимайте это как рекламу, потому что мой сайт хостится у них, чем я вполне доволен). Наверняка ваш Интернет-провайдер также предоставляет своим пользователям бесплатный хостинг для небольших проектов, поинтересуйтесь. У всех всё расписано понятнее некуда (конкуренция огромнейшая!), так что пугаться этих процедур не нужно.

Q: Чем наполнить сайт?
A: Это уж вы сами должны у себя спросить ещё на стадии «с чего начать» :) Классический сайт по какой-то определённой теме (например, по операционным системам): главная страница с новостями сайта и приглашением, статьи (или файлы или фотографии или то, что на этом сайте основное: анекдоты, научные статьи, рассказы), о сайте (кто, что и для чего делал), опционально можно добавить гостевую книгу (правда не ждите, что в неё так и посыплются слова благодарности, интернетчики — народ ленивый). Главное — информация, информация и ещё раз информация! Если есть информация, то можно в принципе обойтись и без графики и дизайна. Главное чтобы информация была оригинальной, нужной, а главное — уникальной. Клонов по инету и так хватает (сегодня, например обнаружил свои статьи не нескольких похожих сайтах, и это через три дня после публикации!) Да о чём я говорю, посмотрите на другие сайты. Уверен, среди них вы найдёте пример для подражания.

Q: Как опубликовать сайт в поисковых системах?
A: В любой поисковой системе есть раздел сервисов для веб-мастеров. Найдите ссылку вроде «Добавить сайт» и вперёд! Через некоторое время не забудьте проверить, проиндексирован ли ваш сайт. Можно воспользоваться другими сервисами, каталогами, благо их сотни.

Q: Хочу, чтобы о моём сайте узнали все!
A: См.предыдущий вопрос. Попробуйте связаться с админами сайтов, которые близки к вашему по тематике и обменяться с ними ссылками. Ищите бесплатные каталоги и регистрируйтесь в них. Читайте советы на веб-мастерских сайтах. Можно воспользоваться другими сервисами, каталогами, благо их сотни. Контактируйте, обменивайтесь материалами, размещайте рекламу, идите вперёд!

Q: Мой сайт расширяется, страниц слишком много, обновлять неудобно…
A: Вы по-прежнему добавляете статьи и новости, вручную переделывая 50-200 HTML-страниц и закачивая их на сервер? Вам не надоело? Если надоело, то самое время изучить язык программирования PHP или Perl. Написав несколько небольших программ, вы сможете добавлять новости и статьи одним кликом мыши без перевёрстывания страниц и закачивания их на сервер. Кроме этого вы сможете наконец централизованно управлять оформлением сайта, а не лихорадочно менять логотип и копирайт на 100 страницах :) Поменял что-то в одном месте, а программа-движок, написанная вами, естественным образом применит это изменение ко всему сайту.

Q: Что такое Perl?
A: Perl — это язык программирования, разработанный специально для администрирования в Unix, Linux и подобных ОС. Написанные на это языке программы — скрипты (или сценарии) — отличаются от обычных программ тем, что для них не создаётся исполняемый файл, а текст сценария покомандно выполняется, выводит данные и сразу же завершается. Исходные данные передаются скрипту через командную строку. Всё это очень напоминает работу HTTP-сервера и сценарии Perl стали применять для задач веб-программирования. Например, скрипт вызванный вами, как обычная страница, может вывести данные в виде HTML информацию о товарах, хранящиеся в базе данных, о курсах валют, полученных с сервера банка, новости, и многое другое. Но поскольку специфика Perl ориентирована именно на администрирование операционных систем, он сложен для начинающих и плохо подходит для создания веб-сайтов. Он сложен в отладке на веб-сервере, ошибки в скриптах не то что исправлять, но и находить трудно. Однако, если вы знаете язык C/C++, освоить Perl вам не составит труда.

Q: Что такое PHP?
A: PHP — это скриптовой язык, который создавался специально для ведения Web-разработок и может использоваться непосредственно в HTML-коде. Синтаксис языка берет начало из C, Java и Perl и является легким для изучения. Преимущественным назначением PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, однако, область применения PHP не ограничивается только этим. Если вы уже немного освоили Perl и считаете слишком сложным, попробуйте PHP — он идеально подходит для создания сайтов даже тем, кто почти совсем не знаком с программированием. Кроме того, то, для чего в Perl пришлось бы писать свои функции, PHP предлагает богатейшую библиотеку стандартных функций, особенно для работы со строками, файлами и базами данных (что наиболее часто требуется в веб-дизайне). Вот пример самых часто применяемых стандартных функций PHP: удаление тэгов из текста, преобразование кодировок, мощные функции для поиска и сравнения строк, чтение и вывод файла, отправка электронного письма в одну команду, рисование произвольных изображений и редактирование фотографий «на лету», подключение и удобное извлечение данных из БД. Но главное это то, что в одном файле можно хранить страницу HTML, а в нужных местах вставлять участки кода PHP, что не позволяет Perl.

Q: Что лучше — Perl или PHP?
A: Perl будет лучше до тех пор, пока не попробуете PHP :) Однозначно, PHP лучше подходит для задач веб- программирования. На PHP вы быстрее напишете качественный сайт, чем будете разбираться со спецификой Unix и ручным декодированием данных. Perl-интерпретатор создаёт большую нагрузку на сервер в момент запуска (это не относится к серверам, где есть mod_perl, встроенный в сервер). Perl-скрипты труднее отлаживать на сервере, они не выводят ошибок напрямую, а генерируют «ошибку 500″. Приходится просматривать огромные логи в поисках именно этой ошибки. PHP всегда в случае ошибки выводит подробнейшую информацию прямо в окно браузера. Предлагаю выдержку из документации на PHP:

The biggest advantage of PHP over Perl is that PHP was designed for scripting for the web where Perl was designed to do a lot more and can because of this get very complicated. The flexibility / complexity of Perl makes it easier to write code that another author / coder has a hard time reading. PHP has a less confusing and stricter format without losing flexibility. PHP is easier to integrate into existing HTML than Perl. PHP has pretty much all the ‘good’ functionality of Perl: constructs, syntax and so on, without making it as complicated as Perl can be. Perl is a very tried and true language, it’s been around since the late eighties, but PHP is maturing very quickly.

Q: Пожалуй, пора приступать к изучению PHP. C чего начать?
A: Начать следует с загрузки последней версии дистрибутива PHP с сайта http://php.net/для вашей ОС. Загрузив zip-архив, распакуйте его в директориюc:\php. Оттуда же обязательно стоит скачать CHM-файл с подробной документацией по каждой функции на русском языке. Там есть много примеров, по которым быстро учишься. За день реально написать простую страничку, а то и небольшой сайт.

Q: У меня PHP не запускается! Какой-то чёрный экран…
A:Смешной вопрос :) Многие сразу же пытаются запуститьphp.exeв надежде, что вот они прям щас наберут прогу и запустят её, но почему-то выскакивает какое-то чёрное окно и на этом знакомство с PHP, как ни печально, заканчивается. Как все привыкли к Windows-окнам! PHP — это вам не Блокнот или Turbo Pascal, а интерпретатор с интерфейсом командной строки. Научитесь наконец различать две простые вещи — интегрированная среда разработки и компилятор (интерпретатор). Напишите простую программу<? echo «Hello, World!»; ?>, сохраните её в файл test.php. Теперь откройте командную строку (cmd) и введите «c:\php\php.exe test.php» (не забыв указать нужные пути). На экране будет выведено заветное «Hello, World!». Посмотрите документацию. Усложните программу так, чтобы она вместо надписи выводила полноценную HTML-страницу. И помните, таким способом писались самые лучшие программы 20 лет назад.

Q: Пытаюсь запустить скрипт в браузере, но там показывается только код. Почему?
A:Браузер показывает только то, что он сам получает. Если он получает текстовый файл, он и показывает текстовый файл. Если он получает HTML-файл, он показывает веб-страницу. Скрипт на PHP должен выводить данные в виде HTML-страницы. Однако, этот скрипт должен быть ещё и выполнен интерпретатором PHP, чтобы эти данные могли быть сгенерированы и выведены. Для того чтобы запускать PHP-скрипты в браузере, нужно будет установить на ваш компьютер программу-сервер (см. выше). Тогда, запросив в браузереhttp://localhost/test.phpмы сможем увидеть результаты работы нашего скрипта. О серверах и их настройке для работы с PHP читайте ниже.

Q: С помощью каких программ можно удобно редактировать и тестировать PHP-скрипты?
A: Одна из лучших программ на мой взгляд PHP Expert Editor. Она позволяет редактировать несколько файлов одновременно, работает напрямую с FTP-серверами, имеет библиотеки ключевых слов и функции для HTML, CSS, JavaScript, PHP (практически отпадает необходимость пользования дополнительной литературой и программами), интегрируется с CHM-справкой по PHP (наводим текстовый курсор на функцию и по Ctrl+F1 получаем справку по этой функции), имеет панель инструментов для быстрой вставки тэгов HTML (как в «Ворде», отпадает необходимость редактировать файл в HTML-редакторе). Одно из важнейших достоинств этой программы — он имеет в своём составе мини-HTTP-сервер. Он запускается автоматически при нажатии F9, выполняет ваш скрипт и показывает сгенерированную страницу во встроенном браузере. Так что на первых порах можно обойтись вовсе без HTTP-сервера. Да что говорить, удобная программа и всё тут! А главное — бесплатная для пользователей из России. Есть поддержка русского языка, для этого скачайте файл русификации. Регистрация бесплатна. Подробно — здесь http://www.phpexperteditor.com/.

Q: Что лучше — JavaScript или PHP? Как их совместить?
A: Совершенно глупый вопрос. Это принципиально разные технологии. Тем, кто так спрашивает кажется что JavaScript и PHP выполняют сходные функции, но это не совсем так. Дело в том, что код JavaScript, событийный язык, его код интерпретируется непосредственно после загрузки в браузере пользователя. Этот язык ориентирован на управление поведением браузера. Кроме того, JavaScript может взаимедействовать с пользователем через браузер и другие элементы интерфейса. PHP является серверным скриптовым языком и выполняется на сервере целиком и только один раз до того, как результат будет отправлен пользователю. Вы должны понять, что скрипт, отработав на сервере один раз от начала до конца, сразу же отправляет данные и немедленно закрывается. JavaScript чаще всего работает в интерактивном режиме, мы можем сколько угодно кликать на кнопки (вызывать событие) и скрипт каждый раз будет выполнять задуманное действие (функцию), чего не делает PHP. Однако совместить JavaScript и PHP всё же можно, генерируя JavaScript код с помощью операторв PHP также, как вы генерируете HTML… Выбросьте этот дурацкий вопрос из головы!!! А лучше прочитайте пример из документации, будет понятнее (если конечно с инглишем в ладу :) .

Q: How can I pass a variable from Javascript to PHP?
A: Since Javascript is (usually) a client-side technology, and PHP is (usually) a server-side technology, and since HTTP is a «stateless» protocol, the two languages cannot directly share variables.
It is, however, possible to pass variables between the two. One way of accomplishing this is to generate Javascript code with PHP, and have the browser refresh itself, passing specific variables back to the PHP script. The example below shows precisely how to do this — it allows PHP code to capture screen height and width, something that is normally only possible on the client side.

<?php
if (isset($_GET['width']) AND isset($_GET['height'])) {
// output the geometry variables
echo "Screen width is: ". $_GET['width'] ."<br />\n";
echo
"Screen height is: ". $_GET['height'] ."<br />\n";
} else {
// pass the geometry variables
// (preserve the original query string
//   -- post variables will need to handled differently)

echo "<script language='javascript'>\n";
echo
"  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
. "&width=\" + screen.width + \"&height=\" + screen.height;\n";
echo
"</script>\n";
exit();
}
?>

Q: Что такое MySQL?
A: MySQL — один из лучших SQL-серверов баз данных типа «клиент-сервер». Завоевал огромную популярность благодаря тому, что является бесплатным, легко устанавливается и настраивается, использует самые передовые технологии и алгоритмы управления данными, существует для любых платформ, постоянно развивается и совершенствуется, имеет дружественный к программистам интерфейс… В общем, связка PHP-MySQL стала поистине массовой. А благодаря PHP, где поддержка этой базы данных встроена в стандартную поставку, эта СУБД стала доступна не только профессионалам, но и многим начинающим пользователям. Если раньше вы хранили ваши данные в файлах, то переход на MySQL избавит вас от головных болей при написании процедур извлечения, сортировки, изменения записей. Эти задачи будут выполняться при помощи нескольких простых и понятных команд SQL. Один мой знакомый на предложение попробовать MySQL сказал: «Он сложный и непонятный». Так вот, это неправда. Сначала скачивается свежий дистрибутив здесь (рекомендуется 4 версия, как наиболее распространённая), нужные «довески» вроде драйвера ODBC (пригодится при интеграции ваших приложений и Windows с MySQL). Устанавливается MySQL очень просто, как и любая другая программа, конфигурируется в два клика. Из раздела документации можно скачать огромнейшее подробнейшее руководство на чистом русском языке с примерами и учебником SQL.Документация MySQL находится по адресу http://dev.mysql.com/doc/. В общем, начните, а там увидите.

Q: Как работать с базами данных MySQL на PHP?
A: Для удобной работы с MySQL существует целая библиотека функций. Описывать их все нет смысла. Процесс получения данных можно разделить на следующие части. Соединение с сервером MySQL, выборка БД, посылка запроса, циклическое чтение строк результата и их вывод в нужном формате, освобождение памяти от данных результата, закрытие соединения. Очень хорошо это видно в примере. Скрипт подключается к базе, выбирает данные из таблицы и выводит их на экран.

<?php
/* Соединяемся, выбираем базу данных */
$link = mysql_connect("mysql_host", "mysql_user", "mysql_password")
or die(
"Could not connect : " . mysql_error());
print
"Connected successfully";
mysql_select_db("my_database") or die("Could not select database");

/* Выполняем SQL-запрос */
$query = "SELECT * FROM my_table";
$result = mysql_query($query) or die("Query failed : " . mysql_error());

/* Выводим результаты в html */
print "<table>\n";
while (
$line = mysql_fetch_array($result, MYSQL_ASSOC)) {
print
"\t<tr>\n";
foreach (
$line as $col_value) {
print
"\t\t<td>$col_value</td>\n";
}
print
"\t</tr>\n";
}
print
"</table>\n";

/* Освобождаем память от результата */
mysql_free_result($result);

/* Закрываем соединение */
mysql_close($link);
?>

Q: Как работать с формами?
A: К примеру, вот простой скрипт сложения двух чисел. Состоит из двух частей: HTML-форма и код вывода суммы. Числа из полей ввода A и B передаются в этот же скрипт методом POST в виде переменных $a и $b, и если они были переданы, то есть не пустые, то под формой выводится результат.

<form name="sum" action="" method="post">
Введите A <input name="a" type="text" value="">
Введите B <input name="b" type="text" value="">
<input type="submit" value="Сложить">
</form>

<?php
if ($a&&$b) echo "Результат ".($a+$b);
?>

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

Q: Как сделать движок для сайта?
A:Когда я понял, что одному из моих сайтов нужен движок, я сделал его за один вечер. Движки бывают разные, но общая идея такова: вы создаёте один главный скрипт index.php (назовём его ядром), который содержит типовой шаблон страницы, один файл с библиотекой нужных вам функции (например, подключение к базе, выборка данных), и много-много файлов модулей, которые будут вызываться из ядра. Например, модуль новостей будет вызываться по запросуindex.php?mod=news. Ядро загрузит модуль news.php (он содержит только логику извлечения новостей из базы), выведет шапку страницы, блок новостей, сгенерированнный news.php, а затем низ страницы. Вместо модулей можно применять статические HTML-блоки. Главное, что даёт такая система — единый шаблон, все нужные операции и переменные описаны в одном месте — ядре, а другие подключаются по мере необходимости из внешней библиотеки. Вот пример простейшего шаблонного движка. top.php и bottom.php — соответственно верх и низ страницы. Можно их конечно сразу тут же в виде HTML выводить, это кому как нравится. Вызываем модуль, как говорилось выше, index.php?mod=имя_модуля. Если параметр mod не указан, по умолчанию загрузится модуль с именем index.php (там будет содержимое вашей главной страницы). В серединке выводится результат выполнения вашего модуля mods/$mod.php. Этакий бутерброд :) Сам модуль может содержать всё что угодно. Написав ядро, сосредоточтесь именно на них. Каждый из них будет представлять собственный раздел сайта, новую страницу. Сложные движки позволяют не только показывать информацию, но и добавлять и изменять содержимое сайта с помощью БД MySQL (те же новости или гостевая книга). Создавая новые модули, вы сможете наращивать возможности вашего сайта, не затрагивая уже работающих частей. По такой схеме делаются сотни сайтов и в этом нет ничего сверхъестественного. Как-нибудь я соберусь с мыслями и напишу статью по созданию собственного движка.

<?php

// если аргумент пуст или не существует файл, выводим index
if ((!$mod)||(!file_exists("mods/$mod.php"))||(!ctype_alpha($mod)))
  $mod="index";

// выводим шаблончик и результат
include("include/top.php");
include(
"mods/$mod.php");
include(
"include/bottom.php");

?>

Q: Как сделать (установить) форум и что для этого нужно?
A: В сети существует огромное количество форумов: с БД или без, платные и бесплатные, простые и навороченные. Почти все современные форумы используют СУБД MySQL. Поэтому, прежде чем скачать и установить форум, узнайте, поддерживается ли MySQL у вас на сервере. Если нет, тогда придётся поискать готовые решения на основе файлов. Большой сборник форумов на PHP есть на phpclub.ru. Если вы не нашли ничего подходящего для ваших нужд, придётся вам писать свой форум или попросить друга. Готовые форумы можно автоматически установить из панели управления CPanel, если она есть на вашем хостинге (скорее всего, хостинг у вас платный).

Автор: Алексей Курепин (fox++)

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты