В комплекте с HTML5 появилось большое количество нового API. Одним из лучших стало Fullscreen API, которое предоставляет нативный способ для браузера, позволяющий отобразить веб-страницу в полноэкранном режиме для пользователя.
А еще хорошо то, что Fullscreen API является очень простым в использовании.
Читать полностью »
Рубрика «html» - 123
Как использовать Fullscreen API
2013-06-28 в 8:12, admin, рубрики: api, html, html5, javascript, метки: api, html5, javascriptФильтрация элементов в cuSel
2013-06-26 в 8:55, admin, рубрики: front-end, html, jquery, Веб-разработка, метки: front-end 
На одном из сайтов, который я имею честь обслуживать, для кастомизации селекта используется замечательный jQuery-плагин cuSel. Он удобен тем, что достаточно прост в настройке и позволяет кастомизировать даже полосу прокрутки.
Но иногда случается так, что список элементов может быть очень большим. И быстро найти нужный пункт не так просто.
Читать полностью »
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)
2013-06-22 в 16:32, admin, рубрики: css, css3, DevTools, html, html5, Instagram, jquery, JS, loon, Pocket, Samsung, Yandex, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, DevTools, html, html5, Instagram, jquery, loon, Pocket, Samsung, Yandex, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)")
Текст в линии или как победить дизайнера
2013-06-22 в 10:48, admin, рубрики: css, html, html-верстка, Веб-разработка, метки: css, html-версткаВсем привет
Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:
Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.
Пример: ссылка
Суть решения в следующем:
Читать полностью »
10 профессиональных советов для front-end разработчиков
2013-06-21 в 21:23, admin, рубрики: css, front-end, html, jquery, переводы, метки: css, front-end, html, jqueryПрофессиональный девелопмент — один из ключевых элементов процесса усовершенствования ваших навыков как front-end дизайнера или разработчика. В этой статье я поделюсь с вами нескольким советами, которые мне очень помогали в течение прошедших нескольких лет.
1. Наслаждайтесь своей работой. Если вам не нравится то, чем занимаетесь, будь то создание красивых интерфейсов или проектирование веб-сайтов, попробуйте свои силы еще в каком-либо поле деятельности. Жизнь слишком коротка, чтобы тратить ее на то, к чему не лежит душа.
2. Овладейте языками HTML, CSS и JavaScript от «тыла» к «фронту». Клиентам и компаниям неважно, кто вы — разработчик, дизайнер, архитектор информационных систем или кто-либо еще. Вам в любом случае следует владеть ключевыми технологиями, которые лежат в основе веб от «тыла» к «фронту». Всё построены на этих трёх китах.
Читать полностью »
Верстка: переход к семантической разметке — главная цель HTML
2013-06-18 в 17:57, admin, рубрики: html, Веб-разработка, история, стандарты, метки: html, история, стандартыПервоначально технология HTML (hypertex markup language) была предназначена для описания смысловой структуры веб-документа, то есть для определения частей текста, в которых находятся различные по типу и содержанию части страницы как например заголовки, абзацы, сноски, иллюстрации, гиперссылки и так далее. Говоря академическим языком, HTML создан для семантической разметки документа.
Напомню, что семантика — это раздел языкознания изучающий отношения и способы выделения смысловых структур в речи. К примеру определение членов предолжения (подлежащее, сказуемое, дополнение, определение), изучение отношений и заложенного смысла в них смысла (что является субъектом/объектом действия, а что уточняет их описание и т.д. ).
До HTML задача семантической разметки документов решалась с помощью:
- TeX (технологии 1978го года) для макетирования академических публикаций
- SGML (технологии 1968го года) для более широкого спектра задач. SGML очень похож на своего потомка XML за исключением ряда правил, которые в некоторых случаях заметно усложняют чтение разметки, как например разрешение не ставить угловые скобки в тэгах.
Другими словами, если TeX был адаптирован строго под нужды макетирования университетских докладов, научных работ и тому подобного, SGML позволял создавать структуры информации подобные Реляционным Базам Данных, то есть реализоваывать ER-модели (entity-relationship).
(пример ER-модели)
(пример ER-отношений)
ER-модель — способ определения сущностей в базе данных и отношений между ними. Примеры ER-отношений: один к одному, один ко многим, многие ко многим, отношения ассоциации (связь сущностей), аггрегации (обощения и включения одной сущности в другую) и так далее.
Тим Бернерс Лии создавая Web в конце 80ых, взяв за основу SGML, упростил синтаксис, создал перечень предопределенных тэгов для макетирования веб-страницы, правила использования которых задал с помощью DTD (технология из семейства SGML которая регламентирует порядок использования тэгов — то есть перечень разрешенных атрибутов, вложенных тэгов, разрешение на текстовый контент и так далее) и мы получили HTML 1.0
Таким образом HTML основанный на SGML первоначально был призван для описания структуры документа в контексте ER-отношений ее частей, то есть определения структуры и содержания документа в терминах сходных к базам данных.
Теперь представьте ситуацию, когда в прикладной программе для того чтоб подвинуть GUI-кнопку на несколько пикселей в какую-либо сторону Вам приходится редактировать структуру базы данных. Парадоксально, но в соверменном вебе это в порядке вещей — очень часто для того чтоб визуально подвинуть какой-либо элемент (GUI-кнопку) приходится изменять HTML-структуру (базу данных)!
Читать полностью »
Некоторые секреты подключения веб-интерфейса 1C 8.2
2013-06-18 в 16:23, admin, рубрики: 1c 8.2, 1c интеграция, 1с предприятие 8, 1С-Битрикс, html, Веб-разработка, метки: 1c 8.2, 1C интеграция, 1с предприятие 8Некоторые секреты подключения веб-интерфейса 8.2
Работа с альтернативным интерфейсом на управляемых формах 1С доступна через HTML. Альтернативный интерфейс может понадобиться, если стандартных элементов управления 1С недостаточно, но хочется чего-то большего. В данной статье перечислены некоторые секреты работы с веб-интерфейсом на управляемых формах 8.2.
Показ Html-страницы на управляемой форме 1С
Для показа Html-страницы необходимо на форму вставить Поле Html Документа и в источник данных поместить html-код. Нужно иметь ввиду следующее: тонкий и веб-клиент на Internet Explorer работают по-особенному. В двух этих случаях используется Internet Explorer в режиме совместимости с IE 7.
Первый секрет заключается в том, что тонкий клиент можно перевести в режим совместимости с более старшей версией IE. Для этого нужно использовать meta X-UA-Compatible. Так на Windows 7 после добавления
<meta http-equiv="X-UA-Compatible" content="IE=9" >HTML 5 Notifications API
2013-06-17 в 16:44, admin, рубрики: html, html notification, html5, javascript, браузеры, Веб-разработка, метки: html notification, html5, javascript, браузеры 
Привет. В этой статье я расскажу о HTML Notification API.
Какие возможности предоставляет Notification API
API позволяем отправлять уведомления через браузер. Вы можете задавать иконку для каждого уведомления, группировать уведомления, указывать заголовок и текст уведомления.
Поддержка в браузерах
- Safari 6
- Chrome 27
- Firefox 22
Opera 15 не работает с Notifications API, несмотря на наличие конструктора Notification.
На мобильных платформах технология не работает.
В движке webkit есть старая нотация в виде webkitNotifications.
Как это работает
Цикл работы следующий:
- Получить разрешение на отправку;
- Правило фиксируется для сайта;
- Отправить уведомление.
Верстка: два блока одинаковой высоты
2013-06-17 в 11:01, admin, рубрики: css, html, Веб-разработка, метки: css, htmlЗадача
Заданы два блочных элемента – один с текстом статьи (ширина 75% от ширины документа), другой с перечнем ссылок для навигации по первому элементу (ширина 25%). Высота элемента содержащего статью задается динамически, в зависимости от наполнения блока текстом. Необходимо сделать так, что бы второй блок с навигацией обладал таким же значением параметра высоты как и первый содержащий основной текст статьи.
Читать полностью »
Мобильная веб-разработка: HTML5 приложение для Android
2013-06-17 в 4:50, admin, рубрики: client-side, cordova, geolocation api, html, javascript, mobile development, phonegap, метки: client-side, cordova, geolocation api, javascript, phonegapВступление
К счастью, есть более чем один способ написать приложение для мобильного телефона. Можно сделать сайт, упаковать его специальным образом, и вуаля, вот вам и приложение! Именно такой подход предлагает нам проект phonegap.com/ именно об этом методе и пойдет речь в этой статье.
Уверен что ни стоит обсуждать экономическую целесообразность данного подхода. Она на лицо. Да, знаний нужно больше чем у среднестатистического веб разработчика, но все же, это сайт! Это понятно! Это тот же HTML, это тот же броузер, тот же Javascript. Найти разработчика ни так сложно, как скажем “нативного”. А уж если умножить на кроссплатформенность данного решения, так и вообще может показаться что это панацея. Конечно, мы то с вами знаем, что ни какой “пилюли” не существует, но в ряде случае, это действительно best practic