Рубрика «html» - 144

в 2:43, , рубрики: html, html5, Веб-разработка, старые браузеры, метки: , ,

image
Авторы Modernizr решили собрать в одном большом, гигантском справочнике все прослойки, fallback-и и polyfill-ы, которые помогут обеспечить функциональность html5 в тех браузерах, где он не поддерживается

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

Как определить, поддерживает ли браузер ту или иную функцию? Modernizr! Как написать свой polyfill? Есть мануал (на английском) Пишем polyfill-ы на JS для кросс-браузерности

Справочник доступен в виде страницы на Github.
Читать полностью »

в 19:09, , рубрики: html, html5, html5 file api, javascript, svg, векторная графика, метки: , , ,

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

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Summer html image map creator
Читать полностью »

в 16:01, , рубрики: html, html5, Веб-разработка, Программирование, метки: , ,

Доброго времени суток!

Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.
Читать полностью »

в 10:35, , рубрики: data mining, html, html5, javascript, визуализация, метки: , ,

Интерактивная HTML5 визуализация по мотивам «Lost»

Поклонник одного из лучших телепроектов последних десяти лет «Затерянные» («Lost») программист Сантьяго Ортиз (Santiago Ortiz) создал прекрасный пример интерактивной визуализации взаимоотношений между главными и второстепенными героями шоу при помощи HTML5.

Сериал создавался силами более 30 сценаристов, которые должны были прорабатывать характеры и взаимоотношения главных героев, создавая при этом реалистичную атмосферу с точки зрения перемещения героев во времени, следить за непротиворечивостью событий, и при этом давать намёки на всевозможные загадки (например, почему Кейт видела в джунглях тёмную лошадь); при этом wiki-проект по мотивам шоу содержит более 7000 статей.
Читать полностью »

в 23:33, , рубрики: html, javascript, web components, Веб-разработка, велосипед, метки: ,

Веб компоненты с LibJSПо факту, LibJS это связка нескольких библиотек. О Mask и Include я уже вкратце рассказал, а сегодня завершит трилогию CompoJS(@github).

Постановка задачи

  1. разработка компонент вне основного проекта
  2. «dev»-независимая маршрутизация — route('compo','file:///d:/dev/compo/{name}/lib/{name}.js');
  3. легкое внедрение в проект — include('compo','mycomponent');
  4. инициализация прямо из макета — <myComponent <!-- settings --> /> (без javascript-a)

Итого 2 строчки кода, (3) и (4), и компонент подключен в проект вместе с ресурсами и другими компонентами. Больше не надо копировать картинки и стили — все под капотом. Хочу отметить, что разрабатываю в основном мобильные приложения, так что «под капотом» должно быть что-то легкое, но очень быстрое. В статье также будет приведен пример компоненты с использованием библиотеки @PrismJSЧитать полностью »

в 18:58, , рубрики: html, html5, internet explorer, javascript, Веб-разработка, метки: , ,

Делая ремонт на своем стареньком сайте (т.е. переводя его на HTML5), я обнаружил в стенах и деревянных поверхностях дыры и трещины, которые необходимо было залатать. Для этого я использовал шпатлевку, обеспечивающую гладкую и ровную поверхность. Затем необходимо подкрасить и, конечно же немного магии.

А вот и методы решения проблемы:

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

Читать полностью »

в 17:21, , рубрики: css, html, Веб-разработка, верстка, метки: ,

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

Читать полностью »

в 16:52, , рубрики: css, html, jquery, Веб-разработка, верстка, метки: , , ,

Я начал писать этот плагин в феврале этого года просто для себя, потому что на тот момент я не нашел ничего похожего. Сейчас уже читательу известно про такие инструменты, как PixelPerfect и X-Precise, однако у каждого из них есть свои плюсы и минусы, как и у моего.

Итак, что же особенного в pixLayout?
Читать полностью »

в 18:38, , рубрики: html, jquery, Веб-разработка, верстка, метки: , ,

Существует множество способов тестировать верстку. Большинство из них были описаны в статьях или комментариях хабра. Упоминаний данного способа я не нашел.

XPrecise

Отличный плагин для проверки верстки

Утилита разработана командой xhtmlized.
Совместима со всеми браузерами, потому как подключается в виде плагина jQuery.

Установка и настройка

Для тестирования верстки вам нужно подключить jQuery, а за ним XPrecise

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="_xprecise/xprecise.min.js"></script>

Читать полностью »

в 13:14, , рубрики: css, html, javascript, JS, будущее интернета, Веб-разработка, метки: , , ,

На пути к замене HTML+JS

Проблема

Большую часть моей роботы с технологиями большой тройки (HTML, CSS, JS) составляет создание простых страниц вроде документации к приложению, визитки для предприятия, и тд. Для таких мелких целей текущая тройка подходит почти идеально. Однако, что если подумать о современных сайтах вроде Facebook, VK, Google Docs, Twitter, Stack Overflow? Они являются скорее полноценными приложениями, чем страницами. В таком случае можно рассматривать эту тройку как тулкит для создания графических приложених, вроде GTK+ или Java AWT. Однаок если открыть код упомянутых выше веб-приложений, можно увидеть кашу из прямолинейного, повторяющегося HTML-кода, неясной JS логики и CSS хаков. Разве это сравнимо с ООП кодом, ответственного за отображение графики, в любом более менее нормальном desktop-приложении? В любом тулките создание меню — вопрос пары строк кода. Переиспользование одного и того же кода? Проще простого! А как насчет большой тройки? С этой точки зрения тройка не выдерживает никакой критики. Она не расчитана на веб-приложения, которые характеризуется нелинейной структурой экрана, высокой динамичностью содержания, требовательностью к ресурсам. Я считаю, что именно с веб-приложениями тройка справляется плохо. Эти технологии были созданы для простых, линейных, статических страниц.
Читать полностью »

1...1020...143144145...150...159
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js