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

<span style="color:blue">

, когда хотят расскасить текст в синий цвет и искренне считают, что эта запись чем-то лучше, чем

<font color="blue">

, наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.

Добрый день смотрим сразу как это работает:



Zen Coding
chikuyonok — Сергей Чикуёнок
pepelsbey — Вадим Макеев

Этот способ ускоренного написания HTML и CSS кода разрабатывается Сергеем Чикуёнком, который «знает толк в извращениях».

HTML код пишется на CSS манеру:
div#content>h1+p

Нажимаем нехитрое комбо на клавиатуре (Ctrl+,) и получаем результат:
<div id="content">
    <h1></h1>
    <p></p>
</div>

Перевод статьи молодого греческого программиста «Why I bill hourly»

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

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

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

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

Под хабракатом я расскажу вам, как при помощи нескольких простых действий получить себе практически бесплатный VPN в штатах:

В HTML5 есть замечательный атрибут placeholder.

<input placeholder="inbox@disney.com">

Сейчас он работает только в webkit-браузерах (Safari, Google Chrome).

С помощью JS, не изобретая велосипедов, placeholder.js делает этот атрибут кроссбраузерным.

<input placeholder="inbox@disney.com" id="some_input">
<script type="text/javascript">
  inputPlaceholder( document.getElementById('some_input') )
</script>

placeholder.js (1.3 килобайта)

Всем привет, давайте знакомиться.

Мы – Kebrum, сейшельская компания с русскими мозгами. Наш профиль – анонимность и безопасность в интернете, на данный момент мы запустили VPN сервис и не собираемся останавливаться на этом. Сначала расскажу коротко о сервисе для тех, кто не участвовал в бета-тестировании, а потом пару прохладных историй, как это полагается на Хабре.

О скруглении углов в html-верстке сказано уже столько, что я пойму тех кто прочитав заголовок иронично улыбнется и подумает «опять 25, ну сколько можно...». Поэтому я постараюсь кратко изложить суть, и сразу предупрежу, что этот метод вы едва ли могли видеть раньше.

Вышел DeaDBeeF 0.4.2

Любители foobar2000 и deadbeef, радуйтесь! Вышла новая версия этого прекрасного плеера. Внешне ничем не примечательный плеер (хотя я предпочитаю такую лаконичность) воспроизводит огромнейшее количество форматов, включая CUE разметки, которые под Linux поддерживают единицы плееров и то ужасно.
Быстрый, лёгкий, беспроблемный и просто приятный плеер от отечественного разработчика.

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

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)

Вашему вниманию предлагается небольшая по объему книга (можно называть это брошюрой), посвященная XSLT и его использованию в качестве языка шаблонизатора при создании сайтов на UMI.CMS.

Это не реклама «еще одной cms», и «еще одного шаблонизатора», а лишь предложение познакомиться с одним из подходов к использованию технологии XSLT при создании сайтов, где в качестве системы управлением контента взята UMI.CMS.

Думаю ни для кого не секрет что в линуксе великое множество разнообразных музыкальных плееров на любой вкус — Rhytmbox, Exaile, Banshee, DeadBeef, Decibel, Clementine, Amarok, XNoise, QMMP, Audacious, Minitunes, gMusicbrowser, MPD(Sonata...) итд. Все они имеют как преимущества так и недостатки, многие поддерживают плагины для расширения функционала, некоторые умеют использовать скины — казалось бы что совсем не проблема найти то что полностью устроит именно тебя. Но пробовав их все лично я так и не смог остановить свой выбор на одном, нужные мне функции были в разных плеерах. Вот так и пользовался я сразу 3 плеерами:

• QMMP — для быстрого и удобного проигрывания локальной музыки по каталогам
• Exaile — для проигрывания музыкальной коллекции и музыки с вКонтакта
• prostopleer.com — в основном для прослушивания популярных треков с радиостанций(TOP100 песен из 60 радио) в онлайне, иногда скачивая нужные треки себе.

Естественно было не очень удобно и тут случилось чудо — вчера совершенно случайно наткнулся на пост о плеере Foobnix, сначала подумал что это очередной велосипед и даже не хотел пробовать, но все же прочитал описание на сайте, потом поставил и не пожалел. Очень обрадовало то что разработчик русский и довольно активно дорабатывает плеер. На текущий момент последняя версия плеера всего 0.2.0 — но он уже достаточно много умеет.

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

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

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

Любовь к HTML5 продолжает вдохновлять Поля Айриша. Во-первых, он подарил нам Modernizr, а сейчас он объединился с Divya Manian для создания шаблона HTML5, который использует передовые техники, чтобы Вы могли начать использовать его в своей практике.

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

1. Верстка, аутсорсинг и технические задания

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

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

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

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

Помните ли, как (много лет подряд) был известен проект IE7-JS (автор — Dean Edwards), нацеленный на подтягивание Internet Explorer 6 (а затем и Internet Explorer 7) до уровня современных браузеров?

Теперь другой разработчик развил эту идею. В последнее время появляются ведь и такие свойства CSS3, которые поддерживает только один современный движок (например, WebKit), или даже не поддерживает ни один (потому что все движки требуют к этому свойству своих префиксов: «-moz-», «-ms-», «-o-», «-webkit-» — а иначе не работают). Все браузеры нуждаются в костылях (более или менее основательных) для поддержки CSS3.

Библиотека eCSStender (автор — Aaron Gustafson) претендует на роль основы именно такого костыля. Я говорю «основы», так как сама по себе она предоставляет лишь небольшую (≈20 Kb JS) платформу, занимающуюся анализом CSS-стилей — а поддержкою конкретных CSS-свойств должны заниматься (работая поверх неё) отдельные расширения, написанные в соответствии с документацией. Сейчас есть ужé с полдюжины расширений, из которых половина — костыли для IE.

Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.

Наконец-то и я решился… Все новые проекты отныне будут иметь спец-страницу для Internet Explorer 6.

Изучив аналогичные решения в Интернете, решил создать свою страничку. Русский текст наскреб понемногу с разных проектов и отредактировал на свой вкус. Дизайн осознанно и намерено использовал майкрософтовский, чтобы хоть как-то повысить планку доверия для тех несчастных, что до сих пор сидят на IE6. Надеюсь, меня за это не осудят, тем более сделано это исключительно для многострадальных клиентов Майкрософта.

Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

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