Продолжаем обучение вёрстке и дизайну. Сегодня, как я и писал ранее, мы рассмотрим книгу видео уроков по html, css и прочим сопутствующим технологиям. Итак, приступим.

Книга Евгения Попова "Все Технические Моменты Онлайн Бизнеса в Видеоформате"

Если вы пройдёте по вышеобозначенному линку, то получите довольно обширное описание курса с отзывами и всяческой статистикой. Однако я решил описать данный курс по-своему. Тут не будет материалов из курса (авторские права всё таки), а будет только перечень основных знаний, которые вы сможете почерпнуть из курса. Также будет высказано моё личное мнение относительно "полезности" того или иного курса.

Весь видео курс состоит из семнадцати отдельных курсов. Далее они перечислены.

1. Создание сайта
2. Курс по HTML
3. Курс по CSS
4. Macromedia DreamWeaver
5. Adobe Photoshop
6. Установка сервера
7. Электронные книги
8. Camtasia Studio
9. Flash Collection
10. Mind Manager
11. Установка форумов
12. Установка CMS
13. ShagIt
14. Navigation Collection
15. Graphic Collection
16. Всплывающие окна
17. Бонусный курс

Как всякий нормальный пользователь, я залез сразу в первый урок первого раздела. Послушал вступление и понял, что перед изучением первого курса нужно пройти практически все остальные курсы по обучению, так как курс Создание сайта основывается на знаниях, которые можно получить в остальных уроках.

Итак. Для начала нужно пройти Курс по HTML. Давайте сразу договоримся, в списке уроков я не буду указывать первый урок, который всегда называется Вступление и большой смысловой нагрузки не несёт. Автор обычно знакомит читателя слушателя с определённой технологией и указывает на её преимущества и возможности. В конце пункта указаны изученные в уроке тэги. Также в уроках изучаются и свойства тэгов.

1. Основы и каркас страницы. – Тут даётся понятие тэгов и их атрибутов, а также описана структура страницы и мета тэги. Тэги: html, head, title, body, meta (кодировка, keywords, description).
2. Работа с текстом. – Разбивка на абзацы, выравнивание, выделение заголовков. Тэги: p, h1.
3. Создание списков. – Виды списков и их атрибуты. Тэги: ul, ol, li.
4. Форматирование текста. – Шрифт, размер и цвет текста. Выделение текста жирным и курсивом. Тэги: font, strong, em.
5. Дальнейшее форматирование текста и вставка изображений. – Здесь рассматривается логическое выделение и вставка картинок. Также рассмотрена вставка линий. Тэги: div, img, hr.
6. Работа с гиперссылками. – Рассмотрена работа со ссылками. Конструкция ссылки, виды ссылок. Работа с якорями (линк для перехода внутри страницы). Теги: a.
7. Таблицы. – Работа с таблицами: создание, объединение ячеек и столбцов. Тэги: table, tr, td.
8. Фреймы. – Работа с фреймами. Тэги: frameset, frame, noframes.
9. Внешние объекты и JavaScript в html странице. – Вставка внешних объектов и javascript в html код. Вынос скриптов в отдельный файл.
10. Работа с формами. – Понятие форм. В данном уроке рассмотрено составление формы на примере формы отправки заказа на e-mail. Автор уделил особое внимание данному вопросу, поэтому элементы форм рассмотрены до мельчайших подробностей. Также вместе с автором читателю предстоит написать скрипт на php для отправки e-mail с помощью формы. Тэги: form.
11. Анализ сайта. – Данный урок полностью посвящён умению прочитать html код уже существующей страницы. Для примера использована главная страница сайта rupay.com. На данный момент сайта по этому адресу вы не увидите, поэтому просто смотрим ролик и внимаем.

В качестве вывода: данный курс будет очень полезен человеку, не знакомому с языком гипертекстовой разметки. Информация изложена максимально доступно и наглядно. В качестве бонуса могу добавить небольшой справочник тэгов HTML от Вадима Ласто. Упор при создании этого справочника/учебника делался на краткость и компактность. И хотя в нём рассматривается уже устаревшая 3.2 спецификация HTML, думаю, он будет вам полезен. А также выкладываю небольшой самоучитель по HTML от Влада Мержевича. Кроме уроков там есть вопросы и задания, которые нужно пройти для закрепления знаний.

Далее нам предстоит пройти вместе с автором Курс по CSS. Это очень интересная для меня технология, поэтому я лично довольно много внимания уделил именно ей. Изученные свойства здесь я решил не указывать.

1. Знакомство с CSS. – Здесь вы научимся создавать таблицы и присоединять их к html файлам. Также дано понятие классов и основы применения стилей.
2. Усложняем конструкции CSS. – Применение стилей сразу к нескольким тегам, применение стилей к вложенным тегам, понятие псевдоклассов.
3. Оформление текста. – Учимся изменять параметры, влияющие на отображение текста. Шрифт, выделение, жирность и прочее.
4. Работа с фоном. – Свойства фона: повторение, позиционирование в любой точке экрана, фон с помощью цвета, фон с помощью изображения.
5. Работа с текстом. – Выравнивание, выделение, украшение и трансформация текста.
6. Работа с рамками. – Виды и свойства рамок.
7. Отступы, поля, обтекание элементов. – Свойства отступов, полей, обтекание элементов.
8. Списки с помощью CSS. – Свойства списков. Изменение отображения.
9. Позиционирование. – Учимся размещать объекты в любом месте экрана с помощью CSS.
10. Альтернатива и автоматизация. – Альтернативные методы вставки стилей в html код. Автоматизация CSS с помощью программ.

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

На сегодня пожалуй хватит. На днях читайте о продолжении обучения. Будет рассмотрен курс о программе Macromedia Dreamweaver. А также будет представлен мой первый экзамен. Имеется в виду, применение на практике навыков, полученных в первых трёх курсах. Кстати этот пост тоже написан в Macromedia Dreamweaver ;) До новых встреч!

--------------------

Хочу обратить внимание на блог Alternative Internet Project. Там можно найти статьи на темы: PHP-скрипты, софт, программы, SEO.

Павел, автор блога "Продвинем вместе свои сайты" объявил Мини-Конкурс: Баннер-креатив.

Также хочу сообщить, что СЕОшник раздаёт постовые.

И напоследок, хотелось бы представить вам Блог о верстке, творчестве и фрилансе Ильи Житенёва.

Хотите обменяться постовыми? Пишите в мыло или аську.

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

Книга 2: Курс веб-дизайнера и более глубокое освоение HTML

Книга рассказывает о веб-дизайне от составления макета в Adobe Photoshop, нарезки заготовки в Adobe ImageReady до вёрстки html в Adobe DreamWeaver. Также в качестве дополнения рассматриваются вопросы создания анимированных баннеров, работы с FTP и др. Что порадовало, так это то, что книге рассмотрена как табличная, так и блочная вёрстка.

Итак, приступим к изучению данного мануала. Я хотел опубликовать подробные примеры созданных по мотивам уроков картинок и страниц, однако автор запрещает даже частичную публикацию своей книги, поэтому за примерами можно стукнуть в ICQ 380540двести. В тексте я буду указывать, где должны быть примеры, однако доступ к ним получат не все.

Разновидности сайтов.

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

Основы дизайна.

Далее автор знакомит читателя с основами дизайна. Рассказывает о тёплых и холодных цетах, триколорах и наиболее подходящих цветовых схемах, контрасте...

Adobe Photoshop в примерах.

Вначале автор знакомит читателя с программой и её особенностями.

Далее шаг за шагом читатель вместе с автором создаёт свой дизайн. Каждое действие, каждая мелочь описана на пальцах. Автор знакомит читателя с программой Photoshop на практике. Показывает сначала инструмент или функцию, действие, а потом результат, попутно объясняя смысл происходящего. Так постепенно создавая дизайн своего сайта вы будете знакомиться с Фильтрами, Основными инструментами, Слоями.

Чему конкретно вы можете научиться? Иметь понятие, что такое Photoshop, как с ним работать, знать основные (точнее, нужные) функции, а также сможете создавать довольно неплохие дизайны сами. Автор публикует более менее универсальный алгоритм создания дизайна.

Я также нарисовал заготовок за время изучения урока по программе Photoshop (пример 3). И заверю вас, это вовсе не трудно, зная примерную последовательность действий.

Чему мы научимся (в общих чертах):

• работе со слоями (создание, комбинирование, редактирование)
• работе с форматированием (порезка, выделение, рисование)
• работе с текстом (форматирование)
• работе с цветом (форматирование контраста, цвета, заливка, градиент)
• работе с объектами (трансформирование, изменение свойств)

Последовательность создания заготовка я также не могу открыть. Для этого нужно ознакомиться с книжкой.

Порезка шаблона.

Далее вам предстоит научиться выполнять порезку макета на куски с помощью программы Adobe ImageReady. Кстати, программа выдаёт после порезки готовую html страницу, состоящую из кусков картинок.

Правка HTML.

После порезки можно приступить к правке html-кода страницы. Для этого в уроке используется программа DreamWeaver. Однако можно воспользоваться и обычным блокнотом.

На выходе из ImageReady и правки пары тэгов наш пример выглядит так, как html страница, состоящая и определённого количества картинок, оптимизированных для размещения в Internet (пример 4). Картинки лежат в отдельной папке images.

Далее оттачиваем html код. Режем верхнее меню и футер, добавляем текст, добавляем боковое меню и оснащаем наше творение цветами, бэкграундом и всяческой красотой (пример 5).

Однако наш сайт свёрстан одной таблицей, что грозит всяческими осложнениями в дальнейшей жизни. При не очень умелом подходе картинки будут разъезжаться, таблицы ломаться, а также при изменении одной части нашего сайта придётся обязательно редактировать и остальные. К примеру, изменив ширину бокового меню, получим вот такую некрасивость, как съехавшую влево шапку сайта (пример 6). Поэтому далее мы учимся делать сайт состоящий из нескольких таблиц, чтобы избежать подобных казусов (пример 7).

Конечно, мы получаем ещё не полноценный сайт, однако это уже готовый шаблон для добавления контента, ссылок в меню и прочего. Ну и конечно следовало бы немного приукрасить наше творение (добавить отступы и т.д.). Однако основное сделано.

CSS и блочная вёрстка.

Далее нам предстоит узнать, что такое CSS и с чем его едят, а также немного о блочной вёрстке. Это была наиболее интересная для меня часть, ведь я хочу постигнуть именно блочную вёрстку.

После первого же урока можно приукрасить свою страничку (пример 8). Мы всего лишь добавили таблицу стилей CSS, а также некоторые теги (заголовки, ссылки и параграф).

Далее идёт более подробное описание, как вставить таблицу CSS в html страницу, и какие операторы можно использовать. Ничего секретного. Тоже можно прочитать на любом сайте, посвящённом каскадных таблиц в разделе "Основы". Однако этот курс ориентирован на новичков, поэтому всё уместно.

После более детального изучения CSS, можно получить понятие, и сразу же попрактиковаться в создании своего первого блочного дизайна (Пример 9).

Вот собственно и всё. Далее идут бонусные статьи о создании анимированных баннеров, использовании FTP, наиболее частых ошибках в дизайне, дополнения у разделу о Photoshop, а также программы, бонусы, шрифты, фильтры, шаблоны. В общем целая куча всего.

Подводим итоги: Что можно сказать о данном ебуке. Для начинающего она очень даже будет интересна. Глубоких знаний знаний вы не постигнете, однако пинок под зад получите. И если вам действительно интересно изучение веб-дизайна и создание веб ресурсов, то курс не пройдёт для вас зря. Вы получите основы и стремление постигать и совершенствоваться. Напоминаю: данный курс стоит 24.95 $. Стоит ли он своих денег? Решать не мне. Каждому он будет полезен по разному. Если у вас уже есть понятие о тех вещах, которые там изложены, пожалуй не стоит покупать. Если же вам лениво искать информацию самому, то курс поможет вам понять основы. Но учиться дальше предстоит вам самим.

Далее мы будем рассматривать курс видео уроков от Евгения Попова. Это будет более серьёзный опус и потребует на обучение не один день. Также я постараюсь выкладывать статьи по SEO и манимейкерской тематике.

--------------------

Хочу обратить внимание на дайджест полезняшек от Virtual Lab.

А также напоминаю, что Vitashok предлагает сносить нафиг блогролл.

Также хочу упомянуть сервис, который предлагает SEO продвижение статьями. Сервис предоставляет услуги по написанию, размножению и размещению статей в сетках.

Решил написать конспект по внутренней оптимизации кода и текста сайта. SEO-гуру нового ничего скорее всего не узнают из этой статьи, всем же остальным наверняка будет интересно. Также этот пост буду использовать как памятку. Пост написан довольно сухим языком. Языком, которым обычно пишут настоящий конспект, однако иногда будут появляться краткие пояснения. Пост можно использовать как памятку, потому как основные факторы выделены жирным. То есть, если вы уже читали ранее данный текст, обязательно сможете быстро вспомнить основные фразы. Каждый фактор конечно же заслуживает отдельной статьи, однако здесь собраны основные советы по оптимизации, а не азбука html.

Как уже писал ранее, занялся поиском информации по данному вопросу после посещения онлайн-семинара. И сразу же после семинара начал кое-что переделывать на своих сайтах.

Основополагающие факторы, влияющие на респект искалки и частоту индексирования:

• плотность ключевых слов на странице – точной цифры нет, но наиболее частое мнение, что оптимальная плотность равняется 4-6 %
• уникальность и валидность текста – всем известно, что поисковики любят уникальный текст, однако следует также следить и за валидностью контента. Имеется в виду согласование падежей, правильность построения предложений и т.д. Во-первых, это облегчит пользователю ознакомление с материалом. Во-вторых, поисковики научились отличать правильные слова, словосочетания и предложения от генерированного контента.
• обновляемость контента – чем чаще обновляется сайт, тем чаще приходит поисковый бот

Важные факторы для оптимизации:

• title – определяет наименование заголовка страницы в браузере, а также заголовок страницы при выдаче в поисковике.
  Обязательно релевантное значение title с использованием ключевых слов. Желательно до 80 символов. Желательно не использовать знаков препинания (к примеру ".", ",", ":"). Должны присутствовать ключевые слова. Значение должно быть уникальным для каждой страницы.
• keywords – определяет ключевые слова страницы.
  Желательно 2-3 словосочетания через запятую либо 3-4 слова без запятых. Должны присутствовать ключевые слова. Значение должно быть уникальным для каждой страницы.
• description – определяет значение для сниппета (короткого описания страницы при выдаче в поисковике).
  Обязательно читабельное описание. Желательно до 250 символов. Должны присутствовать ключевые слова. Значение должно быть уникальным для каждой страницы.
• H1–H6 – определяет заголовки и подзаголовки (структурные теги).
  Желательно использовать не более 1 раза. Желательно использовать чистый H1 тег без стилей. Желательно, чтобы H1 и title были одинаковы либо очень похожи. Значение должно быть уникальным для каждой страницы. Желательно использовать также вспомогательные теги структурной разметки: H2–H6. Должны присутствовать ключевые слова.
• strong, b, em, i – логическое выделение текста.
  Желательно использовать strong и em. Должны присутствовать ключевые слова. Нельзя перенасыщать текст логическим ударением.
• title и alt в теге img – наименование и альтернативное значение.
  Для изображений используем теги alt и title. Должны присутствовать ключевые слова.
• внутренняя перелинковка – ссылки внутри сайта
  Все страницы должны ссылаться на главную (индексную). Должны присутствовать ключевые слова в анкорах. Не забываем про правило 3 кликов – сёрфер должен иметь возможность попасть с главной на любую страницу не более чем за 3 клика. Максимальное количество внутренних ссылок на странице (позволит уменьшить утечку PR). Дополнительная перелинковка в футере, в теле и в конце статьи. Ссылки в основной своей массе должны быть текстовые (влияет на ссылочное ранжирование).
• чистка кода
  Java-script и стили css должны быть вынесены в отдельные файлы. Код должен быть максимально облегчён. Лишние теги должны быть удалены из кода.
• скрытие "лишних" внешних ссылок для индексации
  Скрывать следует неважные для поисковика ссылки: ссылки на баннерные сети, счётчики и прочий скам. Для Яндекса – тег noindex. Для Гугла атрибут ссылки rel=nofollow. Или файлом robots.txt.

--------------------

Открыл небольшой сервайс по продаже качественных ссылок Купи Линк. Площадок пока мало, но всё ведь впереди:) Все ссылки проставляются вручную.