Библиотека minify

При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

Форматирование кода CSS

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

Приложение

Оригинал: http://diveintohtml5.info/everything.html

Перевод: Влад Мержевич

Почти алфавитный не ерундовый справочник по определению всего

Затруднения? Прочитайте Проверка технологий HTML5 для знакомства с основами. Хотите вместо этого библиотеку все-в-одном? Попробуйте Modernizr.

Opera 11

Если посмотреть статистику использования браузеров в Рунете, то можно однозначно заявить, что IE постепенно сдает свои позиции, а на первое место выходят Firefox и Opera. Даже сложив между собой разные версии браузеров, получим, что лидер сменился и суммарное использование Opera и Opera Mini, выше, чем у всех остальных браузеров, включая Internet Explorer. Возможно, не очень корректно учитывать браузер для мобильных устройств, тем не менее, тенденция очевидна. В остальном мире влияние Оперы не столь впечатляюще, но в Рунете этот браузер любят и активно используют люди самых разных профессий. Очередная, одиннадцатая версия Оперы должна укрепить лидерство браузера и, возможно, переманить к себе сторонников Internet Explorer и Firefox.

Если сравнивать с предыдущей версией 10.63, то каких-то глобальных изменений не заметно, однако сделан большой шаг вперед по отношению к десятой ветке в целом. Интерфейс стал удобнее, красивее и вобрал в себя последние тенденции разработчиков браузеров. Поскольку меня Опера интересует в первую очередь как разработчика, я кратко опишу некоторые новые возможности и подробнее остановлюсь на вещах, связанных с созданием сайтов.

Сумасшедшие формы

Оригинал: http://diveintohtml5.info/forms.html

Перевод: Влад Мержевич

Каждый знает о веб-формах, не так ли? Вставляем тег <form>, несколько <input type="text">, может быть <input type="password">, завершаем это все кнопкой <input type="submit"> и готово.

Вы не знаете и половины об этом. HTML5 определяет более десятка новых типов полей, которые вы можете использовать в своих формах. И когда я говорю «использовать», я имею в виду что их можно использовать прямо сейчас — без каких-либо прокладок, хаков или обходных путей. Не волнуйтесь сильно, я не хочу сказать, что все эти новые захватывающие возможности на самом деле поддерживаются в любом браузере. Совершенно нет, я не имею в виду, что всеми. В современных браузерах, да, ваши формы покажут все, на что они способны. Но в старых браузерах ваши формы по-прежнему будут работать, хотя и не в полной мере. То есть эти возможности элегантно деградируют в каждом браузере. Даже в IE6.

Возьмём с собой

Оригинал: http://diveintohtml5.info/offline.html

Перевод: Влад Мержевич

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

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

Давайте порисуем

Оригинал: http://diveintohtml5.info/canvas.html

Перевод: Влад Мержевич

В HTML5 определен элемент <canvas> как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете.

Локальное хранилище

Оригинал: http://diveintohtml5.info/storage.html

Перевод: Влад Мержевич

Постоянное локальное хранилище это одна из областей, где клиентские приложения имеют преимущества перед серверными. Для приложений, таких как операционная система, обеспечивается уровень абстракции для хранения и извлечения данных вроде настроек или статуса выполнения. Эти значения могут быть сохранены в реестре, INI-файлах, XML-файлах или в другом месте в зависимости от принципов платформы. Если ваше клиентское приложение нуждается в локальном хранилище больше чем просто пара ключ/значение, вы можете вставить свою собственную базу данных, придумать свой формат файлов или любое количество других решений.

Вы здесь

Оригинал: http://diveintohtml5.info/geolocation.html

Перевод: Влад Мержевич

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

Видео на сайте

Оригинал: http://diveintohtml5.info/video.html

Перевод: Влад Мержевич

Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не существовало стандартного способа сделать это, фактически, любое видео, что вы видели в Интернете, было добавлено через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он). Эти плагины достаточно хорошо интегрированы с браузером, поэтому вы могли даже не знать, что их используете. Но это до тех пор, пока не попытаетесь посмотреть видео на платформе без поддержки плагина.

HTML5 определяет стандартный способ вставки видео на веб-страницу с помощью элемента <video>. Поддержка <video> все еще развивается и это вежливый способ сказать, что он пока не работает, по крайней мере, работает не везде. Но не отчаиваетесь! Есть альтернативные способы добавления, причем в изобилии.

Понятие потока

В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже.  Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.

Что всё это значит?

Оригинал: http://diveintohtml5.info/semantics.html

Перевод: Влад Мержевич

В этой главе мы возьмем веб-страницу и, не делая с ней ничего плохого, улучшим ее. Местами она станет короче, местами длиннее, но она станет семантической. Возрадуемся!

Вот пример страницы. Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.

Добавить в избранное

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel тега <a> и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.

XAMPP

XAMPP

http://www.apachefriends.org/en/xampp.html

Включает в себя: Apache, MySQL, PHP, phpMyAdmin, Perl, FileZilla FTP Server, Mercury Mail Transport System.

Русская версия: нет.

Проверка технологий HTML5

Когда ваш браузер отображает веб-страницу, он конструирует объектную модель документа (Document Object Model, DOM) — набор объектов, представленных HTML-элементами на странице. Каждый элемент — каждый <p>, каждый <div> и каждый <span> — показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element, но они слишком специфичны).

Ко всем DOM-объектам можно применить основные свойства, но некоторые объекты имеют больше свойств, чем другие. В браузерах, поддерживающих возможности HTML5, отдельные объекты обладают уникальными свойствами. Заглядывание в DOM подскажет вам, какие возможности поддерживаются.

Вот четыре основных техники для исследования поддерживаемых браузером технологий. Начиная с более простой и заканчивая комплексной техникой.

Страницы