«Что такое интернет». Видео-курс

October 22nd, 2015 No Comments »

Если вы хотите обучиться на программиста, тестировщика или SEO-оптимизатора (это который делает search engine optimisation, то есть чтобы ваш сайт показывался на первых позициях в Google и Яндекс), то вам обязательно нужно понимать, как устроен интернет.

Например, как зарегистрировать своё доменное имя — а домены бывают бесплатные, платные и такие, которые вообще нельзя зарегистрировать простому смертному (например, whitehouse.gov). И желательно, чтобы имя домена было коротким:

Как выбрать имя для домена

Важно понимать, что интернет — это не только ценный мех веб-странички и сайты. Интернет — это ещё и электронная почта (email), и IP-телефония (тот же Skype), и торренты, и “Интернет вещей”, и т.д.

Сам интернет как объединение мировых сетей был придуман американскими военными как метод связи на случай Третьей Мировой войны — сразу после запуска первого спутника и первого человека Юрия Гагарина в космос во времена Холодной войны.

Холодная война

Вы даже сможете легко и просто понять такие сложные вещи, как протокол TCP\IP и зачем нужны IP-адреса.

Ну и на сладкое — сможете подурачить коллег и родителей, запретив им доступ к любимым вебсайтам.

Всё это — в бесплатном видео-курсе «Как устроен интернет». Записывайтесь!

От задумки до готового сайта: 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>

Как устроена веб-страница

February 2nd, 2009 1 Comment »

Веб-страница устроена просто.

Она состоит из двух частей: заголовка (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('Вот и молодец!')" /> = 

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

Что почитать

May 24th, 2007 No Comments »
  • 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 ещё не придумали. Автор явно человек с головой. Рекомендую наблы.

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

Пример веб-приложения

May 22nd, 2007 5 Comments »

Итак, рассмотрим пример веб-приложения со следующей функциональностью:

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

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

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

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

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

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

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

< ?
new dBug( $var );
?>