Сайт о кодинге в HTML.Практика.Уроки.Статьи.Обшение.

Инструменты для тестирования кросс-браузерности сайта

-=T$t=- — Sun, 20 May 2012 09:49:47 GMT

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

Сегодня достаточно сложно определить, как же выглядит наш проект в различных браузерах. Не всегда под рукой есть целый набор всех существующих браузеров. Проверка в различных браузерах не столько сложна, сколько затратна по времени. Да, согласен, на ранних этапах планирования и разработки вплоть до вывода проекта в свет необходимо все же ручная проверка и прогон по всему, что только есть, от IE 6+ (5й уже паранойя) и сафари, фф и тд.

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

IETester - http://www.my-debugbar.com/wiki/IETester/HomePage

Данный инструмент помогает нам увидеть наш проект во всех браузерах ie от 5,5 до 9. Что самое интересное проект развивается и с каждым новым обновлением работает все лучше и лучше. Достойный друг веб-разработчика.

Selenium Remote Control - http://lejosland.ru/wp-content/uploads/2011/09/selenium-rc.png

Этот проект нравится мне тем, что без особых усилий можно проверить работу веб-приложений написанных на Java, PHP, Ruby, Perl и Python, .NET.

Sahi - http://www.sahi.co.in/w/

Упрощение и автоматизация веб-тестирования. Мощный продукт.

SauceLabs - http://saucelabs.com/

Неплохой инструмент.

BrowserBox - http://susegallery.com/a/ppX0Yr/browserbox

Набор всех известных браузеров. Включает в себя 20 версий 12 различных браузеров. Вообщем, как гласит их слоган "Устали от загрузки и установки многих браузеров ?Попробуйте BrowserBox! :)” Рекомендую.

Browserling - http://browserling.com/

Забавный дизайн, понравится всем :) Что же касается тестинга, времени тратится немного, но все же можно было сделать все это дело гораздо быстрее. Пока в стадии beta, но уже есть чем воспользоваться.

browsershots – http://browsershots.org/

Один из самых простых инструментов тестирования. Заходим, вводим url проекта, выбираем браузеры, которые нам необходимы и в путь.

Adobe BrowserLab - https://browserlab.adobe.com/en-us/index.html#

Один из самых мощных инструментов, много возможностей и вкусняшек :)

Spoon - http://spoon.net/Browsers/

Наглядно, красиво и просто!

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

-=T$t=- — Sun, 20 May 2012 09:46:30 GMT

Верстка страниц сайта — это процесс создания веб-страницы из макета дизайна, как правило, в формате PSD, с помощью кода соответствующего языка разметки (HTML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация).

Блочная верстка создается благодаря семантическим конструкциям разметки, например, . Принято считать, что разновидностей верстки три:


Табличная верстка — верстка, построенная на таблицах ;
Блочная верстка — верстка в конструкции ;
Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях.

Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS.
Различают верстку и по ширине страницы:
Фиксированная верстка — означает, что сверстанная страница 
имеет одну заданную ширину, как правило, расположенную по центру при 
большем разрешении экрана.
Резиновая верстка — когда сверстанная страница тянется по 
ширине окна браузера, либо в заданных приделах, например, от 1024px до 
1600px, либо не имеющая конечной ширины.
Кросс-браузерность — это корректное идентичное отображение 
сверстанной страницы сайта в различных браузерах: Internet Explorer, 
FireFox, Opera, Safari, Google Chrome и другие.
HTML-верстка
Итак, верстка страницы сайта начинается с оценки макета дизайна и выбора конструкции — модульной сетки, по которой будет верстаться страница. На модульных сетках останавливаться пока не будем, рассмотрим их позже, в новых статьях.
Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты.
Готовим html-каркас или берем заранее приготовленный:
HTML код: Заранее приготовленный html-каркас.




Далее, там где стоит многоточие «...», верстаем необходимые элементы 
разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая:
HTML код: Шапка сайта.

 


Содержимое левого и правого блоков описывать не будем, дабы не 
тратить время на разъяснения. В них может содержаться все что угодно, 
начиная от меню каталога и заканчивая формами и баннерами.
В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1, текст желательно выделять в параграфы p, и т.д. в соответствии с семантикой.
В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы.
О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами  и :

HTML код: Вынос CSS в отдельный файл в спецификации xhtml.




Гм.. что еще?
Несколько преимуществ блочной верстки
Блочная верстка имеет более логичный семантический код;
Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы;
Блочная верстка позволяет отделить структуру от представления.
Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться.
Спасибо за внимание.



Как добавить иконку сайта в адресную строку браузера?
-=T$t=- — Sat, 12 May 2012 04:52:14 GMT
При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую
 картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом
 со ссылкой при добавлении ее в закладки браузера.


Чтобы установить подобную «фичу», необходимо нарисовать изображение размером
 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico. 
Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что
 для этой цели требуется дополнительный плагин. 
Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File
 Formats. По умолчанию программа Photoshop CS под Windows устанавливается
 в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла
 плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

После добавления плагина, при сохранении рисунка в списке доступных форматов
появляется новый пункт «Windows Icon».
Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем
 favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет
 его в адресную строку, а также закладки.
Файл не обязательно должен располагаться в корне сайта,
 но тогда следует указать браузеру, где он находится. Это делается через тег ,
как показано ниже.


<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
head>

Атрибут href задает расположение и имя файла.
Формат рисунка не обязательно должен быть ICO, также допускается 
использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.
<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
head>





Как создать facebook-страницу для проекта или бренда?
-=T$t=- — Sat, 12 May 2012 04:43:12 GMT
До недавнего времени я особо не обращал внимания на социальные сети и
 твиттер, считая, что они малоэффективны с точки зрения бизнеса, но, 
прочитав пару книг на эту тему, начал менять свое мнение и в этом году хочу уделить маркетингу в социальных сетях больше внимания.
И первым шагом в направлении социальных сетей для меня стало 
знакомство с facebook, в котором я создал свой личный профиль и 
несколько профилей для своих проектов.
А раз время на знакомство было потрачено существенное, я подумал, что
 смогу сэкономить это время для многих других людей, поэтому записал 
подробный видеоурок на счет того, как создаются facebook-страницы для 
брендов, сайтов, сообществ и так далее. Это не обычные профили с 
друзьями, личной информацией и личными фотоальбомами, а именно 
бизнес-аккаунты для продвижения.
Социальные сети набирают обороты, поэтому уже сегодня вы можете 
создать аккаунт для продвижения своих проектов. Хуже от этого точно не 
будет.

http://www.youtube.com/watch?v=IZxpExmQLI4&feature=youtu.be



Техники работы с .htaccess
-=T$t=- — Sat, 28 May 2011 20:05:55 GMT
Сегодня мы постараемся перечислить самые
 распространённые техники работы с файлами .htaccess. Каждый использует 
данный файл по-разному. Как? Ответ в этом уроке!
Используем Mod_rewrite для чистых URL
Всё чаще и чаще мы видим понятные (простому) человеческому глазу URL. Это радует. Как преобразовать свои URL? Ответ:

1 RewriteEngine On
2  
3 RewriteRule ^user/([a-z0-9]+)/$ /user.php?u=$1 [NC,L]
4 RewriteRule ^analytics/$ /pages/analytics.php [NC,L]
5 RewriteRule ^settings/$ /pages/settings.php [NC,L]

Редирект
Если вы перенесли сайт на новый домен, то на старом лучше всего сделать редирект:

1 RewriteEngine On
2 RewriteRule ^(.*)$ http://www.yournewdomain.com/$1 [R=301,L]

Запретить выполнение файлов
Если вы не хотите, чтобы какой-то формат запускался на вашем сайте, просто используйте следующую технику:

1 Options -ExecCGI
2 AddHandler cgi-script .js .cgi .asp .jsp. htm .exe .sh

Свои собственные страницы ошибки
Наверное, чаще всего люди используют файл .htaccess как раз для этих целей:

1 ErrorDocument 401 /401.php
2 ErrorDocument 403 /403.php
3 ErrorDocument 404 /404.php
4 ErrorDocument 500 /500.php

Убираем www из url
Часто можно заметить, что многие сайты упускают символы www в своих url. К примеру, wordpress делает это автоматически.

1 RewriteEngine On
2 RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
3 RewriteRule ^(.*)$ http://yourdomain.com/$1 [L,R=301]

Что нужно учитывать при работе с .htaccess
Во-первых, вы должны убедиться, что у вас нет ошибок в написании 
содержимого .htaccess файла. Учтите, что они чувствительны к регистру!
Для комментариев используйте знак #. Некоторые люди, которые много работают с JavaScript или PHP, часто ставят знаки //.
Всегда делайте резервную копию файла 
.htaccess перед тем как внести какие-то изменения. Это поможет 
сэкономить на времени, которое вам придётся потратить, если что-то 
пойдёт не так. 
 



CSS хаки. Особенности кроссбраузерной верстки.
-=T$t=- — Fri, 27 May 2011 08:11:46 GMT
Кроссбраузерность
 кода – основное требование для верстальщика практически в любой 
web-студии. Для достижения этой задачи есть масса способов. Главный из 
которых – тщательно продуманная структура документа.
 Однако, если структура html страницы сложна, или придумать структуру 
так, чтобы она одинаково отображалась во всех браузерах, не удалось, на 
помощь верстальщику приходят всевозможные css-хаки. Не претендую на 
оригинальность или уникальность подборки трюков в этой статье, но 
постараюсь описать как можно больше способов и инструкций по достижению 
кроссбраузерности.

Основная головная боль верстальщика в 99,99% связана с браузерами от 
Microsoft, т.е. с Internet Explorer. Сайт, одинаково хорошо 
интерпретируемый Opera, Mozilla, Safari и Chrome, может выглядеть 
совершенно по-разному в Internet Explorer 8, Internet Explorer 7,  не 
говоря уже о более ранних версиях.

Наиболее красивое решение для обеспечения кроссбраузерности с Internet 
Explorer – использовать условные комментарии в HTML коде. Суть в том, 
что для каждой версии браузера создается свой CSS файл, в котором 
проблемные свойства определенным образом перезаписываются:

Будет работать только в IE6 и ниже:

Условие может быть таким: IE – для любой версии IE

lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v

lte IE v – (less than or equal) для всех браузеров IE, версия которых 
меньше чем v, или такая же

gte IE v – (greater than or equal) – для IE, версия которых больше или 
равна v

gt IE v – (greater than) – для IE, версия которых больше v.

Иногда ради того, чтобы переписать одно свойство, подключать новый CSS 
файл слишком громоздко. Для этого есть специальные CSS-хаки.
CSS хаки для Internet Explorer
01 * html .class{background:red}  /* В случае если у html-страницы есть доктайп,
02 этот хак работает только для IE6. В случае quirks-mode, хак работает в IE6 и IE7 */
03  
04 *+html .class{background:red} /*В случае, если у html-страницы есть доктайп,
05 этот хак работает в IE7, может понять Opera 9 и ниже */
06  
07 *:first-child+html .class{background:red} /*В случае, если у html-страницы есть доктайп,
08 этот хак работает в IE7: */
09  
10 html>body {} /*Все кроме IE6 */
11  
12 div, #ie#fix  /* все кроме IE8 */
13  
14 div+span {&#8230;}   /* IE6 и ниже проигнорирует это правило */
15  
16 div>span {&#8230;} /* IE6 и ниже проигнорирует это правило */
17  
18 .myClass  {
19 color:red\0/; /* только IE8*/
20 }
21  
22 .myClass  {
23 color:red\9; /* только IE9*/
24 }
25  
26 *:lang(ru) #lightMOD { display: block }
27 /* Хитрый селектор — все современные браузеры — не IE6 или IE7 */
28  
29 html>/**/body #lightMOD { display: block }
30 /* Вживленный комментарий — все современные браузеры — не IE6 или IE7 */
31  
32 c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
33  
34 .ie7b {#color:#00FF00;} /* Хак только для IE7,6 */

Если перед свойством в css поставить подчеркивание "_”, или дефис "-", 
то эти свойства будут восприниматься только IE версии 6 и ниже.

Если перед свойством в css поставить звездочку ”*”, то эти свойства 
будут восприниматься только IE версии 7 и ниже.

>body {} выбирает элемент body только в IE7.

html* {} выделяет все элементы внутри элемента html. Только для IE7 и 
ниже а также Chrome и Safari.

Если после значения свойства поставить !ie, то свойство применится 
только в браузерах IE.
CSS хаки для Mozilla Firefox
С Mozilla Firefox проблем обычно не бывает. Но тем не менее хаки и для этого браузера могут оказаться полезными:
1 html:root ваш_элемент {&#8230;}  /* этот работает ещё и для Safari и chrome*/
2  
3 ваш_элемент, x:-moz-any-link {&#8230;}
4  
5 ваш_элемент, x:-moz-any-link, x:default { display: block } /* только FF 3.0 */
CSS хаки для Opera
1 @media all and (min-width: 0) {
2 .class { color: #368EF1; } /* для Opera */
3 }
4  
5 html:first-child .class { color: #368EF1; } /* для Opera */
CSS хаки для Safari
1 html[xmlns*=""] body:last-child .class { color: #368EF1; }
2 /*  для Safari < 4.0 */
3  
4 body:last-child:not(:root:root) .style { background: #F00; }
5 /* для Safari < 4.0  */
6  
7 @media screen and (-webkit-min-device-pixel-ratio:0) {.myClass {...}}
8 /* для Safari < 4.0 и Chrome */
CSS хаки для Chrome
1 body:nth-of-type(1) .style{
2  
3 }


5 эффектов для псевдо класса :hover
-=T$t=- — Mon, 23 May 2011 07:01:01 GMT


 Эффекты при наведении курсора мыши на объект 
придают любому сайту динамичный и живой вид. Обычно для них используется
 код JavaScript, но с наступлением CSS3 можно уже использовать только 
средства стилей.
Приведенные в данном материале эффекты работают в 
современных браузерах. Поддержка IE зависит от версии и перед 
применением в реальном проекте надо провести тщательное тестирование. 

 
Подёргивание вверх

Данный эффект отлично работает, когда у вас есть 
несколько выравненных по горизонтали элементов. Проведение курсора мыши 
вдоль такой линейки порождает волну.
Его очень просто сделать. Для каждого элемента 
определяется поле и при наведении курсора мыши размер поля уменьшается. 
Начальное значение поля 15px, уменьшается оно до 2px, что заставляет 
изображение "подпрыгивать вверх". Данный эффект можно использовать и для
 текста в списке.
Свойство transition используется здесь в качестве дополнения, так как эффект отлично выглядит и без него. Оно придает гладкости эффекту.
CSS

01 .ex1 img{
02     border: 5px solid #ccc;
03     float: left;
04     margin: 15px;
05     -webkit-transition: margin 0.5s ease-out;
06     -moz-transition: margin 0.5s ease-out;
07     -o-transition: margin 0.5s ease-out;
08 }
09   
10 .ex1 img:hover {
11     margin-top: 2px;
12 }

 
Масштабирование
 
При наведении курсора мыши каждое изображение 
медленно увеличивается в размерах, а при потере фокуса - возвращается к 
своим оригинальным размерам.
Для данного эффекта используется набор изображений 
размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 
300х100 px и расширяются при наведении курсора мыши. Используется 
центрирование по горизонтали, и изображение с новым размером может все 
испортить, поэтому применяется отрицательное значение поля равное 
половине ширины.
CSS

01 #container {
02     width: 300px;
03     margin: 0 auto;
04 }
05   
06 #ex2 img{
07     height: 100px;
08     width: 300px;
09     margin: 15px 0;
10      -webkit-transition: all 1s ease;
11     -moz-transition: all 1s ease;
12     -o-transition: all 1s ease;
13 }
14   
15 #ex2 img:hover {
16     height: 133px;
17     width: 400px;
18     margin-left: -50px;
19 }

 
Проявляющийся текст

Данный эффект очень напоминает использование 
JavaScript, когда при наведении курсора мыши на один объект проявляется 
другой. Для его получения изображение и текст помещаются в один 
контейнер div, а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента div. Таким образом текст помещается вверх элемента div и скрывается.
Для проявления текста при наведении курсора мыши, мы 
просто изменяем цвет и высоту строки. Так создается эффект 
масштабированного проявления текста.
CSS

01 #ex3 {
02     width: 730px;
03     height: 133px;
04     line-height: 0px;
05     color: transparent;
06     font-size: 50px;
07     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
08        font-weight: 300;
09     text-transform: uppercase;
10     -webkit-transition: all 0.5s ease;
11     -moz-transition: all 0.5s ease;
12     -o-transition: all 0.5s ease;
13 }
14   
15 #ex3:hover {
16     line-height: 133px;
17     color: #575858;
18 }
19   
20 #ex3 img{
21     float: left;
22     margin: 0 15px;
23 }

 
Наклон изображения

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

01 #ex4 {
02     width: 800px;
03     margin: 0 auto;
04 }
05   
06 #ex4 img {
07     margin: 20px;
08     border: 5px solid #eee;
09     -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
10     -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
11     box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
12     -webkit-transition: all 0.5s ease-out;
13     -moz-transition: all 0.5s ease;
14     -o-transition: all 0.5s ease;
15 }
16   
17 #ex4 img:hover {
18     -webkit-transform: rotate(-7deg);
19     -moz-transform: rotate(-7deg);
20     -o-transform: rotate(-7deg);
21 }

 
Свечение и отражение

Это замечательный и сложный эффект. Изначально 
изображения имеют небольшую прозрачность.Затем, когда на него наводится 
курсор мыши, прозрачность полностью убирается, появляется свечение 
вокруг и отражение (только для браузеров Webkit).
CSS

01 #ex5 {
02     width: 700px;
03     margin: 0 auto;
04     min-height: 300px;
05 }
06   
07 #ex5 img {
08     margin: 25px;
09     opacity: 0.8;
10     border: 10px solid #eee;
11   
12     /*Трансформацияя*/
13     -webkit-transition: all 0.5s ease;
14     -moz-transition: all 0.5s ease;
15     -o-transition: all 0.5s ease;
16   
17     /*Отражение*/
18     -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
19 }
20   
21   
22 #ex5 img:hover {  
23    opacity: 1;
24   
25    /*Отражение*/
26   -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
27   
28    /*Свечение*/
29   -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
30   -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
31   box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
32 }

Заключение
Показанные пять эффектов являются всего лишь 
небольшим примером того, что можно творить с CSS. Не бойстесь 
экспериментировать. Сочетая между собой простые элементы можно получить 
впечатляющий результат.


10 Правил написания чистого кода
-=T$t=- — Sat, 30 Apr 2011 03:26:15 GMT
У каждой профессии есть целый набор 
своих специфических проблем. В частотности одной из самых 
распространённых проблем является ситуация, когда один человек напрочь 
отказывается делать то, что до него делал другой. Проблема заключается в
 том, что у всех разные подходы к работе, что очень часто приводит к 
тому, что они превращаются просто во вредные привычки.
Для того чтобы код выглядел чистым (что 
по сути обеспечивает нормальную работу в команде), нужно следовать 
нескольким простым правилам, которыми никогда не нужно пренебрегать.
Пишем красивый и чистый программный код
1. Тщательно продумайте логику, перед тем как начать кодить
Перед тем как начинать процесс написания
 кода или его отладки, возможно целесообразно написать какой-то псевдо 
код, для того чтобы сразу представить себе весь масштаб того, что вам 
предстоит написать. Если вы будете следовать данному правилу, то у меня 
нет сомнений в том, что читабельность и функциональная сторона вашего 
кода значительно улучшится. Кроме всего прочего данная техника позволит 
вам избежать ненужных дополнений, которые как правило впоследствии 
добавляются в код.

2. Чётко обозначьте для себя структуру вашей страницы
Работать с определёнными контейнерами 
очень удобно, но ещё более удобно работать с контейнерами, у которых 
есть определённые ID. Предположим, что мы имеем дело со следующим 
фрагментом кода:

view sourceprint?
01 <div id="main-container">
02     <div id="header">
03         <div id="logo">...div>
04         <div id="main-menu">...div>
05     div>
06     <div id="content">
07         <div id="left-column">...div>
08   
09         <div id="center-column">...div>
10         <div id="right-column">...div>
11     div>
12     <div id="footer">
13         <div id="footer-menu">...div>
14         <div id="disclaimer">...div>
15     div>
16 div>

Благодаря данной технике, разобраться в 
структуре данной страницы не составляет никакого труда, так как почти у 
каждого блока DIV есть свой идентификатор. В этом случае, не только 
проще добавлять код. Почти каждый без особого труда сможет понять и 
изменить структуру, если это будет необходимо. Однако данное правило 
нужно принимать во внимание в связке со следующим.
3. Используйте понятные идентификаторы
Для того чтобы пример рассмотренной вами
 структуры был понятен почти каждому после нескольких секунд, необходимо
 давать ясные имена идентификаторов. Также необходимо принимать во 
внимание форматирование, которое также играет важную роль в 
читабельности кода. Согласитесь, что это не очень сложно! Однако данные 
техники помогут вам, и не раз.

4. Пишите краткие и понятные комментарии
Комментарии - это очень важная часть 
программной документации, которую необходимо писать, для того чтобы 
быстро и безболезненно ориентироваться в коде. Простой и краткий 
комментарий это как раз то, что вам нужно, для того чтобы увеличить 
понимание того, что следует за ним.
Многие разработчики не любят писать 
комментарии. Это вполне можно понять, однако часто это просто 
необходимо, потому что всё чаще и чаще масштабы и количество проектов 
увеличивается и всё поместиться в голове не может. Но тут есть и 
обратная сторона медали, но об этом в следующем пункте.
5. Используйте комментарии без фанатизма
Использование комментариев не должно 
выходить за рамки. Когда вы пишите комментарий, то должны просто описать
 входящие и возвращаемые данные. Комментарии следующего вида 
неприемлимы:
Написание комментариев для себя (пример: /* Закончу как-нибудь потом... */).
Отвод глаз от себя (пример: /* это писал Johns.С него и спрос. */).
Ни о чём не говорящие выражения (e.g. /* Это очередная математическая функция. */).
Также иногда люди не уверены в какой-то функциональности и просто комментируют фрагмент кода.
Данные комментарии бессмыслены и могут 
ввести человека в заблуждение. У каждого комментария должен быть свой 
смысл. Никогда не забывайте об этом
Примеры хороших комментариев:
Спецификация автора (пример: /* Автор John, 13 Ноября 2010 */).
Какая-то детализация метода или процедуры (пример: /* Данный метод 
предназначен для валидации формы входа пользователя в систему */).
Быстрые заметки или описание изменений в коде (e.g. /* Добавлена валидация e-mail */).

6. Не пишите слишком большие методы
Когда функциональность того или иного 
метода расширяется, неизбежно растёт и размер самого метода. Количество 
строк кода постоянно увеличивается, и метод меняет свой вид, что может в
 последствии запутать автора.
Одним из решений данной задачи является 
разбиение одной большой функции на несколько более мелких. Ведь часто 
код в некоторых функциях повторяется, и его можно заменить другой 
функцией – просто нужно не лениться. Во всём этом есть и другие плюсы, 
скажем, другой разработчик в команде сможет использовать ваши методы для
 своих. Всё эту нужно делать очень осторожно: с чувством, с толком, с 
расстановкой.
7. Используйте стандарты именования переменных и функций
Когда вы начинаете писать функцию или 
создаёте новую переменную, её имя должно иметь описательный характер. 
Разработчик с первого взгляда должен понять, для чего она нужна.

Существует немало компаний, в которых 
узаконены свои собственные стандарты именования методов и переменных 
(пример: префикс 'int_' для всех переменных данного типа), но также 
наравне с ними существует масса компаний где вообще нет никаких 
стандартов. Из-за своей лени работники данных компаний часто делают одну
 и ту же работу вдвое дольше. Как вы думаете? Это нормально?
8. Осторожно производите все изменения
Для того чтобы не нарушить какой-то 
другой метод, следует очень осторожно производить все изменения в коде и
 записывать их в соответствующий комментарий. Обо всём этом нужно 
говорить, потому что почти никто так не делает. Если вам необходимо 
добавить или удалить какой-то функционал, постарайтесь сделать это так, 
чтобы код остался понятным и чистым.
Так же необходимо учитывать следующее:
Сохраняйте код читабельным (пример: если вы добавляете условный оператор IF, то обратите внимание на форматирование кода).
Создавайте дополнительные комменты.
Уважайте стандарты, согласно которым был написан данный метод.
9. Избегайте бурных смесей различных языков программирования
CSS встроенные в теги и небольшие 
фрагменты JavaScript в середине кода - это неверные примеры смешивания 
языков программирования, которые часто встречаются в реальной жизни. 
Многие люди часто используют атрибут STYLE, для того чтобы по-быстрому 
добавить какой-то стиль. Это на самом деле может привести к потери 
времени в будущем, когда необходимо будет произвести какие-то изменения.

10. Ограничивайте импорт файлов
Это конечно хорошо, когда 
функциональность разбита на несколько файлов, но тут всё тоже должно 
быть в меру. Если у вас есть несколько файлов с таблицами стилей их 
можно и даже нужно объединить в один.
Это сэкономит место и позволит сохранить
 порядок в проекте, к тому же уменьшит время загрузки страницы. Каждый 
импорт файла это отдельный HTTP запрос, который занимает определённое 
время загрузки вашего приложения.
Время действовать
Я согласен с тем, что выполнять все эти 
правила не всегда удобно, однако это может помочь вам в будущем. К тому 
же вы здорово сможете увеличить эффективность написания кода. К тому же,
 всё чаще и чаще люди убеждаются в том, что необходимо идти в ногу со 
стандартами, для того чтобы сохранить код читабельным. Учитывая, что не 
всегда один и тот же человек работает над одним и тем же фрагментом 
кода, эти правила очень важны. Всё это - залог успеха работы в команде.


Zen Coding: Ускоритель написания HTML/CSS кода
-=T$t=- — Sat, 12 Feb 2011 11:08:13 GMT
Автор:Е.Попов
В этой статье мы представим вам метод 
быстрого написания html и css кода используя целый ряд специальных 
селекторов и их комбинаций. Данный плагин был разработан Сергеем Чикуеноком и завоевал свою популярность по всему миру буквально в считаные дни.
Сколько времени занимает у вас написание
 html кода? Все эти теги, атрибуты, кавычки, скобки... Даже если вам 
помогает ваш текстовой редактор, всё равно вам нужно много писать.
У нас была такая же проблема и в 
JavaScript, когда нам надо было добраться в какие-то дебри дабы добыть 
доступ к какому-то элементу. Мы писали огромные JavaScript коды, в 
которых потом трудно было разобраться. На помощь нам пришли JavaScript 
фрэймворки, такие как jQuery, Dojo и другие, которые для доступа к 
элементам используют CSS селекторы. Почему это не использовать и в 
других целях?
Что если использовать CSS селекторы не 
только для того, чтобы получать доступ к элементам, а генерировать сам 
код. Что если вот такая вот строка:

view sourceprint?
1 div#content>h1+p

Смогла бы превращаться в такой вот код:

view sourceprint?
1 <div id="content">
2 <h1>h1>
3 <p>p>
4 div>

Сегодня мы представляем вам Zend Coding
 - инструмент для быстрого написания HTML и CSS кода. Данный плагин 
поддерживается практически всеми современными текстовыми редакторами 
такими как:Aptana/Eclipse, TextMate, Coda, Espresso, Komodo Edit/IDE, 
Notepad++, PSPad, editArea, CodeMirror, Dreamweaver, Sublime Text, 
UltraEdit, TopStyle, GEdit, BBEdit/TextWrangler, Visual Studio, 
EmEditor, Sakura Editor, NetBeans. Я думаю вы найдёте тут свой редактор!
Все поддерживаемые селекторы HTML вы можете найти тут.
Все поддерживаемые селекторы CSS вы можете найти тут.
Если всё ещё колеблетесь.. Установить или нет? Вы можете испытать Zen Coding на прочность на этой демо странице! Просто наберите команду, нажмите Tab и вуаля!
Удачного кодинга!


Всем кодировкам кодировка. UTF-8: современно, грамотно, удобно.
-=T$t=- — Fri, 04 Feb 2011 10:26:25 GMT
Автор: Ростислав Чебыкин (http://webtest.philigon.ru/)Не существует самого 
лучшего браузера, самого лучшего текстового редактора, самой лучшей 
операционной системы… А самая лучшая кодировка существует. Это UTF‑8.

За техническими подробностями можно обратиться к RFC 3629 (STD 63) и стандарту Unicode (п. 3.9). А здесь пойдёт речь о практической стороне использования UTF‑8.

Главное преимущество

В кодировке UTF‑8 вы можете непосредственно включать в документ любые символы из всего набора Unicode.
 Старинные кодировки (например, Windows‑1251 или KOI8‑R) предоставляли 
не более 256 символов, а в Unicode есть свыше 100 000 символов. Среди 
них — типографские знаки (тире, кавычки, многоточие, апостроф, 
неразрывный пробел, неразрывный дефис и пр.), специальные символы (№, §,
 ©, ‰, × и пр.), буквы с диакритическими знаками и лигатуры (é, è, Ü, Æ,
 ø, ﬁ и пр.), символы почти всех существующих в мире алфавитов (α, Ω, א,
 ת, ѣ, 伲, 儻 и пр.), пиктограммы и значки (→, ■, ♥, ☺ и пр.) и множество других символов.

Загляните в «Таблицу символов» на своём компьютере. В кодировке UTF‑8
 вы можете взять прямо из этой таблицы любой символ и вставить его 
непосредственно в свой документ. Если вам нужен знак копирайта, градуса 
или интеграла — не требуется искать особый шрифт, представлять этот знак
 в графическом формате или выдумывать ещё какие‑то ухищрения. В 
кодировке UTF‑8 любой символ, будь то дробь ⅓ или китайский иероглиф, можно использовать в документе точно так же, как латинскую букву «A», русскую «Ы» или знак «+».

В старых кодировках можно было вставить в документ особые символы с помощью подстановок (references). Например, длинному тире соответствовала подстановка &mdash; (а также &#8212; или &#x2014;), а греческой букве «пи» — подстановка &pi; (а также &#960; или &#x3c0;). Для большинства символов существовали только числовые подстановки: например, для дроби ⅓ — &#8531; или &#x2153;, для музыкального знака «бемоль» — &#9837; или &#x266d;, для неразрывного дефиса — &#8209; или &#x2011;. Конечно, это очень неудобно. Во‑первых, слишком длинно: например, вместо одного символа «♭» приходится вставлять семь: &#9837;.
 Во‑вторых, документ с подстановками неприятно просматривать и 
редактировать. Гораздо удобнее, когда вы видите в документе 
непосредственно те символы, которые там должны быть, а не коды вроде &mdash; или &#x3c0;.

Когда‑то давно разработчики веб‑страниц были вынуждены пользоваться 
такими громоздкими подстановками, потому что кодировки UTF‑8 ещё не 
существовало. Но теперь можно забыть как про подстановки, так и про 
старые кодировки.

Мифы о недостатках

Обсудив преимущества UTF‑8, стоило бы поговорить и о недостатках этой
 кодировки. А недостатков, представьте себе, у неё нет. Есть только мифы
 и легенды, а также слухи и домыслы, которые распространяют замшелые 
консерваторы и махровые ретрограды. Много лет назад некоторые недостатки
 действительно имели место, но сейчас они канули в Лету.

Браузеры плохо поддерживают UTF‑8?

Говорят, что у некоторых пользователей всё ещё установлены старые 
браузеры, которые не способны отображать страницы в UTF‑8. Это полная 
ерунда. Даже Internet Explorer 4 и Netscape 4, которыми уже давно никто 
не пользуется, прекрасно понимают UTF‑8. А более современные браузеры — и
 подавно.

UTF‑8 — вовсе не «новомодная» или «молодая» кодировка, она успешно 
применяется более десяти лет. Если некий разработчик узнал о ней недавно
 или не знает до сих пор — это недостаток его квалификации, а не 
кодировки.

С UTF‑8 возникают проблемы на веб‑сервере?

«Я поместил на сервер страницу в UTF‑8, а она отображается 
кракозябрами»,— так иногда жалуются начинающие разработчики. На самом 
деле, такая проблема случается с самыми разными кодировками и не связана
 ни с какими специфическими особенностями UTF‑8. Здесь неприятность в 
том, что страница сделана в одной кодировке, а сервер в заголовках HTTP 
сообщает другую. Надо привести настройки сервера в соответствие с 
действительной кодировкой веб‑страниц. Повторю, что это надо сделать при
 любой кодировке.

Файлы в UTF‑8 занимают много места?

Говорят, что документы в UTF‑8 становятся в два раза больше, чем в 
старых кодировках. Это миф из разряда «слышал звон, да не знаю, где он».
 На самом деле — раз на раз не приходится. Например, если документ 
состоит только из символов ASCII (латинские буквы, цифры, знаки 
препинания и т. д.) — то в кодировке UTF‑8 он будет занимать ровно 
столько же байтов, сколько в любой другой. Если документ содержит только
 буквы русского алфавита и никаких других символов (что, согласитесь, 
бывает достаточно редко) — то в UTF‑8 он действительно станет в два раза
 больше. А если в нём, например, поровну русских и арабских букв — в 
UTF‑8 он будет в два раза меньше, чем, например, в Windows‑1251 или 
Asmo‑708.
Та самая страница, которую вы сейчас читаете, в кодировке UTF‑8 
занимает 35 килобайтов. А если перевести её, например, в Windows‑1251, 
она будет занимать 26 килобайтов (убедитесь сами). Кстати, сравнивая страницы, посмотрите, насколько легче читается код в UTF‑8.

Рассуждая о «весе» веб‑страниц, следует отметить, что основную часть 
этого веса обычно составляет не код HTML, а изображения. (А также, 
возможно, другие объекты: ролики Flash, файлы JavaScript и т. д.) В 
результате даже в тех случаях, когда документ в UTF‑8 увеличивается — 
это практически незаметно в общем объёме данных. По‑моему, «разбухание» 
кода на несколько процентов — недорогая цена за главное преимущество UTF‑8, с которого мы начали.

Тем, кто заботится о «весе», следовало бы в первую очередь выкинуть из кода устаревшие атрибуты HTML (вроде cellpadding или valign) и подстановки для тех символов, которым они не нужны (например, &mdash; для длинного тире или &nbsp;
 для неразрывного пробела). Действительно, иногда доходит до маразма — 
некто упирается: «Не буду делать страницы в UTF‑8, потому что они от 
этого увеличиваются» — а сам при этом ваяет код с жуткими атрибутами и 
подстановками, который без них мог бы быть в пять раз короче.

Серверные языки программирования и базы данных плохо поддерживают UTF‑8?

Кто‑то скажет: «Всё это хорошо, пока мы имеем дело со статичными 
веб‑страницами. Но если мы пользуемся PHP и MySQL, про UTF‑8 лучше 
забыть». Это тоже неправда. В древности, действительно, некоторые языки 
программирования и системы управления базами данных не умели работать с 
UTF‑8. Но сейчас все современные языки программирования и базы данных 
находятся в прекрасных отношениях с этой кодировкой. А несовременными 
языками и базами пользоваться не стóит: чем древнее ваши системы, тем 
проще их взломать.

На моём персональном сайте 
можно видеть результаты работы программы на PHP 4, которая расставляет 
переносы в словах. Она получает на вход текст в UTF‑8 и выдаёт тот же 
текст в UTF‑8, но с переносами. Между прочим, исходный код самóй 
программы также представлен в UTF‑8.

Могу ещё продемонстрировать любительский сценарий на Perl,
 который считает количество вертикальных штрихов в буквах текста. 
Запуская этот сценарий, ему в качестве параметра надо передать текстовый
 файл в кодировке UTF‑8, например: palki.pl file.txt. Опять же, сам сценарий тоже представлен в UTF‑8.

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

Поисковые системы плохо работают с UTF‑8?

Ещё приходится слышать, будто поисковые системы «спотыкаются» об 
UTF‑8. Эти сведения, опять же, устарели лет на восемь. Вот вам, 
например, поисковая система «Яндекс»:

 

Убедитесь, что она прекрасно находит всё, что угодно, на моём персональном сайте, где, между прочим, её работу «осложняет» не только UTF‑8, но и переносы в словах.

Таким образом, не существует никаких противопоказаний к широкому 
применению UTF‑8. Те, кто считает по‑другому, просто отстали от жизни.

Когда UTF‑8 не надо использовать

Конечно, бывают случаи, когда самую лучшую кодировку UTF‑8 
использовать всё‑таки нежелательно. Хотя это вовсе не те ситуации, 
которыми пугают адепты вышеразвенчанных мифов.

Во‑первых, иногда нам требуется не создавать новый документ, а внести
 изменения в уже существующий. Обычно в таких случаях нет смысла 
преобразовывать имеющийся документ в кодировку UTF‑8, поэтому приходится
 редактировать его в той кодировке, в которой он представлен.

Во‑вторых, иногда работу сайта обеспечивает программное ядро (так 
называемый «движок»), которое не умеет работать с UTF‑8. В такой 
ситуации, конечно, следует задуматься, нет ли возможности подправить 
«движок» или заменить его на другой. Но это не всегда удаётся. Некоторые
 программные ядра обеспечивают функциональные достоинства, ради которых 
можно смириться с устаревшей кодировкой.

Как работать с UTF‑8

В качестве «недостатков» UTF‑8 упоминают и тот факт, что с ней сложно
 работать — мол, не все текстовые редакторы её поддерживают. Ну так 
пользуйтесь хорошим редактором, у которого нет проблем с современными 
кодировками. Кодировку UTF‑8 понимают все нынешние редакторы — от 
стандартного «Блокнота» в Windows до Dreamweaver’а. (Сам я, кстати, 
пользуюсь EmEditor’ом, и этот сайт сделан именно его средствами.)

Надеюсь, что дальнейшие рекомендации будут вам полезны при работе с UTF‑8.

Отключайте BOM

При сохранении файла многие текстовые редакторы предлагают флажок 
«Include Unicode Signature (BOM)», «Add Byte Order Mark» или нечто 
подобное. Прежде всего убедитесь, что в вашем редакторе это есть. Если 
похожей настройки не обнаружено (как, например, в «Блокноте») — 
пользоваться таким редактором для серьёзных задач не стóит. Найдя этот 
флажок — отключите его.

Byte Order Mark (BOM) — это три служебных 
байта, которые автоматически записываются в начало документа и 
обозначают, что он сохранён в кодировке UTF. Подробности можно прочитать
 в справочнике, а практическая сторона заключается в том, что эти служебные байты в UTF‑8 не являются необходимыми, зато, наоборот, могут ввести в заблуждение некоторые старые браузеры и другие программы.

Настройте простые сочетания клавиш для специальных символов

Если за каждой кавычкой, тире или неразрывным пробелом лезть в 
«Таблицу символов» — можно до старости провозиться с одним‑единственным 
документом. Для наиболее распространённых специальных символов 
рекомендуется настроить сочетания клавиш, что обеспечит любой хороший 
редактор. Например, я наладил EmEditor так, что по нажатию Ctrl↓ -↓ ↑↑ в документе появляется длинное тире, а по нажатию Ctrl↓ пробел↓
 ↑↑ — неразрывный пробел. Таких сочетаний клавиш у меня около 20, и они 
позволяют вводить наиболее полезные специальные символы так же просто, 
как обычные буквы и знаки препинания.

Конечно, когда мне требуется редко используемый символ — буква «юс», рожица или иероглиф,— я обращаюсь к «Таблице символов».

Указывайте кодировку везде, где требуется

Убедитесь, что веб‑сервер сообщает правильную кодировку страниц. Если
 это не так — обратитесь к администратору сервера или прочтите 
справочные материалы о том, как настроить кодировку.

Встречаются службы размещения сайтов (хостинги), которые «намертво 
привязаны» к какой‑либо одной кодировке и не позволяют хозяевам сайтов 
пользоваться другими кодировками. С такими хостингами связываться не 
стóит. В какой кодировке делать страницы — должен решать разработчик 
сайта, а не служба его размещения.

В коде HTML часто имеет смысл использовать элемент meta:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

Не забывайте о шрифтах

Какой бы кодировкой вы ни пользовались, надо помнить, что браузеры 
отображают только те символы, которые есть в установленных на компьютере
 шрифтах. «Таблица символов» показывает именно их. Перечень стандартных шрифтов Windows размещён в разделе «Справочники».

В Unicode можно найти немало других символов — например, руны (,  и пр.), буквы глаголицы (,  и пр.), разнообразные значки и пиктограммы (, , 
 и пр.). Но вставить их в документ не получится: у подавляющего 
большинства пользователей нет шрифтов, в которых присутствовали бы эти 
знаки. Тут даже UTF‑8, при всех её достоинствах, помочь не в силах. 
Приходится размещать такие символы в виде растровых изображений (как 
сделано здесь) или искать другие обходные пути.

Многие другие «экзотические» символы обычно доступны на компьютерах 
пользователей, но браузеру приходится помогать найти нужный шрифт. 
Например, чтобы отобразить старославянские буквы (Ѣ, Ѭ и пр.) или математические знаки (∉, ∀ и пр.) — я указываю в CSS шрифт «Lucida Sans Unicode».

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

Главное преимущество UTF‑8 — не в волшебном расширении набора символов, а в простом способе их включения в документ.

Смотрите в будущее

Если вы знакомы с Unicode, то, возможно, поинтересуетесь, почему я 
советую именно UTF‑8, а не другие современные кодировки — скажем, UTF‑16
 или UTF‑32. Отвечаю: они обеспечивают то же главное преимущество,
 что и UTF‑8, но обладают и рядом недостатков. Во‑первых, они, в отличие
 от UTF‑8, действительно заметно увеличивают «вес» файлов. Во‑вторых, с 
ними в некоторых используемых ныне браузерах ещё возникают проблемы.

Кстати, Консорциум W3C рекомендует использовать для веб-страниц именно UTF‑8.

Однако не забывайте о том, что мир постоянно меняется. 
Возможно, в будущем возникнут причины, которые заставят нас отказаться 
от UTF‑8 и перейти на какую‑то ещё более совершенную кодировку. Когда 
это случится, я обязательно вам сообщу.