HTML *

Стандартный язык разметки web-страниц

СтатьиПостыНовостиАвторыКомпании

aice19 27 дек 2013 в 03:18

Символ рубля при помощи CSS

1 мин

52K

CSS * HTML *

Из песочницы

Добрый времени суток.

После вступления закона о знаке рубля на международном валютном рынке, многие из клиентов изъявили желание поставить в свои магазины именно знак рубля, а не «руб.».

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

-12

bestbomberman 3 дек 2013 в 14:16

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

4 мин

96K

HTML * Веб-разработка *

Из песочницы

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

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

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

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

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

+135

101

peperX 28 ноя 2013 в 08:42

В чем проблема «проблемы БЭМ'а»?

Простой

6 мин

31K

Веб-разработка * CSS * HTML *

Вроде закончилась неделя 30 строк кода и взамен ей видимо пришла неделя "БЭМ". Причем прослеживается достаточно забавная очередность топиков:

И самое интересное, как всегда, в комментариях — чистой воды холивар. Но из-за чего? Почему одни свято верят в методологию БЭМ'а, другие презирают её как узурпатора семантичности? Я попробую изложить свою точку зрения на суть всего холивара и прояснить в первую очередь для себя положение БЭМ'а в собственном мироздании.

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

+34

Pozadi 27 ноя 2013 в 23:59

Простое правило выбора CSS селекторов

2 мин

22K

CSS * HTML *

Туториал

Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.

Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:

Автор принимает решение сверстать эту полоску с помощью тега , вот так:

<body class="whitesquare">
  <hr/>
  <!-- вся остальная страница -->
</body>

.whitesquare hr {
  /* стили для полоски  */
}

Это просто супер пример несоблюдения моего правила.

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

Viking_R 26 ноя 2013 в 08:06

Универсальные подсказки на jQuery

3 мин

11K

CSS * jQuery * HTML *

Из песочницы

Recovery Mode

Доброго времени суток уважаемые читатели. Хочу представить вашему взору свой маленький плагин реализованный на jQuery. Плагин призван универсализировать создание всплывающих подсказок (tooltips).
Ранее я находил множество кодов для решения проблем с подсказками и ошибками при валидации, но все они были тяжеловесными и не очень универсальными. Это привело к тому, что я занялся разработкой своего плагина в обход существующим.
Главной задачей, было сделать так, чтобы выводом подсказок можно было управлять, но при этом не лезть в сам JS код.
Второй задачей было впихнуть в код столько функционала, чтобы подсказки могли выводится как слева/справа/снизу/сверху, так и была прилеплена к курсору мыши.
Третей задачей (зачем вообще было реализовывать на JS) было центрирования подсказки, относительно наведенного объекта.

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

-3

xnim 24 ноя 2013 в 16:20

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

14 мин

401K

CSS * HTML *

Туториал

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

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

BEM
Собственно пример — как сверстать страницу

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

+111

172

AlanDenton 21 ноя 2013 в 11:16

Generating HTML reports for dynamic table-structures

4 мин

5.6K

HTML * Microsoft SQL Server * SQL *

Туториал

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

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

Было решено генерировать HTML со стороны сервера базы данных и через Database Mail формировать рассылку путем выполнения команды sp_send_dbmail.

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

Чтобы заполнить этот пробел предлагаю на рассмотрение мой вариант решения.

Подробнее

Mirantus 18 ноя 2013 в 03:03

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

13 мин

1.3M

CSS * HTML * Веб-разработка *

Из песочницы

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

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

+84

110

Cosss 8 ноя 2013 в 16:29

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

1 мин

53K

XML * HTML *

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

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

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

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

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

+56

ilusha_sergeevich 8 ноя 2013 в 02:52

Несколько интересностей и полезностей для веб-разработчика (выпуск 8)

3 мин

44K

HTML * CSS * Веб-разработка *

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Riot.js — The 1kb client-side MVP framework

Немного статистической правды:

Самый маленький среди похожих популярных фреймворков

Самый емкий код (в примере для Todo MVC приложения)

Самый быстрый из существующих

«Материнский» проект Moot тоже очень крутой и демонстрирует то, каким должен быть форум.

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

+65

bookworm 5 ноя 2013 в 11:52

Морфана: приставки, корни, суффиксы…

1 мин

14K

Веб-разработка * JavaScript * HTML *

Совсем недавно мы столкнулись с необходимостью HTML-верстки большого количества разнообразного учебного (школьная программа) материала.

К сожалению, в ряде случаев пришлось отдельно готовить изображения с текстовыми блоками, которые были снабжены хитрой версткой. Это усложняет процессы HTML-верстки и внесения правок. Благодаря замечательному MathJax, мы смогли оптимизировать верстку в части математики, физики и неорганической химии, однако органическая химия осталась непобежденной. Да, есть пакеты для верстки структурных формул в LaTex, но в MathJax их поддержки нет.

Русский язык начальной школы тоже преподносит сюрпризы.

+29

lolmaus 29 окт 2013 в 01:08

Слово в защиту пиксельных значений media queries

8 мин

36K

Веб-разработка * CSS * HTML *

Я покажу тебе, глубока ли кроличья нора.

Читая публикации о верстке для вэба, вы не раз натыкались на рекомендацию не использовать пикселы в media queries. Например, вот цитата из совсем недавней статьи на Хабре:

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

Что, если я скажу вам, что использование пикселов в media queries не только не причиняет никакого вреда верстке, но и имеет преимущества над использованием em'ов?

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

+109

jeston 28 окт 2013 в 20:34

Приложения для Firefox OS запустятся на Android, Windows, Mac OS X и Linux

1 мин

9.9K

FirefoxJavaScript * HTML *

Инженеры Firefox OS в своём блоге сообщили о том, что приложения для их операционной системы, выполненные по технологии Open Web Apps (другими словами, просто на HTML+JS+CSS) станут, условно говоря, «кросс-платформенными» и будут работать на целом ряде сторонних ОС без изменений исходного кода («like a native apps»). Правда, приложение всё-таки должно уметь приспосабливаться к размерам экрана и аппаратной части устройства.

На демо-видео показан процесс запуска некоторого приложения Short Clock, которое, как можно понять, не требует никаких пользовательских привилегий. Видно, что на Android, Windows, Mac OS и Linux происходит примерно следующее: приложение устанавливается из Firefox Marketplace из браузера в соответствующей операционной системе (при этом оно автоматически адаптируется к ней — происходит «repackage») и запускается «как нативное приложение». При этом подчёркивается, что «изменений исходного кода — ноль».

Примечательно то, что JavaScript в OWA-приложении может работать не только в пределах своего HTML, а и обращаться к существующим hardware API на каждой из перечисленных платформ. На видео видно, как в Android устанавливается приложение, требующее ряда привилегий — доступа к GPS и Vibration API, к примеру.

Источник

+20

codeorchestra 28 окт 2013 в 14:55

Что не хватает в COLT/JS, чтобы начать его использовать?

1 мин

3.1K

Блог компании CodeOrchestraHTML * JavaScript *

Мы хотим сделать продукт лучше и естественно хотим больше пользователей.

Поэтому просим нам помочь понять, какие задачи нам делать сейчас, а какие отложить «на потом».

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

Ну и рекомендацию «Нафик это никому не нужно, идите делать сайты» мы тоже примем.

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

maxmert 21 окт 2013 в 09:49

Идеальный css-framework. Maxmertkit widget manager – build your own framework

10 мин

13K

Node.JS * HTML * CSS *

Добрый день!
Как и обещал некоторое время назад, я выпустил бету maxmertkit widget manager. Я давно хотел npm или gem, но для css. Добавил несколько зависимостей в json-файл, набрал команду и все установилось. Это быстро и удобно. Хороших решений я не нашел, значит пора реализовать свое. Пока не начал, ссылки на статьи о том, с чего все начиналось – первая и вторая статьи. Можно не читать, кратко я все перескажу здесь. Можно сразу зайти на портал и разобраться что к чему, а также посмотреть видео – www.maxmertkit.com.

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

+18

afi 21 окт 2013 в 07:15

AngularJS: еще одна таблица с сортировкой, фильтрацией и постраничной навигацией

5 мин

43K

JavaScript * HTML * Angular *

Recovery Mode

Что это?

Это очередное AngularJS приложение, которое добавляет в обычную таблицу возможности сортировки, фильтрации, разбиения на страницы и пр.

Разумеется, существует несколько готовых решений (1, 2, 3, 4, 5), но они не подходили по ряду причин. В итоге, было решено создать свой вариант, тем более, что я не имею большого работы с AngularJS, а изучать этот фреймворк и его потрясающие возможности лучше на практике.

Подробности

iLight 17 окт 2013 в 07:45

Решение проблемы border-radius + overflow:hidden с помощью canvas

2 мин

15K

JavaScript * HTML * Canvas *

Из песочницы

Передо мной стояла следующая задача:

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

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

yesyesyes 14 окт 2013 в 16:15

Пишем HTML5-игру за 20 минут, или введение в Phaser framework

9 мин

206K

JavaScript * Разработка игр * HTML *

Туториал

Из песочницы

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

Введение

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

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

+46

ilusha_sergeevich 12 окт 2013 в 15:49

Несколько интересностей и полезностей для веб-разработчика (выпуск 5)

3 мин

40K

Веб-разработка * JavaScript * HTML *

Stackedit

Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт.

App.io позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк для создания анимаций в UIKit от IFTTT.

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

+57

alizar 8 окт 2013 в 18:35

Частотный генератор фонового шума на HTML5

1 мин

23K

Проектирование API * HTML *

В ряду генераторов фонового шума — пополнение. Да ещё какое. На сайте myNoise.net можно в удобном интерфейсе через Web Audio API сгенерировать подходящий фон: звук костра, ветра, водопада, дождя, белый шум, различные промышленные шумы и т.д. Всё совершенно бесплатно и работает даже в мобильных браузерах.

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

+51

1 2 ...

93 94

96 97 ...

110 111

HTML *

Символ рубля при помощи CSS

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

В чем проблема «проблемы БЭМ'а»?

Простое правило выбора CSS селекторов

Универсальные подсказки на jQuery

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

Generating HTML reports for dynamic table-structures

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

Часть 1. Верстка стандартными средствами

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

Несколько интересностей и полезностей для веб-разработчика (выпуск 8)

Riot.js — The 1kb client-side MVP framework

Морфана: приставки, корни, суффиксы…

Слово в защиту пиксельных значений media queries

Приложения для Firefox OS запустятся на Android, Windows, Mac OS X и Linux

Ближайшие события

Что не хватает в COLT/JS, чтобы начать его использовать?

Идеальный css-framework. Maxmertkit widget manager – build your own framework

AngularJS: еще одна таблица с сортировкой, фильтрацией и постраничной навигацией

Что это?

Решение проблемы border-radius + overflow:hidden с помощью canvas

Пишем HTML5-игру за 20 минут, или введение в Phaser framework

Введение

Несколько интересностей и полезностей для веб-разработчика (выпуск 5)

Stackedit

Частотный генератор фонового шума на HTML5

Вклад авторов