avatar

Как сверстать веб-страницу. Часть 2 — Bootstrap

Опубликовал в блог Новости IT технологий
0

Введение

Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.

В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.
Читать дальше →
avatar

Подарок всем front-end разработчикам. grunt(Jade+Stylus+Watch)

Опубликовал в блог Новости IT технологий
0


Здравствуйте Уважаемые хабра-пользователи!

Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!

Во-вторых, в качестве небольшого подарка я подготовил небольшой инструмент, которым сам пользуюсь уже порядка полугода. Данный инструмент требует минимального времени на настройку, но это никак не влияет на отдачу, которую Вы получаете от его использования. Читать дальше →
avatar

[recovery mode] Задаем временной интервал на циферблате часов. JavaScript

Опубликовал в блог Новости IT технологий
0
Доброго времени суток, дорогой читатель.

Что это такое?

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

Я решил немного соригинальничать.

Думаю, картинка довольно наглядно демонстрирует мою идею: имеем циферблат часов и 2 ползунка, которыми выбираем интервал. Хочу сразу сказать, что если я вдруг изобрел велосипед… хм, ну ладно, не смертельно. Все равно самому создать интереснее, чем пользоваться чьим то. Читать дальше →
avatar

AJL — компонент для загрузки JS и CSS файлов средствами JavaScript

Опубликовал в блог Новости IT технологий
0
Привет, Хабр!

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

Поэтому было принято решение написать свой велосипед и заодно попрактиковаться.
В итоге был реализован компонент, который занимает 6.28 Кб в uglify'цированном виде и 1.3 Кб в GZip.

Его ключевые «фишки»:
  • Может загружать как *.js, так и *..
  • Реализована пакетная система. У каждого пакета может быть отдельная конфигурация.
  • Загрузка происходит пакетами. То есть достаточно вызвать метод load() у нужного пакета и он загрузит все файлы, которые в нем находятся.
  • Может загружать как асинхронно, так и в режиме Lazy Loading (загрузка пакета осуществляется только после загрузки всей страницы).
  • Есть встроенный менеджер пакетов, который упрощает базовые операции с пакетами. А именно: хранение, создание, удаление, загрузка.
  • Реализованы namespace'ы (на самом деле, реализация очень простая и для небольших проектов это плюс).

Вот, собственно, описание его главных особенностей.

Под катом небольшой курс использования AJL и описание разработки некоторых составляющих.
Подробнее
avatar

[Из песочницы] 8 HTML элементов, которые вы не используете (а следовало бы)

Опубликовал в блог Новости IT технологий
0
image
Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

Семантический выражает значение документа. Он больше о том, чем является текст, чем о том, как он выглядит. Хорошая семантическая разметка помогает и человеку и компьютеру лучше понять содержимое документа и его контекст.

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

Ок, итак семантическая разметка — это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.
Читать дальше →
avatar

[Из песочницы] Хорошие верстальщики отправляются на небеса, а плохие — куда захотят, или «Почему БЭМ не приносит счастья?»

Опубликовал в блог Новости IT технологий
0
Все мы привыкли слышать поучительные разговоры о том «как надо верстать», или о том «как не надо». Иногда понятие «как надо» строится на объективных фактах, иногда на фактах которые скрыты где-то в глубине проблемы. Всё вместе это образует некоторые правила вёрстки, которыми и руководствуется верстальщик в своей повседневной работе.

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

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

Верстка для самых маленьких. Верстаем страницу по БЭМу

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

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

  • BEM
  • Собственно пример — как сверстать страницу
Читать дальше →
avatar

Хитрый способ создания анимированного jpeg'а

Опубликовал в блог Новости IT технологий
0

Сегодня с успехом осуществил свой эксперимент по сжатию гифок. Меня давно уже раздражает отсутствие специального формата для сжатия анимированных файлов. Как так, gif есть, а анимированного jpeg нет, хотя для большинства существующих гифок подходит именно jpeg.

От существующих решений, мое отличается тем, что это один файл svg, который можно вставить на страницу через тэг
<img>


Под хабракатом находится сжатая версия вот этой гифки tfirma.name/public/leprosorium.ru/cosss_gif/0004w00e.gif
Оригинал весит 6 мегабайт, сжатая версия — 1,3 мегабайта.

Осторожно! Данное решение имеет существенный недостаток, который выражается в высокой загрузке процессора (около 25%). Происходит это только во время загрузки файла, около 1-2 секунд, потом все возвращается в норму.
Читать дальше →
avatar

[recovery mode] Если есть воробей, то зачем нужна пушка. Статические сайты. Обратите внимание на генератор Nikola и на поиск без динамики на серверной стороне средствами AJAX с библиотекой Tipue

Опубликовал в блог Новости IT технологий
0

Введение


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

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

Более того, как оказалось, народ усиленно думает в сторону статических сайтов и существует готовые инструменты для подключения к таким сайтам динамических компонент, реализуемых третьими сервисами, разумеется посредством — это и комментирование и поиск и пр…

И пишут на эту тему много. Вот, к примеру, можно почитать:

http://habrahabr.ru/post/93499/
http://habrahabr.ru/post/142287/
http://habrahabr.ru/post/160431/
http://lifehacker.ru/2012/01/12/blogs-at-dropbox/

Однако, как и прочее большинство статей в Сети, в основном муссируется одна-две мысли и одни и те же программы и сервисы упоминаются. И интересные технологии/, не попавшие в мейнстримовый поток, найти сложновато.

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

[Из песочницы] Пишем HTML5-игру за 20 минут, или введение в Phaser framework

Опубликовал в блог Новости IT технологий
0
Эта статья посвящена разработке стильных, модных и молодежных HTML5 приложений с помощью нового фреймворка Phaser. В ней описан процесс установки библиотеки и создание классической игры Pong.

Введение

Phaser — это движок для разработки мобильных и десктопных HTML5 игр, базирующийся на библиотеке PIXI.js. Поддерживает рендеринг в и WebGL, анимированные спрайты, частицы, аудио, разные способы ввода и физику объектов. Исходники доступны как для просмотра, так и для свободной модификации. Он создан Ричардом Дейви (Richard Davey), известному благодаря активному участию в сообществе программистов, использующих Flixel framework. Ричард не скрывает, что вдохновлялся Фликселем, поэтому некоторые вещи в Фазере будут знакомы опытным флешерам. Первая версия нового движка вышла 13 сентября этого года, сейчас ведется не только активное развитие библиотеки, но и написание документации, поэтому в данный момент уроков по ней, мягко говоря, немного. Что, по моему скромному мнению, следует исправлять, и прямо сейчас.
Читать дальше →