Архив за Апрель, 2010

Второй месяц без постоянной работы занимаюсь фрилансом. В приципе, первым месяцем(с 12.03 по 12.04) я доволен. Заработал даже чуть больше, чем ожидал.

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

Так ничего за сегодня и не заработал. С другой стороны, постоянно появляются всякие-разные знакомства, интересные и не очень, и опыт. Думаю со временем это все приведет к более-менее постоянному притоку заказов и, соответственно, денешкоф А там, глядишь, и шестеренки ЮТекАльянса нашего закрутятся. Да, Руслан? )) Все, я смотреть Хауза.

Верстка простого макета с картинками – 3. Графика и CSS.

15.04.2010

Опубликовано в Блог | НЕТ КОММЕНТАРИЕВ

Да, кстати, я ж обещал третью часть. Правда, настроение не для творчества. Пытался в образовательно-корыстных целях написать парсер Я.маркета. Пол-дня потратил на вспоминание принципов работы с потоками в питоне и возню с побаненными и нерабочими прокси. Пока толком ничего не вышло. Надо затариться нормальными проксиками и разбираться с urllib2. Итак, нам осталось подготовить графику и стили.

Займемся подготовкой графики для нашего будущего шаблона. Удобнее всего , на мой взгляд, это делается с помощью инструмента Slice в Adobe Photoshop. Аккуратно обведите нужные области макета этим инструментом. Для удобства вы можете включать и выключать «прилипание» курсора к границам слоев и другим объектам с помощью функции Snap из меню View:

Вот так у меня выглядит макет после нарезки:

Когда закончите, переходите к сохранению картинок. В меню File выберите пункт Save for Web & Devices и щелкните мышью. В появившемся окне вы можете поочередно выбрать каждую часть макета и задать для нее формат сохранения и прочие параметры. Обратите внимание на то, что сохранение небольших фрагментов в формате PNG зачастую дает меньший размер файла, чем GIF или JPG. Но помните, что использование этого формата с прозрачностью создает уйму проблем в самом «любимом» браузере всех верстальщиков Internet Explorer. В 6 и 8 его версиях. В 7 я проблем пока не наблюдал.

О css подробно рассказывать не буду, дам лишь несколько ссылок на использованные техники:

Выстраиваем блочные элементы в ряд с помощью float
DD_belatedPNG – по-моему лучшее лекарство для отображения PNG с прозрачностью в IE6
Центрирование блоков через margin:auto
Условные комментарии в Internet Explorer
Таблица «безопасных» шрифтов для различных платформ

На этом пост прошу считать законченным. Полный архив с версткой можно скачать здесь.
Если вдруг по каким-то причинам эти 3 поста все-таки кого-то заинтересовали, задавайте вопросы, буду рад ответить. Полностью все правда лень разжевывать и настроения сейчас нет…

Верстка простого макета с картинками – 2. HTML.

14.04.2010

Опубликовано в Блог | 8 КОММЕНТАРИЕВ

Итак, вернемся к нашему макету. Мы уже разбили его на блоки и создали базовый HTML-документ. Первым делом давайте создадим внутри тега
<div id=»bodywrap»>
эти блоки. Вот, что у меня получилось:

<div id="header"> </div> <div id="greeting"> </div> <div id="content"> </div> <div id="advantages" class="autowrap"> </div> <div id="footer"> </div>

Теперь можно переходить к более детальной разметке. Так как макет простой, я опишу только те моменты, на которые стоит обратить внимание:

Не стоит лепить везде одни дивы. Старайтесь использовать теги по назначению: заголовки для заголовков, ссылки — для ссылок, списки – для списков. Это поспособствует не только лучшей индексации сайта поисковиками, но и удобству пользования сайтом при отключенных стилях или на нестандартных устройствах для людей с ограниченными способностями.
Следите за валидностью документа (http://validator.w3.org/), это позволит минимизировать вероятность того, что в какой-нибудь очередной версии браузера ваш сайт развалится на куски.
Используйте «правильный» редактор. С поддержкой фолдинга, автоотступов и дополнения. Это значительно ускорит вашу работу и сэкономит кучу нервов. Например, Notepad++, Scite или Vim(Warning! Этот редактор расчитан больше на маньков вроде вакера, к нему нелегко будет привыкнуть, но потом вы вряд ли захотите на что-то его менять

Окончательный вариант HTML — страницы выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> 

</head>
<body>
<div id=»bodywrap»>
<div id=»header»>
<h1><a href=»/»><img src=»img/logo.gif» alt=»Orange» /></a></h1>
<ul class=»menu»>
<li class=»current»><a href=»#»><img src=»img/home.gif» alt=»Home» /></a></li>
<li><a href=»#»><img src=»img/services.gif» alt=»Services» /></a></li>
<li><a href=»#»><img src=»img/about.gif» alt=»About» /></a></li>
<li><a href=»#»><img src=»img/Contact.gif» alt=»Contact» /></a></li>
</ul>
</div>
<div id=»greeting»>
<div class=»img»>
<img src=»img/greeting_img.png» alt=»" />
</div>
<div class=»text»>
<h2><img src=»img/greeting_title.png» alt=»your title goes here. amet, consectetur, condimentum purus nec» /></h2>
<i>Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus. Sed nisi leo, commodo non, pharetra sit amet, consequat ut, nunc.<br/>Sed nisi leo, commodo non, pharetra sit amet, consequat ut, nunc.</i>
</div>
</div>
<div id=»content»>
<h3>Welcome to our website!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc. Sed mattis, erat sit amet vehicula consectetur, purus pede consectetur quam, non tempor orci ligula ac mauris. Vestibulum lacus erat, egestas vel, posuere sit amet, molestie eget, ipsum. Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc. Sed mattis, erat sit amet vehicula consectetur, purus pede consectetur quam, non tempor orci ligula ac mauris. Vestibulum lacus erat, egestas vel, posuere sit amet, molestie eget, ipsum. Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus.</p>
</div>
<div id=»advantages» class=»autowrap»>
<div class=»reviews»>
<h2>Customer Review</h2>
<ul>
<li>
<b>Alex</b> says:
<q>»Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc.»</q>
</li>
<li>
<b>John</b> says:
<q>»Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc.»</q>
</li>
</ul>
</div>
<div class=»features»>
<h2>Features</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
</ul>
</div>
<div class=»prices»>
<h2>Prices</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
</ul>
</div>
</div>
<div id=»footer»>
<div class=»copyright»>
<img src=»img/logo_footer.gif» alt=»Orange» /> © 2009 — PSDTemplate.com. All rights reserved.
</div>
<div class=»rss»><a href=»#»><img src=»img/rss.gif» alt=»" /> RSS</a></div>
</div>
</div>
</body>
</html>

Следующий пост появится завтра и будет посвящен нарезке графики и немного о CSS.

P. S.: Чето я уже начинаю жалеть, что затеял эту серию постов… Хреновый из меня учитель Лень разжевывать все. А кто-то ж целые книги пишет…

Верстка простого макета с картинками :)

13.04.2010

Опубликовано в Блог | НЕТ КОММЕНТАРИЕВ

Здравствуйте! Сегодня я покажу, как происходит превращение несложного PSD-макета в HTML-документ с CSS-стилями. Короче, о верстке.

Для начала возьмем простенький макет с сайта PSD Template.com.

Именно его вы видите на скриншоте.

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

Начнем создавать разметку для нашей страницы. Моя заготовка для нового проекта выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bodywrap"> </div> </body> </html>

Как вы могли заметить, здесь используется DOCTYPE XHTML 1.0 Strict. Далее идет тайтл, объявление кодировки документа и ссылка на файл стилей (css/style.css). Внутри body я первым делом располагаю див bodywrap. Он «оборачивает» все содержимое документа и в данном случае будет служить для центрирования страницы, но об этом позже.

Пока все. Новая серия Спартака уже почти скачана и требует просмотра В следующем посте мы займемся созданием остальной части HTML-разметки.