Все потоки

HTML *

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

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

ilusha_sergeevich 25 мар 2013 в 08:25

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

4 мин

69K

Веб-разработка * 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 мин

125K

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

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

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

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

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

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

+199

Harrix 18 мар 2013 в 16:09

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

3 мин

70K

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

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

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

+39

Tairesh 18 мар 2013 в 11:36

Полезные сниппеты на HTML5

4 мин

84K

Перевод

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

Автозаполнение в текстовых полях

Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

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

+45

genbit 18 мар 2013 в 06:14

WebKit для разработчиков

8 мин

146K

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

Перевод

Для многих из нас, разработчиков, WebKit — черный ящик. Мы бросаем в него HTML, CSS, JS и кучу изображений, и WebKit, как-то… магически, выдает нам веб-страницу, которая выглядит и работает хорошо.
Но на самом деле, как говорит мой коллега Илья Григорик:

Веб-кит не является черным ящиком. Это — белый ящик. И не просто белый, но и открытый ящик.

Так-что, давайте попробуем разобраться в некоторых вещах:

+74

t3s 17 мар 2013 в 20:25

Букет цветов на CSS3

4 мин

12K

Туториал

Recovery Mode

Небольшая предыстория: 8 марта я разместил на своем блоге вот такой букет цветов. В течение недели уже несколько человек поинтересовались его реализацией — и до сегодняшнего дня отвечал достаточно кратко — с помощью border-radius, inear-gradient и transform.
Но если кому-то это было интересно, то почему бы не написать развернутый мануал?
Одним из требований было минимальное количество обьектов на один цветок — это позволит использовать любое количество цветов с незначительными изменениями кода. У меня получилось всего 5 обьектов, включая стебель и лист, но вы, если захотите, можете рисовать более сложные цветы.

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

+1

boston 15 мар 2013 в 19:56

Редактор цветовых схем для SublimeText 2

1 мин

18K

HTML * JavaScript *

В середине октября 2012 года Allen Bargi (aziz) обратил своё внимание на Angular.js и работу новых HTML5 API-интерфейсов для работы с файлами в Chrome. Эксперимент затянулся и разросся в замечательный проект — TMTheme Editor. Являясь on-line приложением, редактор TMTheme позволяет создавать и редактировать визуальные темы для популярного нынче SublimeText, так же поддерживается совместимый по темам Textmate и другие редакторы.

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

+32

kichik 14 мар 2013 в 12:06

Online-трансляция HTML5 Camp — 15 марта с 10:00

1 мин

7.9K

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

Друзья, рады напомнить (а кому-то сообщить), что завтра с 10:00 (мск) вас будет ждать online-трансляция третьего HTML5 Camp.

В рамках конференции у нас будет три трека:

Бизнес-дискуссии + технологические сессии
Технологические сессии по веб-разработке
Технологические сессии по разработке для Windows 8 на HTML/JS.

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

+16

balkonskiy 14 мар 2013 в 11:04

Времена меняются для веб-разработчиков — 6 советов чтобы выжить

4 мин

16K

CSS * jQuery * HTML *

Из песочницы

Recovery Mode

Контекст данного поста об изменениях для веб-разработчиков, я вижу многих разработчиков которые «застряли», особенно в .NET.
Если вы еще не начали совершенствоваться в Вашем искусстве и адаптироваться к изменяющимся трендам, вы должны начать это делать сегодня.

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

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

+4

Heavenanvil 11 мар 2013 в 10:35

Немного о Steam Web Api

3 мин

202K

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

Туториал

Из песочницы

Сервис цифровой дистрибуции Steam от компании Valve становится всё более популярным среди игроков. По состоянию на январь 2013, через Steam распространяется более трёх тысяч товаров, на которые действуют ежедневные, срединедельные и скидки на выходные дни, а количество зарегистрированных аккаунтов превысило 60 миллионов.

В настоящее время, в рунете очень мало информации об использовании Steam Api (или же Steam Web Api). В данном топике я расскажу о том, как получать нужную вам информацию из сообщества Steam для интеграции её в свои сайты, блоги или же просто получить информацию о пользователе, не заходя в Steam.

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

+12

xoxulin 11 мар 2013 в 07:52

Kinect + 3D Display + HTML5

4 мин

8.1K

Из песочницы

Особенности создания интерактивного 3D HTML5 приложения с использованием сенсора Kinect.

Задача

Продемонстрировать 3D фото и видео, отснятое в разных краях нашей большой Родины, на 3D дисплее, причем так, чтобы воспроизведение начиналось тогда, когда пользователь входил в определенную географическую зону на карте, размещенной перед экранами. В идеале стенд должен состоять из 6 3D дисплеев и 3 сенсоров Kinect, чтобы позволить максимально разнести геозоны перед экранами и дать возможность нескольким пользователям управлять своими дисплеями.

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

+4

Freya 5 мар 2013 в 16:10

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

2 мин

79K

JavaScript * HTML * CSS *

Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

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

+43

Alex10 4 мар 2013 в 18:44

Webrtc, Peer Connection — создание полноценного видео чата в браузере

5 мин

71K

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

Туториал

Введение

Webrtc на хабре уже неоднократно упоминался, хотелось бы рассказать немного про техническую часть реализации и осветить создание небольшого видео чата. Хочу сразу оговорится, что реализация webrtc постоянно меняется, в том числе названия функций api, их параметры.
Всем, кому просто хотелось бы посмотреть сразу как это все работает, сюда: apprtc.appspot.com демка от гугла все что нужно — это перейти по ссылке и послать её еще кому-нибудь уже с номером комнаты. В конце нужно поменять цифры если окажется что комната переполнена. Кому интересно как это все работает добро пожаловать под кат

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

+39

xnim 28 фев 2013 в 20:14

Пишем HTML-виджет для приложения IBOOK Author

8 мин

7.1K

HTML * JavaScript *

Туториал

Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.

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

+3

LegoMushroom 28 фев 2013 в 07:33

Видео с конференции W3C conf 2013 доступно на YouTube

1 мин

4.9K

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

Кто не успел, не опоздал
Официальная страница

+6

rassadin 28 фев 2013 в 00:45

Пример — часы на СSS3 без изображений и JavaScript

9 мин

93K

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

Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.

Для начала собственно сам пример — на codepen.io или на cssdesk.сom

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

+206

ph_piter 21 фев 2013 в 10:11

Разработка веб-сайтов для мобильных устройств

3 мин

15K

Блог компании Издательский дом «Питер»HTML * Веб-разработка *

Автор: Гарднер Л., Григсби Д.
Перевод книги: Черник Вадим
Дата выхода: март/апрель 2013г.

Спешим вас порадовать: весной у нас выходит новая переводная книга издательства O’Reilly «Head First Mobile Web». Наверное, практически любой «айтишник» читал что-нибудь из серии Head First. Если же вы никогда не читали книги Head First, то в этом посте вы можете узнать о уникальном, веселом оформлении этой серии.

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

-13

Analitik_Telecom 19 фев 2013 в 08:07

Моя демократия заканчивается у кончика твоего носа: совместное редактирование в облаке

8 мин

14K

Блог компании ONLYOFFICEHTML *

Очередной этап Формулы-1. Напряженная гонка на запредельных скоростях. Пит-стоп, замена резины. Слаженная команда механиков за считанные секунды меняет колеса и болид продолжает гонку. Один профессионал — одна задача. А теперь представьте, что все колеса меняет один механик, или у каждого колеса мнется в растерянности целая команда, все мешают друг другу и дают бесконечные советы. Гонка безвозвратно проиграна.

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

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

+8

Diokuz 19 фев 2013 в 05:57

Кроссбраузерная кастомизация системного скроллбара

8 мин

147K

Блог компании 2ГИСHTML * JavaScript *

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Подробности

+104

1 2 ...

99

100 101 ...