background preloader

Web

Facebook Twitter

Организация кода

Студии. Favicon. Регулярные выражения в Notepad++ 00. удаление любого атрибута полностью шаблон: атрибут="([^"]+)" замена: режим: регулярные выражения 01. удаление атрибута style со всеми значениями шаблон: style="([^"]+)" замена: режим: регулярные выражения 02. удаление атрибута class со всеми значениями шаблон: class="([^"]+)" замена: режим: регулярные выражения 03. удаление цифр из начала строки шаблон: ^\d{1,2}.

регулярные выражения в Notepad++

\s замена: режим: регулярные выражения 04. корректура цифр с запятой шаблон: <td>(\d{2}),(\d{2})</td> замена: <td>\1 руб. \2 коп.

Fonts

Email рассылки. My template. Посмотреть. Flex. Стоки. Html/css. Оптимизация кода. Штуки. Sass & Compass. PhpStorm. Api vk. Toster. 58 идей для создания эффективных интерфейсов. Часть 1 (из 2) — Rockin' Robin. Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить / Хабрахабр.

Мы все это видели.

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить / Хабрахабр

Вы заходите на веб-сайт — и вот она: большая, красивая фотография во весь экран. Сейчас это огромный (каламбур) тренд в веб-дизайне, и похоже, что людям это нравится. Прекрасные веб-сайты агенств. Но похоже, что мы подходим к единству в дизайне. Ну ладно, не всем это нравится. Почему ты кричишь на меня, стрелка вниз? «Если это требует объяснений, это уже не работает», — Milton Glaser Дорогой дизайнер Вы нарушаете процесс восприятия пользователем в его наиболее базовом взаимодействии с веб-сайтом. Используя стрелку для того, чтобы сказать пользователю, чтобы тот проскроллил страницу — это то же самое, что написать на кнопке «кликни здесь», даже если это совсем не кнопка.

Эта стрелка не преследуют никакую цель, если только цель — создать себе проблем. Вы можете больше, чем «стрелка для скроллинга» Читайте пост на тему скроллинга от компании Huge: Используем легкую анимацию для общения (не анимированную стрелку) Не прячьте контент, возьмите его под контроль Уменьшите шум.

Examples

Микроразметка. Прикольные эффекты. Js. RegEx. Analitics/metrika. Svg. iOS. Всяко. Делаем грамотный макет сайта / Песочница. Вместо вступления Любой макет создается с учетом определенных технических требований.

Делаем грамотный макет сайта / Песочница

Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно. В этой статье я напишу как сделать все грамотно (и укажу частые ошибки), что повысит производительность у дизайнера и снимет головные боли frontend программиста. Тезисы Сначала я изложу основные тезисы. Верстают в программах для верстки Я часто слышу о том, что дизайн пытаются делать в photoshop'e. Одна из моих теорий на этот счет, это незнание заказчика.

Правильно создайте документ При создании документа многие не читают диалог и сразу жмут «ОК». Назначение: Web — Это переведет все размеры в пиксели. Хинт: многие даже опытные дизайнеры не знают, что высоту (впрочем как и ширину) можно выставлять индивидуально для каждой страницы внизу закладки pages самый первый значек. Используйте сетку И еще один момент, бывают макеты, где margin нулевые. Кнопки социальных сетей для сайта - кнопки для facebook, вконтакте, twitter, google, одноклассники, мой мир, яндекс. Кнопки "Мне нравится" Кнопка "Мне нравится" Facebook Для того, чтобы установить на сайт кнопку "Мне нравится" от Facebook нужно на странице заполнить форму, где выбрать интересующие вас параметры.

Кнопки социальных сетей для сайта - кнопки для facebook, вконтакте, twitter, google, одноклассники, мой мир, яндекс

URL to Like — адрес страницы, на которую устанавливается кнопка. Send Button — кнопка "Отправить" (только для варианта установки в формате XFBML) / XFBML - это специальный формат разметки Facebook // когда вы будете вводить данные в форму, то справа от формы вы увидете, как будет выглядеть внешний вид кнопки. Layout Style — вид кнопки (группы кнопок).

Width — ширина блока кнопок в пикселях. Рекомендации Google по оптимизации скорости загрузки сайтов — Спрашивали? Отвечаем! — Студия «Таликов-Дизайн» Главная → Спрашивали?

Рекомендации Google по оптимизации скорости загрузки сайтов — Спрашивали? Отвечаем! — Студия «Таликов-Дизайн»

→ Скорость загрузки страниц вашего сайта — очень важный параметр не только для посетителей сайта, но и для поисковиков, в частности — для Google. По скорости загрузки поисковик может судить о качестве сайта. Выполнение рассмотренных в статье рекомендаций возможно как на этапе создания веб сайта, так и в процессе его дальнейшего обслуживания (поддержки сайта). Рассмотрим такие рекомендации от Google, призванные оптимизировать (уменьшить) скорость загрузки вашего сайта. Ajax loading gif generator. Can I use...

Responsive Web

Retina. FavIcon. Favicon.ico Generator. Php. Макеты/типографика. Web design. MODx. Test the Load Time of a Web Page. Subway Map Visualization jQuery Plugin. I have always been fascinated by the visual clarity of the London Underground map.

Subway Map Visualization jQuery Plugin

Given the number of cities that have adopted this mapping approach for their own subway systems, clearly this is a popular opinion. At a conference some years back, I saw a poster for the Yahoo! Developer Services. They had taken the concept of a subway map and applied it to create a YDN Metro Map. Once again, I was in awe of the visual clarity of this map in helping one understand the various Yahoo!

University departments, offices, student groupsGovernmentOpen Source projectsInternet startups by category More examples on this blog: Ten Examples of the Subway Map Metaphor. Fast-forward to now. With these goals in mind, I started creating my jQuery plugin. Download or get it on GitHub Step-by-Step Guide Here is a guide to using the Subway Map Visualization jQuery Plugin.