Веб-разработка Пишем и компилируем консольный HtmlUnit-браузер для помощи Google в индексации javascript-контента

Современные веб-сайты — это уже не просто набор страничек с гипертекстовой разметкой. Последние тенденции в веб-разработке приводят к тому, что сайты превращаются в сложные, большие javascript-приложения, по сути состоящие из одной html-страницы и подгружающие контент с помощью ajax-запросов к серверу. В связи с этим большую популярность приобретают js-библиотеки типа Backbone.js, дающие удобные инструменты для проектирования и написания таких веб-приложений и сервисов. Пожалуй самый яркий пример среди подобных сайтов — twitter.com. Среди плюсов такого подхода к разработке сайтов — скорость их работы, снижение траффика, перенос значительной части логики приложения с сервера на клиента, что приводит к снижению нагрузки на сервер. Однако среди всех очевидных плюсов есть небольшая ложка дегтя — невозможность индексации подобного веб-сайта, по сути состоящего из одной страницы…

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

 

CSS Фиксированное позиционирование блоков без использования position:fixed

Очень часто приходится верстать макеты, в которых попадаются элементы, которые нужно зафиксировать на одном месте при прокрутке основного контента страницы. Обычно для верстки таких блоков применяется css-свойство position:fixed. Однако часть браузеров до сих пор не поддерживает это css-свойство. И здесь речь идет не только о Internet Explorer 6, но и о Mobile Safari, который также не поддерживает position:fixed на операционных системах iOS до версии 5. А так как некоторые макеты сайтов должны безукоризненно отображаться на iPhone и iPad, то можно воспользоваться небольшим трюком в CSS, который позволит сделать такие фиксированные блоки, но без использования свойства position:fixed.

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

 

JavaScript Вращение псевдотрехмерных цилиндрических объектов с помощью CSS и JavaScript

Как-то давно я прочитал занятную статью Романа Кортеса (Roman Cortes) об интересном эффекте, которого можно добиться используя старое-доброе css-свойство background-attachment:fixed. Основная суть этого занятного эффекта в разбиении видимой поверхности цилиндрического объекта на множество вертикальных прямоугольников и задании им фоновой картинки с background-attachment:fixed. Далее достаточно проскроллить блок с таким образом сформированным объектом и поразиться тому, что с помощью простого CSS можно добиться такого эффекта вращения цилиндрического объекта. Но в упомянутой выше статье вертикальные блоки для видимой части цилиндра, а также их настройки (в частности background-position) были подобраны вручную. Я решил написать простенький javascript-код, которой позволит собирать подобную цилиндрическую поверхность из любой прямоугольной текстуры.

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

 

CSS Текст со штриховкой или -webkit-mask приходит на помощь

На этой неделе передо мной встала задача по верстке макета, в который дизайнеры заботливо поместили текст со штриховкой. Фрагмент этого макета вы можете видеть на картинке чуть ниже по тексту. Сверстать макет необходимо было под iPad, а это значит, что в достижении поставленной задачи можно использовать всю мощь движка Webkit, который лежит в основе браузера Mobile Safari в iPad.

Текст со штриховкой или -webkit-mask

Беглый осмотр списка всех возможных css-свойств привел к тому, что было найдено свойство -webkit-mask, которое, в итоге, и помогло в этой затруднительной ситуации.

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

 

Веб-разработка Использование base64 в веб-разработке

Base64 — позиционная система счисления с основанием 64 (26). При этом основание 64 в этой системе счисления выбрано не случайно. Это наибольшая степень двойки, которая может быть представлена набором символов из кодировки ASCII. При этом в base64 используются символы A-Z, a-z и 0-9, что составляет 62 знака, а для двух недостающих знаков применяются символы «+» и «/». Эта система широко используется, например, в электронной почте для представления бинарных файлов в тексте письма (так называемое транспортное кодирование для гарантированного сохранения данных при передаче в любых сетях и между любыми устройствами). Однако совместно с технологией data:URL base64 может использоваться в веб-разработке для включения элементов данных (чаще всего файлов с изображениями) в HTML и CSS-документы.

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