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

в 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-приложении? В любом тулките создание меню — вопрос пары строк кода. Переиспользование одного и того же кода? Проще простого! А как насчет большой тройки? С этой точки зрения тройка не выдерживает никакой критики. Она не расчитана на веб-приложения, которые характеризуется нелинейной структурой экрана, высокой динамичностью содержания, требовательностью к ресурсам. Я считаю, что именно с веб-приложениями тройка справляется плохо. Эти технологии были созданы для простых, линейных, статических страниц.
Читать полностью »

в 21:06, , рубрики: css, HabrAjax, html, ZenComment, метки: ,

Из-за того, что под название каждой статьи в футере отводится 33%, а длина названий различна, появляется пара-тройка неприятных эффектов:
1) пустоты, если названия короткие, а соседнее — длинное;
2) названия прилипают к верхней кромке блока;
3) кликать нужно только на текст, а не на весь блок.
Как улучшить вид 3 старых добрых статей в футере?
Например, здесь в средней ссылке, как и во всех, надо целиться в текст.
Читать полностью »

в 14:54, , рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: , , , ,

Может быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.

Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.

Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note

Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.

Немного технической статистики

По информации из Google Chrome:

  • общее число запросов: 289;
  • размер: 25.98Мб;
  • время загрузки на моём ноуте: 1,3 мин;
  • число «полезных» картинок: 46 (столько насчитал я);

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

в 8:00, , рубрики: Google Chrome, html, html5, Блог компании Intel, сенсоры, метки: ,

HTML5: Сенсоры для тех, кто не привык ждать Рынок мобильных компьютеров начал стремительно меняться, помимо стандартных компонентов ультрабуки, вслед за планшетами и смартфонами, оснащаются сенсорами и тач-скринами. Сенсоры открывают разработчикам новые перспективы, позволяющие создавать новые модели использования их программных продуктов. Посмотрите на рынок мобильных приложений, там уже никого не удивишь возможностью играть в игры, используя в качестве игрового контроллера акселерометр, гироскоп, компас.
Читать полностью »

в 22:16, , рубрики: bugs, css, html, Веб-разработка, верстка, ошибки на сайте, метки: , , , ,

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

Однако до сегодняшнего дня я думал, что нужно хотя бы использовать хитрые конструкции CSS, вложенные иерархии DIV-ов и таблиц, всякие float-ы и коллапсирующиеся margin-ы, чтобы налететь на реальную ошибку.

Я был уверен, что существует хотя бы одна ситуация, когда можно не опасаться никаких засад и приколов: мы всегда можем обернуть фрагмент обычного текста обыкновенным DIV-ом (display:block; и float:none;) и быть уверенными, что наш текст останется внутри него:

<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>

Но на самом деле нет пределов в этом жестоком мире браузерного маразма…
Читать полностью »

в 19:58, , рубрики: html, javascript

Голая баба. ШуткаПостепенно концепция стандарта HTML5 становиться реальностью. Браузеры начинают поддерживать новые возможности, которых так не хватало. Но с новыми возможностями появляются и новые проблемы.
В данной статье рассматривается Application Cache API — совокупность функций, обеспечивающих продвинутое кэширование ресурсов web-приложения, и с помощью которых можно просматривать загруженные ранее сайты без подключения к сети Интернет. Особое внимание я уделил практическому использованию и проблемам Application Cache.
Читать полностью »

в 12:32, , рубрики: canvas, html, html5, javascript, web workers, метки: , , ,

Основная идея

Много кто в процессе изучения Web Workers сталкивался с проблемой работы с canvas-ом. В основном это происходит из-за того, что в web worker нельзя передать элементы DOM. Решением может быть использование getImageData(). Внимание! Статья не рассчитана для новичков. Для изучения данного материала рекомендую ознакомиться с основами canvas и webworker.

Я попытаюсь продемонстрировать вам работу с getImageData() на примере создания асинхронно работающего сложного фильтра размывания изображений — blur. Для этого нам понадобится 2 файла: index.html и filter_worker.js
Читать полностью »

в 0:41, , рубрики: canvas, css, html, html5, ipad, javascript, Веб-разработка, метки: , , , ,

Хочу поделиться с вами моим последним проектом.

Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.

И вот что получилось:
image

Смотреть тут

Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.

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

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

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

в 11:07, , рубрики: css, html, snippets, Twitter Bootstrap, метки: , ,

Фреймоврк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

Сниппеты для Twitter Bootstrap
Читать полностью »

в 13:17, , рубрики: html, syntax highlight, vim, метки: , ,

Случайно обнаружил интересную возможность консольного текстового редактора vim, — он умеет конвертировать открытый текст (с подсветкой синтаксиса) в статичные HTML страницы.
Просто откройте любой файл в vim, выполните команду :TOhtml и вы получите HTML код этой страницы.

Следом я написал скрипт для автоматизации (конвертация всех *.sh файлов).

#!/bin/bash

for file in *.sh; do
  vim -f +"run! syntax/2html.vim" +"wq" +"q" $file
done

И в случае моих настроек vim, получилась такая симпатичная страница:
pastehtml.com/view/cbltj9tyn.html

Думаю, многие могут обойтись даже без JavaScript-хайлайтеров кода.

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

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