Как сложить коробку для пиццы 
107 лет Великой Октябрьской социалистической революции 
Как они воевали (4) 
Глава директората EECAD, Форин-офис и его зам прилетели в Москву с вопросом: 
Новые 5000 рублей 
Утро в Скандинавии... завершение зарисовок 
III поросёнка, новогодняя сказка из 90-ых 
Пленные латыши 
183 километр, БМО Возможности современных полиграфических предприятий не ограничены распечатывание готовых макетов. Процесс сотрудничества предоставляет намного больше возможностей, что позволяет решать большой спектр задач. Благодаря комплексному подходу удаётся не просто воплотить проект на бумаге, а ...
30 хороших рекомендаций при работе с HTML
spacesite_ru — 23.06.2010
1. Всегда закрывайте тэги
Не так давно совершенно нормально было видеть что-то вроде следующего:
<li>Какой-то текст. <li>Еще какой-то текст. <li>Ну вы поняли идею.
Заметьте, что опущены тэги ul/ol. Кроме того, многие оставляют незакрытыми также и тэги li. В соответствии с современными стандартами такое написание - плохая практика и ее стоит избегать. Всегда, всегда закрывайте ваши тэги. В противном случае вы на каждом шагу будете сталкиваться с ошибками валидации.
Лучше:
<ul> <li>Какой-то текст.</li> <li>Еще какой-то текст.</li> <li>Ну вы поняли идею.</li> </ul>
2: Объявляйте корректный тип документа (DocType)
Когда я был несколько моложе, я участвовал в обсуждениях на форумах, посвященных CSS. Если у какого-либо участника возникала проблема, прежде чем рассматривать его ситуацию, ему необходимо было:
1. Произвести валидацию CSS-файла. Исправить ошибки, если
таковые имелись
2. Добавить объявление типа документа
(DocType)
"DOCTYPE идет до открывающего тэга html в самом верху страницы и сообщает браузеру о том, содержит ли страница HTML, XHTML, либо смесь данных разметок для того, чтобы браузер мог корректно интерпретировать разметку страницы"
Большинство из нас выбирают из 4 типов при создании страниц:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...l.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...t.dtd">
Ведутся жаркие дебаты относительно того, что использовать предпочтительнее. С одной стороны, считается наилучшим вариантом использовать версию XHTML Strict. Однако, после некоторых исследований было выяснено, что большинство браузеров "откатываются" назад, к обычному HTML при интерпретации разметки. В связи с этим многие сделали выбор в пользу HTML 4.01 Strict. Основная же идея в том, что выбор любого из данных типов будет держать вас в определенных рамках. Проведите свое решение и определитесь с выбором.
3. Никогда не используйте встроенные стили
Когда вы устали от работы над разметкой, иногда возникает соблазн пойти простым путем и добавить немного встроенных стилей:
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice!</p>
Согласен - выглядит довольно безобидно. Однако это индикатор того, что вы нарушаете хороший тон при кодировании.
Когда вы создаете разметку страницы, ни в коем случае не думайте о стилевом оформлении. Начинайте добавлять стили только после того, как полностью закончите со структурой страницы.
#someElement > p { color: red; }
Еще очень важный совет - всегда занимайтесь раскруткой сайта в поисковых системах Яндекс и Google. Если у вас возникают проблемы с раскруткой заходите на наш форум про seo - там вы найдете всю информацию необходимую сео-оптимизатору
4. Помещайте все внешние файлы CSS в пределах тэга head
С техничеcкой точки зрения стилевые файлы могут быть подключены в любом месте документа. Однако, спецификация HTML рекомендует делать это в пределах тэга head. Основной выигрыш от этого - более быстрая загрузка страницы.
"Во время исследований в Yahoo! мы обнаружили, что перемещение стилевых файлов в секцию head HTML-документа позволяет ему загружаться быстрее. Это происходит потому, что в этом случае страница отрисовывается постепенно." - ySlow Team
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
5. Размещайте скрипты Javascript в конце страницы
Держите в голове главную цель - заставить страницу загружаться как можно быстрее. При загрузке скрипта браузер не может продвигаться дальше, пока файл не будет загружен целиком. Следовательно, посетителю придется ждать дольше, пока он сможет увидеть страницу на экране.
Если у вас есть JS-файлы, чье единственное предназначение - добавление определенного функционала - скажем, при нажатии какой-либо кнопки и т.п. - будьте мудрее и размещайте такие скрипты внизу страницы, прямо перед закрывающим тэгом body. В данном случае это лучшее решение.
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
6. Никогда не используйте встроенный Javascript
Другой типичной практикой не так давно было размещение JS-команд непосредственно внутри тэгов. Это часто встречалось в простых галереях фотографий. По сути атрибут onclick применятся к тэгу. Стоит ли говорить, что вы никогда не должны поступать подобным образом. Вместо этого вынесите этот код во внешний JS-файл, и используйте addEventListener/attachEvent для "прослушки" желаемого события. Или, если вы используете фреймворк jQuery, просто используйте метод click.
$('a#moreCornInfoLink').click(function() { alert('Want to learn more about corn?'); });
7. Постоянно проводите валидацию
Идея валидации неверно истолковывается теми, кто не понимает ее значения. На самом же деле валидация должна работать на вас, а не против вас.
Новичкам я рекомендую использовать аддон Web Developer Toolbar для Firefox, постоянно выбирая опции Validate HTML и Validate CSS. Несмотря на то, что CSS не очень сложен в освоении, он тоже в состоянии заставить вас рвать себе волосы на голове. Как вы увидите, во многих случаях корявое отображение страницы - следствие неверной разметки. Проверяйте, проверяйте, проверяйте.
8. Скачайте Firebug
Firebug - несомненно, лучший плагин, который вы можете использовать при создании веб-сайтов. Он не только позволяет производить отладку Javascript, вы также узнаете о том, откуда наследуются те странные отступы, о которых вы не подумали.
9. Используйте Firebug!
По своему опыту скажу, что большинство людей используют не более 20% возможностей Firebug. Вы просто-таки оказываете себе медвежью услугу. Не пожалейте пару часов, чтобы порыскать по сети и найти подробное описание функционала этого аддона.
10. Пишите тэги в нижнем регистре
Теоретически, вы можете писать все в верхнем регистре.
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
Но пожалуйста, не делайте этого. Это никуда не годится, и от этого болят глаза, не говоря уже о том, что это напоминает о функции html в Microsoft Word!
Лучше:
<div> <p>Here's an interesting fact about corn. </p> </div>
11. Используйте тэги H1 – H6
Примечательно, что именно в этом вопросе я даю слабину. Лучше всего использовать все шесть тэгов. Я же, если честно, использую не больше 4; но я работаю над этим!:) По семантическим причинам и в связи с SEO, заставляйте себя использовать H6 вместо p там, где это уместно.
<h1>This is a really important corn fact! </h1> <h6>Small, but still significant corn fact goes here. </h6>
12. Оставляйте тэг H1 для названия страницы
Как всегда, определите, что приоритетнее для вашего сайта. Однако, по моему мнению, следует оставлять тэг H1 для заголовка статьи. Особенно актуально это с точки зрения поисковой оптимизации.
13. Скачайте ySlow
Команда Yahoo выпустила расширение для Firebug под названием ySlow. Когда оно активировано, происходит анализ сайта и выдается своеобразный отчет о том, какие части вашего сайта требуют улучшения. Рекомендации могут быть жестковаты, но это все для вашего же блага. Искренне рекомендую.
14. Заключайте навигацию в ненумерованный список
Каждый вебсайт имеет навигацию какого-либо рода. Можно, конечно обойтись чем-то вроде:
<div id="nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </div>
Но я не советую использовать такой метод в связи с семантическими причинами. Наша задача - написать код настолько хорошо, насколько это возможно.
Пусть в тэге ul содержится список элементов:
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15. Научитесь дружить с IE
Несомненно, на каком-то этапе разработки вы обнаружите, что вы вне себя от ярости при попытке добиться нужного отображения в IE. Это реальная проблема веб-разработчиков. Когда в Twitter я читаю о том, как мой приятель борется с Internet Explorer, я улыбаюсь и думаю, "я тебя понимаю, дружище".
Первое, что вам нужно сделать после того, как вы завершили работу над первичным CSS-файлом - это создать новый CSS-файл ie.css. После этого вы сможете подключать его только в том случае, когда это необходимо при помощи следующего кода:
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
Код гласит: "Если браузер пользователя - Internet Explorer 6 или ниже, импортируй файл стилей. В противном случае, не делай ничего." Если вам нужно включить в эту группу еще и IE7, просто замените lt (less than - больше, чем) на lte (less than оr equal to - больше, чем или равен).
16. Выберите отличный редактор кода
Работаете ли вы на Windows или на Mac, вы всегда можете найти множество классных редакторов кода, которые придутся по душе именно вам. Для примера приведу список некоторых из программ, которыми вы можете воспользоваться.
Для любителей Mac:
- Coda
- Espresso
- TextMate
- Aptana
- DreamWeaver CS4
Для поклонников PC:
- Notepad++
- Aptana
- PHP Designer
- PSPad
- Dreamweaver CS4
17. Сайт готов? - Сжимаем!
Сжимая ваши CSS и Javascript файлы, вы можете уменьшить их размер примерно на 25%. Не думайте об этом во время разработки. Однако, когда ваш сайт уже почти готов, используйте онлайн-сервисы для сжатия файлов.
Сервисы сжатия java script:
- Javascript Compressor
- JS
Compressor
Сервисы сжатия CSS-файлов:
- CSS Optimiser
- CSS Compressor
- Clean CSS
18. Отсекайте лишнее!
Вспоминая свой первый вебсайт, я не могу не удивляться. У нас, должно быть, есть природный инстинкт безопасного обертывания каждого параграфа в блок div, после чего, "для верности" этот div помещается в еще один контейнер div. Как вы уже поняли, это чрезвычайно неэффективно.
"Когда вы завершили работу над разметкой страницы, пройдитесь по ней еще пару раз и найдите способы уменьшить количество элементов на странице. Действительно ли необходимо заключать тот список в элемент div? Полагаю, что нет."
19. Всем картинкам нужны атрибуты alt
Очень легко проигнорировать использование атрибута alt для тэга img. Однако, его использование очень важно, как со стороны юзабилити, так и в силу корректного прохождения валидации.
Плохо:
<IMG SRC="cornImage.jpg" />
Лучше:
<img src="cornImage.jpg" alt="A corn field I visited." />
20. Допозна...
Если вы не раз замечали, что во время работы или обучения кромешная тьма за окном сменялась первыми лучами рассвета, то вы выбрали для себя правильное поле деятельности.
Восхитительное чувство "Эврика!" приходит, как правило, поздней ночью. Это - невероятное ощущение, которое нужно испытать, если с вами этого еще не происходило.
21. Изучайте исходный код
Есть ли лучший способ изучения HTML, чем копирование наших героев? Изначально мы все - копипастеры. Затем, постепенно, вы начинаете вырабатывать свой стиль, свои методы. Так что посещайте те вебсайты, которые вызывают у вас уважение. Как они сделали это, как они реализовали то? Учитесь и переносите их код себе. Все мы так делали, и вам следует поступить так же. Важно понимать: вы учитесь создавать структуру страницы, но ни в коем случае не воровать дизайн!
Заметили интересный эффект на Javascript, который вы хотите применить? Скорее всего, здесь используется какой-то плагин. Посмотрите исходный код страницы, секцию head и найдите имя подключаемого файла. Затем - Google и встраивание скрипта в ваш сайт. Примерно так!
22. Применяйте стили ко всем элементам
Этот совет особенно актуален в случае, если вы работаете по заказам. То, что вы не используете тэг blockquote не означает, что ваш клиент тоже этого не делает. Не используете нумерованные списки? - Опять же, не факт, что клиент не делает этого! Окажите себе услугу - создайте специальную страницу, чтобы наглядно продемонстрировать красивое стилевое оформление для каждого существующего элемента: ul, ol, p, h1-h6, blockquotes и т.д.
23. Используйте Twitter
В последнее время едва ли можно скрыться от повсеместного упоминания Twitter даже по телевизору. У меня нет желания слушать то, как Larry King рекламирует свой аккаунт на Twitter - который, как нетрудно догадаться, никогда им самим не обновляется. Браво помощникам! А сколько еще людей завели свои аккаунты, узнав о том, что его кумир теперь на Twitter? Потенциал данного сервиса велик.
Изначально, идея Twitter состояла в том, чтобы писать то, "что я сейчас делаю". Хотя такое применение все еще сохраняется, Twitter получил несколько другое развитие в сети. Если веб-разработчик, которым я восхищаюсь, размещает ссылку на статью, которую он счел для себя полезной, вы не должны удивиться тому, что я также захочу ее изучить, да и вы тоже!
24. Освойте Фотошоп
Как только вы изучите HTML и CSS, я бы рекомендовал вам взяться за обучение Adobe Photoshop.
1. Изучите серию "Вы ноль в Фотошоп"
2. Потратьте несколько часов на то, чтобы освоить как можно больше
горячих клавиш в Photoshop.
25. Знайте каждый HTML тэг
Есть много HTML-тэгов, с которыми вы практически не будете встречаться. Тем не менее, это не означает, что вам не нужно их знать! Вы знакомы с тэгом abbr? Как насчет cite? Эти два тэга также имеют полное право занять свое место в вашем наборе инструментов. Изучите их все!
Кстати, если вы не знакомы с двумя вышеназванными тэгами:
- abbr делает как раз то, что вы и ожидали. Он обозначает аббревиатуру. "Blvd" может быть заключен в тэг abbr, так как это сокращение от слова "boulevard" (бульвар).
- cite используется в тех случаях, когда нужно сослаться на название какой-либо работы. Например, если вы ссылаетесь на эту статью со своего блога, вы можете заключить название "30 хороших рекомендаций при работе с HTML" в тэг cite. Заметьте, что его не следует использовать для ссылки на автора цитаты. Это распространенное заблуждение.
26. Участвуйте в тематических сообществах
Вы должны стараться внести свой вклад в развитие знаний о веб-разработке. Наконец-то разобрались, как сделать правильное обтекание элементов? Опубликуйте пост - поделитесь своим опытом! Всегда есть люди, у которых меньше опыта, чем у вас. Не только вы будете отдавать что-то другим - вы сами будете повышать свой уровень. Замечали когда-нибудь, что полное понимание чего-то приходит только после того, как объяснишь это "что-то" кому-то другому?
27. Используйте "обнуление" CSS
Еще одна тема, где разгорались дебаты не на жизнь, а на смерть. "CSS-обнуляторы": использовать, или не использовать, вот в чем вопрос. Что касается моего личного мнения, то я на все 100% рекомендую вам создать такой файл-обнулятор. Начните с использования какого-либо уже существующего популярного варианта, вроде предложенного Eric Meyer и, затем, постепенно, в процессе обучения, доводите его под свои нужды. Если вы не сделаете этого, вы не сможете понять, откуда же у вас появился тот дополнительный отступ у элементов списка, хотя вы ничего не задавали в CSS-файле. Сэкономьте себе нервные клетки и обнулите все! Следующий пример можно взять за основу.
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
28. Всех в ряд!
Говоря в общем, стремитесь выравнивать элементы настолько хорошо, насколько это возможно. Посмотрите на те дизайны, которые вам нравятся. Обратите внимание на то, как любой заголовок, параграф, иконка, логотип и т.д. гармонируют с остальными элементами на странице. Отсутствие этого - один из основных признаков работы новичка.
Думайте об этом в следующем ключе: Если я спрошу вас, почему вы поместили элемент в это место, вы должны привести мне в ответ вразумительную причину.
29. Нарежьте PSD
Отлично, после получения твердых знаний в HTML, CSS и Фотошопе можно приступать к превращению PSD-макета в реальный сайт. Не беспокойтесь, это не настолько сложно, как можно подумать. Лучшего способа проверить ваши умения и не придумать. Если вам нужна помощь, изучите следующие видео, в которых данная процедура показана полностью:
- Slice and Dice that PSD
- From PSD to HTML/CSS
30. Не используйте фреймворк... Пока
Фреймворки для Javascript и CSS - это очень хорошо. Но, пожалуйста, не используйте их, когда вы только начинаете свой путь в разработке. Хотя можно возразить, что изучение jQuery и Javascript дополняют друг друга, нельзя сказать того же о CSS-фреймворках. Я, например, использую фреймворк 960 CSS Framework. Если же вы находитесь в процессе изучения CSS, воздержитесь от использования подобных вещей - иначе вы рискуете полностью запутаться.
CSS-фреймворки создаются для опытных разработчиков, которым нужно сэкономить немного времени. Они не для новичков.
Jeffrey Way
По материалам www.net.tutsplus.com
Перевод - Дмитрий Науменко
Создание сайта | Поддержка сайтов | Контекстная реклама | Раскрутка сайта | Оптимизация сайта
Оригинал записи и комментарии на LiveInternet.ru
Оставить комментарий
Популярные посты:
Архив записей в блогах:
В центре Москвы прошел необычный митинг в защиту коррупционеров. Как пояснили блогеры, организовавшие акцию, выйти на улицу с коррупционными лозунгами их подвигла неэффективность обычных средств борьбы со взяточничеством.«Митинги с ...
Играл на выходных в пейнтбол - теперь влюблён в маркеры и шарики с краской. Всего было четыре игры - три игры в зачёт и одна девять на девять, расстреливали остатки боеприпасов. Только за первые два раунда поиграть не удалось - меня выбивали в самом ...
Своё видео на ютуб я назвал "верующий атеист" Речь в нем пойдет о следующем. Многим наверняка известно имя советского профессионального репортера, журналиста и публициста Александра Глебовича Невзорова. Что и неудивительно. Личность Александр Глебович многогранная. Был и ...
Как Трамп сегодня победил, так и ты под старость лет можешь выиграть в нашем конкурсе у какой нибудь коварной женщины, требующей пересчета голосов. Что за конкурс, такой. спросишь ты. Все просто. Каждую среду в одно и то же время я загадываю фильм и даю на него три ...
