Коллекция ссылок для веб-технологов

Запустил сервис‑коллектор ссылок для всех, кто причастен к разработке сайтов. Основная целевая группа – веб‑технологи: верстальщики и программисты.

Наличествует рубрикатор, метки, поиск (написанный индивидуально для этого проекта, а не встроенный в MaxSite CMS). Для некоторых ссылок текстовое описание дополнено кратким изложением сути техники/приема (под спойлером). Для каждой ссылки есть кнопка «сообщить о проблеме», кликнув по которой Вы отправите мне email, в котором проблему можно описать. Есть и форма «Прислать ссылку».

Для части ссылок указана кроссбраузерность (некоторые плагины jQuery, техники верстки).

Посмотреть htmllinks. ru

Добавил чуть менее 300 ссылок из закладок своего браузера. Прошу содействия в наполнении!

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

Ускорение загрузки шрифта с google.com/fonts

Вопрос скорости загрузки файлов, участвующих в окормлении страницы, со сторонних хостов – важный вопрос. Сегодня речь о лучшем из сервисов, предоставляющих шрифты – google.com/fonts

Есть в документации Гугла любопытный раздел, который как бы намекает нам: можно получить не весь шрифт, а только отдельные его символы. Значит, можно получить только кириллические символы какого-либо шрифта:

/* CSS */
@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,500&text=%D0%90%D0%91%D0%92%D0%93%D0%94%D0%95%D0%81%D0%96%D0%97%D0%98%D0%99%D0%9A%D0%9B%D0%9C%D0%9D%D0%9E%D0%9F%D0%A0%D0%A1%D0%A2%D0%A3%D0%A4%D0%A5%D0%A6%D0%A7%D0%A8%D0%A9%D0%AA%D0%AB%D0%AC%D0%AD%D0%AE%D0%AF%D0%B0%D0%B1%D0%B2%D0%B3%D0%B4%D0%B5%D1%91%D0%B6%D0%B7%D0%B8%D0%B9%D0%BA%D0%BB%D0%BC%D0%BD%D0%BE%D0%BF%D1%80%D1%81%D1%82%D1%83%D1%84%D1%85%D1%86%D1%87%D1%88%D1%89%D1%8A%D1%8B%D1%8C%D1%8D%D1%8E%D1%8F0123456789%20%21%40%23%24%25%5E%26%2A%28%29_%2B%C2%AB%C2%BB%E2%80%94%C3%97%C2%A9%3C%3E%2C.%2F%7C%5C%7B%7D%5B%5D%27%22%3B%3A%E2%84%96%25%3F-%C2%B1%3D');

Эта конструкция импортирует в ваш CSS‑файл шрифт Ubuntu, плотность начертаний 400 и 500, включающий следующие символы:

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя0123456789 !@#$%^&*()_+«»—ש<>,./|\{}[]'";:№%?-±=

Только кириллица, только хардкор, цифры, знаки, пробел.

Для вставки прочих символов можно использовать универсальный конвертер. К примеру, конструкция, импортирующая шрифт Marck Script (у него только одна плотность) с кириллицей, символами и латиницей:

/* CSS */
@import url('http://fonts.googleapis.com/css?family=Marck+Script&text=%D0%90%D0%91%D0%92%D0%93%D0%94%D0%95%D0%81%D0%96%D0%97%D0%98%D0%99%D0%9A%D0%9B%D0%9C%D0%9D%D0%9E%D0%9F%D0%A0%D0%A1%D0%A2%D0%A3%D0%A4%D0%A5%D0%A6%D0%A7%D0%A8%D0%A9%D0%AA%D0%AB%D0%AC%D0%AD%D0%AE%D0%AF%D0%B0%D0%B1%D0%B2%D0%B3%D0%B4%D0%B5%D1%91%D0%B6%D0%B7%D0%B8%D0%B9%D0%BA%D0%BB%D0%BC%D0%BD%D0%BE%D0%BF%D1%80%D1%81%D1%82%D1%83%D1%84%D1%85%D1%86%D1%87%D1%88%D1%89%D1%8A%D1%8B%D1%8C%D1%8D%D1%8E%D1%8F0123456789%20%21%40%23%24%25%5E%26%2A%28%29_%2B%C2%AB%C2%BB%E2%80%94%C3%97%C2%A9%3C%3E%2C.%2F%7C%5C%7B%7D%5B%5D%27%22%3B%3A%E2%84%96%25%3F-%C2%B1%3DQWERTYUIOPASDFGHJKLZXCVBNMqwertyuioplkjhgfdsazxcvbnm');

Ускорение загрузки файлов шрифта – до 2‑кратного.

Слайдер Bootstrap: проблема автозапуска

Делюсь решением проблемы автозапуска карусели (слайдера) Bootstrap.

Описание проблемы: добавляем на страницу слайдер, но автопрокрутка начинается только после первого пролистывания (клик на «предыдущий» или «следующий»).

Решение: инициализировать карусель при помощи JS после подключения carousel.js (или того JS‑файла, в котором находится код carousel.js).

Пример подключения:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/scripts.js"></script> // в этом файле — JS-плагины Bootstrap (в их числе и carousel.js)
<script type="text/javascript">
	!function ($) {
		$(function(){
			$('#carousel').carousel()
		})
	}(window.jQuery)
</script>

p.s.: добавил новую метку: спасибо, Кэп

Photoshop для html-верстальщика

В рамках курса, который я частично веду в EpicSkills, возникла идея статьи о том, какие функции Photoshop и в каком объеме нужно знать html‑css‑верстальщику. За сим и публикую эту статью‑шпаргалку.

Мастерство фотошопа

Эта запись ни в малейшей степени не конспект, но примерно 10 % информации, дающейся на занятии.

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

Скачать иконки? Используй иконочный шрифт!

Почему использовать иконочные шрифты правильнее и быстрее? Анализ иконочных шрифтов, инструментов работы с иконками и методологии использования иконок в сети.

Смотрел статистику поисковых запросов Google: «иконочный шрифт» – 22 запроса в месяц, «скачать иконки» – 40500 запросов в месяц. Удручающе весёлая статистика. Рассмотрим же, с точки зрения дизайнера и верстальщика, почему в вебе стоит (или не стоит) использовать вместо обычных иконок иконочные шрифты и полюбуемся на лучших представителей.

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

Взаимодействие дизайнера и верстальщика

Пару месяцев назад я начал преподавать html‑вёрстку в Школе интернет‑технологий EpicSkills. Нижеследующий текст – часть занятия, посвященного взаимодействию веб‑дизайнера и html‑верстальщика (в группе по веб‑дизайну). Источник материала – моя 13‑летняя (на момент написания этого текста) практика верстки и анализ тематических материалов, найденных в сети.

Приглашаю всех заинтересованных поучаствовать в обсуждении вопросов, касающихся сотрудничества веб‑дизайнеров и html‑верстальщиков.

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

Плагин пагинации на bootstrap для MaxSite

Когда‑то давно я уже писал свой плагин пагинации для MaxSite CMS. Пагинация – это блок ссылок на страницы в каком‑либо многостраничном разделе или документе.

Сейчас почти все проекты делаю с фреймворком Bootstrap, поэтому переписал плагин пагинации под верстку этого фреймворка.

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

Тема оформления админки MaxSite CMS

MaxSite CMS – это система управления сайтом, на которой я делаю почти все проекты с 2008 года. Быстрая, нетребовательная к серверу (см. потребление памяти и количество SQL‑запросов в «подвале» моего сайта), по возможностям – находится на уровне WordPress и Joomla, но не имеет большинства недостатков этих CMS.

Выкладываю в общий доступ свою версию оформления административной панели для MaxSite CMS.

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

Фотограф Владимир Антощенков

Владимир Антощенков – настоящий архитектурный фотограф.

Родился в 1933 году в Ленинграде. В 1957 году окончил архитектурный факультет Ленинградского инженерно‑строительного института, после чего получил ученую степень (кандидат наук, архитектура). В середине 1970‑х увлекся фотографией.

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