Урок 2. Блочная верстка сайта

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

Ну-с, не будем тянуть резину. Начнем, не забудьте взять чашку кофе и печенек ;-)

Советы по написанию Html кода

Приветствую тебя пользователь! Сегодня я даю советы по html. Для того чтобы красиво верстать необходимо придерживаться определенных правил. Надеюсь мои советы Вам пригодятся. Некоторые из опыта личного, другие были высказаны такими пользователями как и Вы.

Пост будет в виде презентации, в которой я выделил основные моменты. Так что преступаем!

Смотреть презентацию лучше на весь экран

А вот Вам и текстовый вариант, кому лень смотреть ;-)

1. DOCTYPE

Не забывайте прописывать DOCTYPE! Выглядит он так:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>

порой встречаются такие элементы2. Html без css

Выносите css в отдельный файл!
Не пишите так:

<p style= ”margin-top:5px” >Текст</p>

Установлено, что css код утяжеляет вес страниц, поэтому рекомендуется выносить его в css файл.

3. Javascript/скрипты

Все что можно сделать без Javascript, делайте без него!

Используйте сторонние скрипты только при необходимости!

Железное правило. Хотите выпадающее меню? И нам придется использовать javascript? Как бы не так! В интернете множество изящных и простых решений. Особенно, большой функциональностью обладают html 5 и css 3

4. Регистр

Хоть и регист не влияет на html, но не стоит писать так:

<DIV CLASS=”NEWS”>текст</DIV>

или

<DIV class=”NEWS”>текст</div> 

Привыкайте к красоте кода:

<div class=”class”> текст </div>

5. Назначение тегов

Прежде чем написать, подумайте. Возможно есть теги, которые решают Вашу задачу намного проще. Например,

<p style=”font-size:1.2em”> <strong> Заголовок</strong></p>

и

<h2> Заголовок </h2>

Дают один результат.

6. Используйте возможности html тегов

Помните в Html 4 имеет 91 элемент. Проверьте сколько элементов Вы вспомните за 5 минут – пройдите тест

7. Следите за валидностью

Не пишите невалидный код, потому что Вы так хотите. Ориентируйтесь на стандарты.

Проверка html на валидность:

Проверка css на валидность:

8.Формируйте код

Отделяйте код друг от друга. Не лепите все в одну строку.Вы возможно потом сами не сможете разобраться в своей писанине.

В каком коде будет проще работать?

<div id=”sidebar”>
<h3>Новость</h3>
<p>Сама новость...</p>
</div>

или

<div id=”sidebar”> <h3>Новость</h3> <p>Сама новость...</p> </div>

9. Комментирование

Подумайте о тех, кто будет разбираться в Вашем коде! Используйте комментарии:

<!-- начало сайдбара -->
<div id=”sidebar”>
<h3>Новость</h3>
<p>Сама новость...</p>
</div> <!-- конец сайдбара -->

Очень важный пункт. Только не переусердствуйте, не надо писать после каждого дива.

10. Картинки

  • Не грузите большие картинки.
  • Используйте цвета вместо картинок.
  • Прописывайте атрибут alt
  • Указывайте ширину и высоту
  • Подгружайте картинки через css (например,css sprites)

11.Ненужные файлы

  • Не оставляйте в коде лишнее.
  • Удаляйте закомментированные строки, если Вы хотите когда -то их использовать, то сохраните у себя на компьютере.
  • Удаляйте код, если его не используете!
  • Удаляйте картинки, которые не используете! Зачем Вам лишние запросы?!

13. Смысловая нагрузка

Названия классов и id необходимо давать по смыслу например, header, menu, footer, news

Чтобы понять где и что. В больших кодах это очень удобно. Представьте, что все классы и id названы по типу ghhh, privet, lol, pop, tutu и т.  д. Через месяц Вы забудите, что есть что.

14. Берегите глаза

Думайте о пользователях. Не используйте слишком яркие цвета. Хотя об этом в первую очередь должен думать веб-дизайнер))

с/у УтБ

На десерт сегодня очень интересная картинка, которую я встретил на пикабу и не смог не поделиться с Вами ;-)

что не является браузером

Loginza – социальное комментирование

Буквально недавно я обновил дизайн своего блога, поэтому некоторые вещи пришлось менять. Например, комментирование на блоге теперь осуществляется с помощью плагина loginza. Самые внимательные возможно помнят, что ранее на блоге была система из 3-х комментариев — вконтакте, фейсбука и стандартные комментарии вордпресса.

29 самых интересных фактов о бабочках

Бабочки, что это за красивые создания! Ну, наверное, за исключением капустницы. Как сейчас помню, как я их не любил у себя в огороде :-) Думаю каждый знает как выглядит бабочка, либо когда-нибудь встречался с этим ужасным зверем ;) У многих при упоминании бабочек, вспоминается фильм “Эффект бабочки”, но сегодя о фильмах говорить не будем :-) Хотя бабочки и в кино успели наследить.

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

Верстка сайта. Урок 1

Вот я снова с Вами. Немного затянул с последними выходами статей. Ну, да ладно, хватит отступлений, давайте ближе к теме.

По текущей работе мне приходится сталкиваться с версткой сайтов, в принципе сейчас я этим и занимаюсь. Поэтому Вас ожидает небольшая «Санта-Барбара» :) на тему верстка сайта, CSS и html, кроссбраузерности и многое другое не менее интересное.

Если Вас заинтересовали эти слова, милости просим. Данная статья первая из серии, поэтому начнем с общего. Все это время мы с Вами будем начинающими верстальщиками ;)

При создании сайтов в идеале участвуют 3 человека. Веб-дизайнер — рисует сайт, человек с фантазией и со знанием фотошопа и т. д. Мне не дано стать дизайнером это точно.

Верстальщик следующий человек с меньшим багажом знаний фотошопа и фантазии. Отлично знает html, css, javascript и т. д.

Веб-разработчик/Веб-программист — человек с отсутствием фантазии и фотошопа))

Вот моя таблица — участника создания полноценного сайта

Веб-дизайнер

Верстальщик

Веб-программист

Знает фотошоп

+

+

-

Есть фантазия

+

±

-

Знает языки разметки

-

+

+

Знает языки программирования

-

±

+

Как мы видим из моей придуманной таблицы верстальщик универсальный человек.

Теперь давайте о необходимых знаниях, софте и т. д.

Минимум знаний для начинающего верстальщика:

  • основы html и css – так как мы только начинаем, то базового уровня должно Вам хватить. (Мы будем рассматривать язык разметки HTML!)

  • Базовое знакомство с фотошопом/photoshop’oм — так как придется смотреть на задумки веб-дизайнера и воплощать в коде.

  • Желание и упорство — главное все делать с душой. Под плеткой никто не чему не научится.

Мой софт верстальщика

Еще один важный момент верстальщика — его софт/программы.

  • Фотошоп/photoshop — отличный графический редактор, используемый веб-дизайнером, поэтому и верстальщик должен иметь данную программу для просмотра и использования частей сайта. Программа платная.

    Для отличного процесса формирования веб-страниц нам необходим редактор, где мы будем писать разметку и css файлы. Здесь выбор велик, и обычно каждый выбирает, то что ему по душе, подойдет и самый простой Блокнот (но не вздумайте его использовать!)

  • Notepad++  по-моему лучшая альтернатива Notepad – Блокноту. Для начинающих особо рекомендую: помогает набить руки для набора и для быстрого набора. Программа бесплатна. Я проводил сравнения Notepad и  Sublime text, сейчас пользуюсь последним.

    Notepad++

  • phpDesigner (любая другая IDE, например, webStorm) – платная программа для программирования, отлично подойдет для верстки сайтов. Основные плюсы- это удобность использования, много настроек и функций, а также подсветка кода: ошибок, выделение текущего фрагмента и т. д. Программа платная.phpdesigner программа верстки сайта

  • Еще сотни других программ о которых в принципе говорит не стоит, так как каждый выбирает для себя. Посмотрите в гугл по фразе «Текстовый редактор», «html/css/php редакторы» и т. д.

  • А также оочень важный момент — актуальные браузеры. По этой теме будет отдельная статья плюс расскажу о софте для браузеров.

Ну и на последок, хорошие ресурсы по данной теме.

Htmlbook.ru – наверное самый/один из самых полезных ресурсов по html и css. Если Вы начинаете, то однозначно необходимо начинать с этого ресурса.

validator.w3.org сервис проверки Валидности html кода.

jigsaw.w3.org/css-validator css валидатор.

Что и где читать будет в отдельном посте.

И в принципе, никто google и yandex не отменял ;)

с/у  УтБ

На десерт видео – примерно так я устаю от верстки:)

Новый дизайн блога gtalk.kz

Вот и произошло то, что я хотел сделать еще месяц назад. На моем блоге обновился дизайн.

Пока только тестирую, так как еще много мелкой работы. В течении всего месяца (сентября) я продумывал и составлял план нового дизайна: что необходимо поменять, что добавить или убрать. Поэтому наверное и мало записей за сентябрь.

Старый дизайн выжил себя. Почему же я решил сменить шаблон в wordpress?

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

Плюсы нового шаблона.

1. Светлые, теплые цвета нового дизайна против более темных (например, сейчас он чисто на белом фоне). Мне кажется, что более светлые тона приятнее к восприятию, да прозрачность можно не делать, тоже + :) Цветовая палитра сильно не изменилась. Преобладание цвета green или #008000 осталось в сочетании с белым. Надоели эти желто-голубые цвета, заполонившие Казнет ;)

2. Сайдбар. Старый вид сайдбара (колонки справа) был менее информационным. Сейчас Вы можете с легкостью найти меня в социальных сетях, подписаться на обновления (кстати, Вы еще этого не сделали??), одним нажатием следовать за мной в twitter‘e, добавить блог в Яндекс ленту или iGoogle. Т. е. Тем самым взаимодействие между пользователями и автором улучшается и выходит на новый уровень. Можете добавлять меня в друзья — я очень буду рад сотрудничать и просто общаться! ;)

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

4. Поиск от google search. Стандартный поиск в wordpress мне никогда не нравился. И прошлом шаблоне sight (кстати, именно так он и назывался!) он был мало приметен и многие даже наверное не знали об его существовании! Теперь поиск от google на самом почетном месте ;)

5. Форма комментариев изменилась в основном внешне, осталось древовидное расположение. Спам-защита все та же 99%, а работает на все 100%. Конечно если Вы помните или видели, то формы комментирования было три: стандартные комментарии вордпресса, комментарии vkontakte и facebook’a. Теперь их нет. Ну, или почти нет. Такие комментарии мне не нравились по ряду причин. А в ближайшее время комментирования через социальные сети будет вновь доступен.

6. Font-family: Georgia; Именно такое свойство задано для тега р – текста. Пишут про данный шрифт разное, но кажется очень удобно для чтения. По крайней мере, читая блог Глобатора, мне понравился стиль/шрифт текста и я его украл позаимствовал :)

7. Смайлы. Не отношу это напрямую к шаблону, но все же, теперь на блоге используются смайлы от kolobok.us – одни из самых популярных и красивых (по моему личному мнению) смайлов. Для некоммерческих сайтов, т. е. для меня в частности, они бесплатны:) Думаю эти маленькие колобки украшают и делают блог приятным для чтения, и передают атмосферу записей :lol:

8. Есть еще пока не реализованных пару нововведений для пользователей блога. Но об этом расскажу Вам подробнее после их реализации.

Что же еще добавить? Шаблон был реализован на основе чистого шаблона Basic 201 от www.themedreamer.com. Надеюсь Вам понравился новый дизайн блога. Буду рад услышать Ваши комментарии. Все баги, ошибки и недочеты, пожалуйста пишите здесь в комментариях, мне на почту, либо в социальных сетях.

Старый шаблон сайта выглядел вот так:

блог-gtalkkz

А теперь социальный опрос :)

Новый дизайн блога:

  • Тот бы УГ и этот не лучше (50%, 6 Votes)
  • Нормально, и так сойдет (25%, 3 Votes)
  • Надо было давно! Мне нравится! (17%, 2 Votes)
  • Старый шаблон был лучше (8%, 1 Votes)

Total Voters: 12

Загрузка ... Загрузка ...

с/у УтБ

Joomla CMS Kazakh

Сегодня я хочу поделиться с Вами интересным и важным проектом. Думаю, суть его станет полностью ясна после оглашения названия: Казахстанский форум поддержки пользователей Joomla! CMS. Пройти и посмотреть, присоединиться может каждый :)

Многие сразу же скажут зачем? Есть же jomlaforum.ru, joom-support.ru  и множество других. Чем же отличается данный форум от них? Давайте, рассмотрим:

Как добавить свои социальные кнопки на сайт. Часть 2

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

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

Данный метод не использует javascript и/или вообще сторонние скрипты, т.е. увеличение скорости по сравнению с предыдущим методом очевидно. Это, наверное, главное преимущество данного метода. Ну, конечно главным минусом является – отсутствие счетчиков, т.е. визуально Вы не будете знать, сколько раз нажимали на кнопки. Но если подумать, то на некоторые кнопки в принципе не нужны счетчики. За исключением основных (по моему мнению) социальных сетей, о которых я уже писал.

Помимо всего сказанного выше в процессе мы уменьшим количество http запросов картинок кнопок с 6 до 1 с помощью CSS спрайта. А это приводит только к увеличению скорости загрузки Вашего сайта.

Давайте, уже начнем практическую часть, и Вам все станет ясно, т.к. это очень просто.

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

1.Подбор иконок социальных сетей и их добавление

Я решил за основу взять основные  социальные кнопки: twitter, facebook, vkontakte, livejournal, мой мир, google buzz. Если Вам нужны другие кнопки, можете прогуглить необходимые картинки, выбрать из подготовленной статьи или нарисовать самому. Мы же будем работать с данной подборкой.

социальные кнопки

2.Создание CSS спрайта

Выбрав необходимые картинки, у нас в итоге получилось их 7. Надеюсь для удобства Вы их назвали facebook.gif, vkontakte.jpg и т.д. ? Если нет, то тогда сделайте это. Названия картинок будет названием классов в css файле!

Делать CSS спрайт можно и самому, но зачем, если уже все придумано. Тем более, что сделать CSS спрайт самому задача не из легких. Перейди по ссылке на сервис онлайн генератора CSS спрайтов. ru.spritegen.website-performance.org Сервис на русском языке, поэтому особых сложностей быть не должно.

Для начала, заархивируйте все картинки в ZIP архив. Теперь загрузите в онлайн генератор. Все остальные функции на картинке с моими комментариями.

В начале, загрузите ZIP архив. И идем к настройкам.

css-spritecss-sprite социальные кнопки онлайн генератор css-sprite

  1. Выбираем вертикальное или горизонтальное положение. Это зависит от Вашего дизайна блога/сайта. Я выбрал горизонтальное для наших кнопок.
  2. Смещение по горизонтали – это расстояние между кнопками, например ставим 5 px. Внимание необходимо сразу определить расстояние! Данное расстояние затем не изменить! Смещение по вертикали можете не трогать.

Выбираем формат готовой картинки. Доступны PNG, JPG и GIF форматы. Я выбрал GIF формат.

3. Класс для Ваших кнопок. Я удалил, т.е. оставил пустым. Так ка мне необходим формат типа: .fb {}, а не .sprite-fb {}

4. Копируем данные куски кода в Ваш css файл темы. Обычно это style.css в папке css, либо в корневой папке вашей темы.

Вот мой код:

#container {

background: url("images/buttons.gif") no-repeat top left;

height: 20px;

}

.fb{ background-position: 0 0; width: 95px; height: 20px; float:left;margin-right: 5px;}

.google{ background-position: -100px 0; width: 105px; height: 20px;float:left; margin-right: 5px;}

.moimir{ background-position: -210px 0; width: 95px; height: 20px; float:left;margin-right: 5px;}

.twitter{ background-position: -310px 0; width: 95px; height: 20px; float:left;margin-right: 5px;}

.vk{ background-position: -410px 0; width: 95px; height: 20px;float:left; }

Конечно я изменил название картинки, что и Вам советую

В итоге получим такую картинку и добавил float:left; и margin-right: 5px; для обтекания ссылок слева и отступа справа. Далее Вы поймете.

3.      Код добавления социальных кнопок

Теперь займемся добавлением кода социальных кнопок в файл single.php в папке с темой вашего блога wp-content/themes/ваша_тема/ после этого участка:

<?php the_content(); ?>

Т.е. сразу после основного текста.

Приведу сразу коды всех кнопок:

</pre>
<div id="container">









</div>
<pre>

Теперь немного разберемся: <div id=”container“> класс вывода картинки через css.

Ссылка (href=”http://twitter.com/intent/tweet?text=RT @gtalkkz <?php the_title(); ?>: <?php the_permalink(); ?>“) при нажатии на которую, откроется новое окно (target=”_blank”), при на ведении на картинку появится Добавить в twitter.

<?php the_title(); ?> Это текущий заголовок статьи/страницы.

<?php the_permalink(); ?> Текущая ссылка на статью/страницу.

Ссылки являются стандартами добавления информации в социальную сеть.

Думаю, все стало на свои места.

Еще можно вставить <div class=”buttons”>Коды кнопок</div> для красоты внешнего вида кнопок с помощью css.

В принципе это все. Можете посмотреть и порадоваться ;) А вот и живой пример.

с/у УтБ

Используйте для стабильности крупных проектов выделенные сервера, которые отвечают всем современным требованиям.

Сегодня на десерт: Гоночный болид от Яндекс по Астане :)

Что заставляет людей покупать новый гаджет?

Привычные покупки через социальные сети показали что можно предсказать, будет ли продукт продаваемым или нет.

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

В работе, представленной на этой неделе на семинаре «Decision in Social Networks», исследователи от норвежской телекоммуникационной компании Telenor показали, насколько дружеские советы могут повлиять в выборе продукта. Наблюдая, как влияние распространяется внутри социальных сетях, могли бы помочь предсказать, будет ли новый продукт успешным, говорят они. Исследователи смотрели на утверждённые модели для iPhone от Apple и IPAD, а также гораздо менее успешного мобильного телефона Doro.

«Социальные сети влияют на принятие решения сделать покупку» говорит Pol Sundsoy, менеджер проектов в Telenor. В частности, по его словам, люди имеют больше шансов купить мобильный телефон, который купили их друзья. Аналогичным образом, когда люди меняют продукт, например, переключаясь между сотовыми операторами, они скорее всего тоже дезертируют с корабля, если их друзьям сделают это первыми.

Для измерения социальных характеристик выбора продукта, исследователи использовали анонимные данные из сети Telenor. Эти данные показали, как пользователи общаются и то, какие мобильные устройства они используют.

Поразительно, исследователи обнаружили, люди, которые использовали продукцию Apple, как правило, связаны друг с другом. Они обнаружили, что в социальных сетях обсуждали свои гаджеты от Apple. После запуска iPhone, сильно связанные группы пользователей сформировались относительно быстро. У пользователей iPhone было в два раза больше соединений, то есть они общались друг с другом с помощью голосовых звонков, текстовых сообщений или электронной почте, что можно было бы ожидать. Исследователи также изучили гораздо менее успешный Doro. Телефон позиционировался, как устройство, предназначенное в основном для телефонных звонков. Doro пользователи, как правило, связаны с несколькими другими пользователями Doro, и не было никакого центрального кластера. Sundsoy утверждает, что эта структура предполагает, что устройство, скорее всего, никогда не наберёт обороты.

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

Даже не обращая внимание на качество продукции, выбор в социальных сетях будет успешным, говорят исследователи Telenor.

“Социальные сети имеют высокую предсказательную силу”, говорит Sundsoy. “Те, кто общаются друг с другом, как правило, выбирают вместе.” Согласно работе его группы, один из ключевых факторов является размер кластера, который формируется вокруг продукта. Если большая, сильно связная группа начинает формироваться, по его словам, есть хороший шанс, что продукт будет успешным.

Постовой: Любишь баню и париться? Тогда тут ты найдешь нужную печь для бани.

Анализ блога за август 2011

Думаю в начале нового месяца необходимо подвести итого прошедшего месяца, сделать выводы и идти вперед. Август – пора отдыха и веселья, спад в интернете заметен однозначно. Все хотят еще поплавать, позагорать и весело провести время :)