HTML *

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

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

tenbits 16 мая 2013 в 10:40

MaskJS — HMV* фреймворк

11 мин

11K

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

Разрабатывая MaskJS вот уже больше полугода, удалось превратить DOM шаблонизатор в очень мощный, но при этом производительный веб фреймворк. В статье познакомлю вас с возможно интересными подходами к разработки. Уверен, будет интересно почитать о использовании сигналов и слотов вместо DOM событий. И как компоненты делают нашу жизнь проще. Маска легко интегрируется в уже готовый проект, и даже может быть использована вместе с любым другим фреймворком. Основным же отличием наверное является render flow, где в процессе поэтапно создается Document Fragment / контроллеры / «биндинги». Собственно всю гибкость даже сложно передать, но я попробую, и приглашаю под кат.

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

+23

A3a 6 мая 2013 в 03:58

Лёгкий сайт или как посадить браузер на диету

14 мин

145K

Веб-разработка * Клиентская оптимизация * HTML *

Перевод

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

— Zeno Rocha, руководитель проекта.

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

+165

Sapun4ik 29 апр 2013 в 08:32

Всплывающая фиксированная навигация jQuery

2 мин

3.6K

HTML * jQuery *

Туториал

Из песочницы

Recovery Mode

Всплывающая фиксированная навигация

Я хотел бы показать вам навигационную панель, которая появляется при прокрутке содержания страницы в низ, и остается на своем месте.
Буду использовать для реализации jQuery, чтобы была совместимость в том числе IE.

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

-11

Taritsyn 26 апр 2013 в 10:48

WebMarkupMin HTML Minifier – современный HTML-минимизатор для платформы .NET

Средний

21 мин

15K

.NET * HTML * Клиентская оптимизация *

Логотип WebMarkupMin

В начале 2012 года я работал над серией статей о клиентской оптимизации в ASP.NET MVC для журнала MSDeveloper.RU. Всего было опубликовано 2 статьи: «Сжатие JS- и CSS-файлов» и «Менеджеры ресурсов», но в моих планах было написать еще 2 статьи: одну про оптимизацию графики, а вторую про минимизацию HTML-разметки и GZIP/Deflate-сжатие (далее просто HTTP-сжатие). К сожалению, эти планы не удалось воплотить в жизнь из-за нехватки свободного времени (в тот момент, я запускал проект Bundle Transformer) и последовавшего закрытия журнала.

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

Эволюция HTML-минимизаторов

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

Вопреки расхожему мнению, техники минимизации HTML-кода появились намного раньше, чем аналогичные техники для JavaScript. Уже в конце 1998 года Артемий Лебедев в 17-м параграфе ководства «Паранойя оптимизатора» описывал некоторые техники минимизации HTML-кода.

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

TjRus 25 апр 2013 в 09:05

tFormer.js — велосипед для валидации форм

4 мин

23K

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

tFormer.js — empower your HTML forms

Предисловие:

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

Проблема:

Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

Задача:

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

Решение:

Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.

Подробности

+29

uLow 24 апр 2013 в 12:14

«CAPTCHA: Прототип» или очередная попытка уйти от разгадывания капчи

3 мин

8.4K

Информационная безопасность * JavaScript * HTML *

Наверно каждый веб-программист задумывался о том, как избавиться от назойливых картинок антиспама, которые по смыслу должны пресекать ботов-спамеров, а на деле отпугивают реальных посетителей. Работая над очередной поделкой на HTML5+JS+canvas, пришла идея нового прототипа защиты от ботов. Данная идея не что иное как очередная вариация самой капчи, но на этот раз без дурацких «угадываний» символов.

Так что-же это за волшебная идея?

-5

Gromo 21 апр 2013 в 08:02

JavaScript обёртка скроллбара в виде jQuery плагина

6 мин

68K

CSS * jQuery * HTML *

Из песочницы

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

Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:

Эмуляция скролла средствами JavaScript
JavaScript обёртка над родным скроллом

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

+31

int22h 19 апр 2013 в 11:44

Foundation 4

1 мин

47K

HTML * CSS *

Месяц назад вышла четвертая версия фреймворка Foundation от компании Zurb, достойной альтернативы Twitter Bootsrap.
В данной версии делался упор на мобильные устройства. В компании считают, что дизайнеры должны ориентироваться в своей работе в первую очередь на мобильные устройства, а после уже на декстопы.

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

+16

agegorin 12 апр 2013 в 08:57

Гиперпространство на JavaScript

7 мин

27K

Canvas * HTML * JavaScript *

Recovery Mode

Хабровчане! С днем космонавтики!

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

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

+41

RomanNikitin 12 апр 2013 в 08:49

Twitter Bootstrap 3: неофициальный первый взгляд

1 мин

56K

HTML * JavaScript * Open source *

Всем привет!

Судя по пулл-запросу, команда Twitter Bootstrap уже достаточно близка к завершению.
Но, к моему сожалению, их сайт-превью сейчас не работает.

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

Наслаждайтесь: rnikitin.github.io/bootstrap

Список изменений приводить не буду, он очень большой, посмотрите сами.
Что думаете о новом бутстрапе?

+44

ilil 9 апр 2013 в 20:24

Организация хостинга зашифрованного видеоконтента с помощью HTML5

5 мин

15K

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

Из песочницы

Не так давно на хабре обсуждалась новая инициатива от W3С — Encrypted Media Extensions или просто EME. Попробуем же разобраться на практике, что нового и интересного нам предлагают.

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

+22

nulldef 6 апр 2013 в 15:08

Стильный CSS переключатель без JavaScript

2 мин

51K

CSS * HTML *

Туториал

Из песочницы

Здесь я покажу, как сделать переключатель на основе input-а на чистом CSS.

Демо
Все файлы

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

+23

Tseikovets 3 апр 2013 в 13:00

Инструменты и примеры кода для разработки ARIA

1 мин

4.4K

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

Подборка инструментов, примеров кода и других ресурсов по теме разработки с использованием WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), инициативы обеспечения доступности высокофункциональных Интернет-приложений.

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

0dmin 1 апр 2013 в 07:44

Первоапрельские CSS-сниппеты

3 мин

26K

JavaScript * HTML * CSS *

Предлагается вот такой вот комплект CSS снипетов, которыми можно раскарсить первое апреля.

/*
  Turn every website upside down
*/
body {
  /*-webkit-transform: rotate(180deg);
  transform: rotate(180deg);*/
}

/*
  blur every website for a split second every 30 seconds
*/
body {
  /*-webkit-animation: blur 30s infinite;*/
}

/*
  Spin every Website
*/ 
body {
  /*-webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;*/
}

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

+32

Sinister 29 мар 2013 в 00:09

Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

1 мин

74K

Canvas * HTML * JavaScript *

Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.

Есть возможность испытать код прямо на Codepen
Если потянуть мышкой очень сильно, полотно может и порваться. Впечатляет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit уже создал несколько подобных игрушек.

Перевод с чешского источника

+117

legobrain 26 мар 2013 в 12:41

Автоматизация вёрстки

4 мин

28K

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

Из песочницы

Это заметка о подходе к реализации автоматизации механизма psd to html.

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

+33

ilusha_sergeevich 25 мар 2013 в 08:25

Accordion меню на чистом CSS

4 мин

66K

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

Из песочницы

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

Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)

Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked. С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox и radio соответственно.

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

+12

Dima_Sharihin 22 мар 2013 в 15:44

Использование Razor отдельно от ASP.NET MVC

4 мин

11K

.NET * C# * HTML *

Туториал

По роду деятельности студентом мне часто приходится писать различные лабораторные и курсовые работы. Неотъемлемая часть этих работ(как и в 80% задач бизнес-программирования) — код составления отчета о найденных элементах в базе данных или выполненной длительной и сложной операции. В десктопном программировании в рамках .NET Framework есть различные способы решения подобных проблем:

Старая школа: формат RTF никто не отменял, однако вручную составить что-либо сложнее цветного текста со шрифтами разного цвета и ссылками лично у меня не получалось. Способ действенный, но стандарт не самый легкий для понимания, на последнюю версию даже смотреть страшно
Для Silverlight/WPF — формирование FlowDocument своими руками. Объектная модель однозначно удобнее формирования старого формата вручную, но вариант тоже только для смелых
Сторонние решения вроде Crystal Reports, возможно и очень мощный инструмент для создания отчетов, но не всегда в этом есть необходимость, к тому же не всегда есть возможность тянуть пару-тройку дополнительных программных продуктов¹
Использование Microsoft Office Interop. Нет, это издевательство. Ручная работа с памятью в управляемой среде вызывает лишь бурю радости. Начинающий программист выпьет не одну упаковку кофе, прежде чем смирится с подобным принципом работы.
Формирование HTML. На нашу радость, стандарт позволяет создать документы средней степени форматированности, с помощью CSS можно довести до ума. Минусы — оформить документ по всем требованиям крайне затруднительно. Но это если в этом есть необходимость. Плюсы: простота стандарта и всеобщий переход «в облака и браузеры» стимулирует развитие HTML.

О последнем я и буду вести речь.

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

+20

HotWaterMusic 21 мар 2013 в 10:29

Почему HTML считает, что «chucknorris» — это цвет?

1 мин

124K

HTML *

Вы никогда не пробовали задавать цвет фона в HTML при помощи разных строк? Например, строка

<body bgcolor="chucknorris"> test </body>

сделает фон документа кроваво-красным во всех браузерах и на всех платформах (jsfiddle).

Кстати, если слово chucknorri тоже приводит к красному цвету, то chucknorr дает желтый!

Стало интересно, почему так происходит? Добро пожаловать под кат.

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

+199

100

Harrix 18 мар 2013 в 16:09

CMS Koken для фотогалерей

3 мин

69K

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

Появилась надобность создать сайт с фотогалереей. И пошел искать CMS для сих утех. После некоторого поиска обнаружил неприятную тенденцию. Есть CMS для фотогалерей, но не с современной навигацией, без Lightbox и так далее. Есть красивые HTML шаблоны с всякими вкусностями (например, Gamma Gallery), но без системы управления контентом. Рассматривать Wordpress и др. для сайта только с фотками — слишком накладно. Даже опечалился, но поиск натолкнул на одну новую CMS Koken. После небольшого рассмотрения понял, что это именно то, что мне нужно: первоклассная админка с множеством настроек, и современное отображение галерей. А с напильником так вообще красота получается.

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

+39

1 2 ...

93 94

96 97 ...

107 108

HTML *

MaskJS — HMV* фреймворк

Лёгкий сайт или как посадить браузер на диету

Всплывающая фиксированная навигация jQuery

WebMarkupMin HTML Minifier – современный HTML-минимизатор для платформы .NET

Эволюция HTML-минимизаторов

tFormer.js — велосипед для валидации форм

tFormer.js — empower your HTML forms

Предисловие:

Проблема:

Задача:

Решение:

«CAPTCHA: Прототип» или очередная попытка уйти от разгадывания капчи

JavaScript обёртка скроллбара в виде jQuery плагина

Foundation 4

Гиперпространство на JavaScript

Twitter Bootstrap 3: неофициальный первый взгляд

Организация хостинга зашифрованного видеоконтента с помощью HTML5

Стильный CSS переключатель без JavaScript

Инструменты и примеры кода для разработки ARIA

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

Первоапрельские CSS-сниппеты

Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

Автоматизация вёрстки

Accordion меню на чистом CSS

Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)

Использование Razor отдельно от ASP.NET MVC

Почему HTML считает, что «chucknorris» — это цвет?

CMS Koken для фотогалерей

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