Search
Write a publication
Pull to refresh
7
0
RE: use @reuse

User

Send message

Какие бывают META теги и зачем они нужны

Reading time7 min
Views267K

META-теги


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

META-теги имеют два возможных атрибута


— <META HTTP-EQUIV="имя" CONTENT="содержимое">
— <META NAME="имя" CONTENT="содержимое">
META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.
подробнее о META тегах

Удаляем вызовы firebug'овской консоли перед выкладкой на produciton

Reading time3 min
Views952
Предисловие

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

Сама статья:


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

За полчаса до выхода подготовил новый билд, протестировал.

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

Исследование дизайна сайтов портфолио — закономерности и современная практика

Reading time13 min
Views38K
Для этой статьи мы отобрали 55 дизайн студий и студий веб-разработки, проанализировали их сайты портфолио и определили популярные закономерности дизайнов для таких сайтов. Основной целью этого изучения было предоставление фрилансерам и дизайн студиям полезных ориентиров для создания своего собственного портфолио.

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

Анимация в Internet Explorer

Reading time2 min
Views4.2K
Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».

Пример:
<style type="text/css">
 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }
</style>

<script type="text/javascript">
 $(function(){
  $('#link-1').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '25%' });
  });
  $('#link-2').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '-25%' });
  });
 });
</script>

<div id="div-1" style="left: -25%;"></div>
<a href="#" id="link-1">Animate to 25%</a>
<a href="#" id="link-2">Animate to -25%</a>

Читать дальше →

Азбука WEB-разработчика

Reading time4 min
Views13K
Небольшой список, самых, на мой взгляд, полезных сайтов для любого WEB-разработчика, интересующегося сферой веб дизайна, верстки и программирования. Думаю каждый среди этого списка найдет для себя сайты, которые надолго войдут в его ленту RSS.

AA List Apart




A List Apart содержит лучшие советы и мнения от лидирующих умов индустрии.
Читать дальше →

Простейшая генерация odt файла из существующего

Reading time9 min
Views12K
Как-то раз передо мной стояла задача реализовать генерацию договоров для клиентов с нашего корпоративного сайта.
Сначала задача была решена просто ужасно — был заготовлен html шаблон договора, а пользователю выдавалась конвертация шаблона в pdf. Само собой это выливалось в кучу неудобств, в том числе, если требовалось что-то поменять в договоре.

Следующим решением было генерация odt документа. Это позволило редактировать документ нашим менеджерам независимо от сайта и программистов.
Полностью генерировать с нуля смысла нет. Почему бы не поработать с уже имеющимся файлом (отредактированным в OpenOffice) и просто заменить в нем необходимые элементы?

Этим мы с вами и займемся.
Читать дальше →

Список полезных инструментов для CSS разработчика

Reading time8 min
Views71K
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


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

Никогда не говорите слово …, или регистрация в 2 щелчка мышью

Reading time4 min
Views3.5K

Люди не очень любят регистрироваться. Это же нужно (в общем случае) придумать логин и пароль, зайти в свою почту, дождаться письма, открыть его, перейти по ссылке активации аккаунта, а потом еще этот логин с паролем не забыть. Но ведь уже давно есть способ, с помощью которого все эти шаги не нужны. Более того, не нужно вообще ничего вводить с клавиатуры, 2 щелчка мышью и все, человек зарегистрирован.

Читать дальше →

Сверхплавное передвижение объектов

Reading time2 min
Views7.1K
Иногда у веб-разработчиков возникает задача, которая требует плавного движения объекта по экрану. Это может быть строка загрузки, какой-то спрайт (например, машинки на клавогонках) или что-то ещё. Проблема возникает, когда сдвиг даже на одну точку кажется слишком резким и портит общее ощущение от происходящего. Как этого избежать? Использовать приёмы антиалиасинга.

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

Как это сделано?
Читать дальше →

Работаем с банковскими (рабочими) днями

Reading time1 min
Views15K
Полгода назад при разработке системы финансового учета поднялся вопрос о идентификации банковский дней. Произошло это в следующем контексте — при выставлении счета отводится некий промежуток времени (в банковских днях) по истечению которого надо трубить тревогу, если счет еще не оплачен.
Читать дальше →

Анимированные меню на jQuery [часть 2]

Reading time3 min
Views4.4K
По мотивам этого перевода.

На одном из текущих проектов мы хотели добавить эффект на иконки меню — приподнимание в момент наведения мышкой. Я поэкспериментировал, используя встроенный в jquery эффект animate, на иконках двух типов: с отражениями и с тенями.

image

Смотрим демо
Читаем далее...

Жизнь без IE6

Reading time1 min
Views1.4K
При обновлении очередного проекта решил полностью забить на IE6. Его доля сильно падает, а времени на оптимизацию под этот браузер уходит достаточно много. Сначала всё же хотел оптимизировать сидеть, но потом решил что моё время дороже. Не смотря на то, что верстаю уже давно, IE всегда преподносит что-то новое =) Да и профиль не мой немного.
Однако совесть не позволяла выгрузить простой текст типа «обновите браузер», хотелось сделать доступно и понятно. Сделал, получилось приятно, настолько приятно, что захотелось поделиться =) Владельцы IE6 принудительно видят такую картину, при попытке обратиться к любой станице сайта
image
Читать дальше →

Как правильно говорить с «трудным» клиентом

Reading time3 min
Views64K
Многим из нас время от времени попадаются «привередливые», «неадекватные» и «трудные» заказчики, партнёры, начальники, подчинённые и т.д. В этом посте я расскажу:
  • Как добиться своего в конфликтных ситуациях
  • Как вести разговор, не вызывая негативной реакции собеседника
  • Как держать конфликтную ситуацию под контролем
  • Как не допустить развития конфликта и как его устранить
Читать дальше →

17 usability tips to make your CMS rock

Reading time11 min
Views1.9K
image
К вашему вниманию перевод статьи Патрика Кеннеди о том, какой должна быть удобная система управления контентом.

Более чем вероятно, что в вашей CMS будет множество проблем с юзабилити, если вы будете использовать ее в сыром виде. Участвуя в проектах, в которых на меня было возложено внедрение таких систем — систем управления веб-сайтами, интранет-порталами и вики, я заметил, что в их пользовательских интерфейсах есть ряд ключевых областей, требующих исправления с точки зрения удобства использования.
Читать дальше →

Разница в рендере между 3.0 и 3.5. Бага или фича?

Reading time1 min
Views602
Намедни пишет мне клиент, мол, на сайте логотип уплыл. Я спрашиваю, какой браузер? FireFox, говорит. Тестирую и так и эдак — всё у меня нормально. Думаю, может у него Огненный лис 2.х, ан нет — 3.0 с чем-то. У меня установлен уже не очень свежий 3.5.

Так был обнаружен странный феномен различного рендеринга «плавающих» дивов с float и последующим позиционированием relative в Firefox 3.5 и 3.0. Разницу вы можете видеть на нижепредставленных картинках. Код один, результат разный.

image
Читать дальше →

Простой способ провести CSS-debug

Reading time1 min
Views7.1K
Болтаясь сегодня по интернету в поисках чего-нибудь интересненького, наткнулся на вот такой простой (и столь же замечательный в своей простоте) способ отыскать «неполадку» в верстке.

CSS

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }
Цвет, тип и размер обводки каждый может выбрать по вкусу.

Поддержка браузерами:


Firefox Opera Google Chrome Safari

К сожалению, в браузерах от Microsoft версий 6 и 7 (в 8-й — все окей) свойство outline не поддерживается. Для них, пожалуй, придется использовать border.

Один шаблон формы для всего проекта

Reading time6 min
Views5.3K
Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.

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

Выравнивание полей формы с помощью CSS

Reading time2 min
Views166K

Задача


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

forms_1

Читать дальше →

4 способа как создать блоки одинаковой высоты

Reading time5 min
Views232K
fourmethodsbanner
Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.
Читать дальше →

Information

Rating
Does not participate
Location
Украина
Date of birth
Registered
Activity