Будущее началось
Будущее началось и мы свидетели этого начала. Давайте вспомним Била Гейтса основателя компании Microsoft и его программу Windows. Сергей Брин и Лэрри Пейдж – основателей компании Google. Операционная система Windows стала платформой – начало новой революции. Нас с вами ждет жизнь онлайн. Уже сегодня социальные сети, почтовые рассылки, операционные системы знают все о каждом. Будущее началось… О том каким оно будет – фильм:
…Бог не тот, кто управляет, Бог тот, кто пишет код и задает алгоритм, создавая среду. Программисты – «Боги» нового мира.
Убедитесь, что ваш веб – сайт отображает правильную кодировку
Зачем беспокоиться о кодировке?
Кодировка символов, связанных с веб-страницами определяет, как страница оказывает в веб-браузере. Одним из важных различий в понимании концепции является разница между кодировкой символов и набор символов.
Сайт Dictionary.com определяет набор символов частности сопоставление символов и байтов строки (т. е. набор символов, необходимых для определенного языка). Кодировка является набор символов, для которых уникальный номер был присвоен каждого символа. Кодировка символов, как эти абстрактные символы отображаются в байтах для манипуляций в компьютере. Подводя итог, кодировка символов сообщает веб-браузер, какой набор символов, используемый при преобразовании биты в символы.
Вот несколько причин по которым, вы должны указать кодировку:
- Вы должны беспокоиться о кодировке поскольку его заявление стало требование с HTML 4.01 спецификацию.
- Если кодировка не указана в веб-страницe, браузер будет догадываться, что кодировка должна быть использован для отображения содержимого веб-страницы. Это догадки может привести к неправильной схемы кодирования.
- Браузеры позволяют пользователям выбрать кодировку по умолчанию. Этот выбор может не совпадать с местом для веб-страницы.
Что имеется в наличии?
Кодировки поддерживаются в HTML определяется с Unicode набор символов. Юникод поддерживает все алфавита с возможностью представлять миллионов символов, включая знаки ударения. Каждый символ присваивает два байта кода. Это идет вразрез с популярной кодировкой ASCII используемой в Соединенных Штатах, который использует один байт.
Вот примеры доступных кодировок символов:
- ISO 8859-1: Это стандартная кодировка латинским алфавитом. Как Latin1, она включает в себя латинской основе языках мира.
- UTF-8 (8-битный UCS / Unicode Transformation Format): Это кодировка символов может представлять любой символ в стандарте Юникод. Основное различие состоит в начальной кодировки байт-код и характер заданий для UTF-8 имеет обратную совместимость с ASCII.
- UTF-16 (16-битный Unicode Transformation Format): Это длины кодировки Unicode для переменной, которая способна кодировки каждого символа Unicode.
- US-ASCII: Это подмножество UTF-8, который охватывает стандартные ASCII набор символов.
Полный список параметров кодирования символов можно ознакомиться в Интернете, но UTF-8 является рекомендуемой и самые популярные схемы кодирования используется и сегодня.
Выбор кодировки
Основная проблема с выбора персонажа кодирования необходимо использовать тот, который охватывает все различные языки и потребности целевой аудитории. Кодировка символов имеет решающее значение при работе с многоязычными приложениями, которые могут использовать различные языки, которые используют различные схемы кодирования символов.
При выборе схемы кодировки символов, вы должны быть осведомлены о символов, которые вы будете использовать, наряду кодировка поддерживается браузером и любые другие приложения, которые могут быть использованы для работы с файлами. Стандартов UTF-8 (который я придерживаться для моей работы) и US-ASCII широко поддерживаются браузерами. Вы должны сделать свое исследование при работе с другими стандартами, чем эти два.
Использование кодировки
При доступе к веб-приложениям, веб-браузер будет использовать следующие шаги, чтобы определить его кодировку:
HTTP Content-Type заголовка, отправленных сервером по умолчанию способ определения кодировки символов. Это предпочтительный метод, и он имеет приоритет над другими пунктами в этом списке. Вот пример Content-Type линии направлены как часть заголовка HTTP:
Content-Type: text/html; charset=utf-8
Веб-разработчики могут указать Content-Type заголовок для страницы с помощью синтаксиса для разработчика.Например, разработчик ASP.NET может использовать следующую строку:
%Response.charset=»utf-8″%
Разработчик PHP может использовать эту строку:
header('Content-type: text/html; charset=utf-8');
XHTML доцентов может использовать декларации XML в первой строке страницы, чтобы указать кодировку. Вот один пример:
<?xml version="1.0" encoding="UTF-8"?>
Вы можете использовать HTML / XHTML мета Content-Type элемента. Он находится в заголовке часть страницы с кодировки, указанной в его кодировку собственности.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
CSS
Вы можете объявить кодировку внешних таблиц стилей CSS. Этот шаг не является необходимым с CSS встроенные в страницы, кодировка символов страницы заботится об этом. Вы можете назначить кодировку для CSS файл, добавив его в верхней части CSS файл. Следующий синтаксис:
@charset "utf-8";
10 причин почему следует использовать Firebug
1. Console (Консоль)
Первым, что вы заметите при открытии Firebug (из панели статуса или используя комбинацию клавиш ctrl+F12) будет консольная панель – Console. После быстрого просмотра, можно предположить, что это альтернативная версия консоли ошибок (Ctrl+Shift+J). Основные возможности сводятся к двум следующим:
- регистрация (логирование) ошибок, предупреждений и сообщений
- возможность работать с Javascript кодом
Но Firebug расширяет функциональность браузера Firefox, поэтому он может выполнять гораздо больше, а именно:
- регистрация ошибок Javascript, CSS, XML, XMLHttpRequest (AJAX) и Chrome (ядро Firefox)
- выполнение Javascript кода на текущей веб-странице
- передает дополнительный Javascript объект для управления (в консоль)
Давайте рассмотрим несколько примеров работы объекта console. Допустим, дан следующий HTML файл.
<html>
<head>
<script type="text/javascript">
console.time(1);
console.log('the script section has started executing');
console.warn('warning message');
console.error('error message');
console.info('info message');
console.log(
'finishing script execution\n',
'execution took:'
);
console.timeEnd(1);
</script>
</head>
</html>
Это приведет к следующему результату:
2. HTML
Следующая панель и та, над которой, я уверен, вы проведете много времени, разбита на несколько секций, которые мы рассмотрим ниже.
- Эта кнопка является эквивалентом «Inspect Element» в контекстном меню на странице. Кроме того, что она полезна для быстрого поиска элемента на странице, она также выделяет выбранный элемент.
- В этой части у нас показана иерархическая структура выбранного элемента и возможность выполнения серии действий (для каждого отдельного компонета этой структуры), например:
- копирование содержимого HTML кода
- создание XPath выражений
- присоединение событийного наблюдения (и логирование в консольной панели Console)
- удаление элемента
- редактирование элемента и его дочерних узлов
- перемещение элемента во вкладку DOM для отслеживания
- Главное окно панели: полезно (используется useful) для перемещения по HTML документу, быстрого изменения кода и обнаружения ошибок в коде (например, раннее закрытие div элемента). Контекстное меню предлагает тот же функциональный набор как и во второй вкладке
- В этой вкладке вычислен стиль текущей страницы или отображаемого элемента. Возможность на ходу менять стили и проверять наследование стилей CSS является ее наиболее значимой чертой.
- Посредством этой вкладки можно исследовать box-модель элемента: размер содержимого (content size), заполнение (padding), смещения (offsets), расстояние от кромки (margins) и границы (borders).
- Вкладка DOM показывает список всех методов и свойств выбранного на данный момент элемента .
3. CSS
Основная разница между этой панелью и вкладкой Style панели HTML является то, что вы можете работать с невычисляемыми стилями. Я выделил и пронумеровал секции (и свойства на этот раз).
- Если страница, на которой вы работаете, содержит несколько таблиц стилей, тогда мы можем выбрать нужную таблицу стилей.
- Основная область где показан CSS код.
- Легкость изменения CSS свойства.
- Легко запретить CSS правило.
4. Script
Иногда вам приходится сталкиваться с трудностями, когда вы пишете Javascript код. Основную часть времени вы работаете с панелью Console; только в экстренных случаях это заставит вас перейти на панель Script. Предвидя эти экстренные случаи (которые наверняка произойдут), давайте рассмотрим эту панель, и познакомимся с ней поближе
- Выпадающая вниз кнопка с помощью которой мы можем выбрать желаемый файл скрипта.
- Функции отладки: continue , step in , step over и step out . Они действуют лишь тогда когда выполнение кода достигает точки останова.
- Основное окно. Здесь мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.
- Похожая на панель DOM, вкладка Watch показывает методы и параметры объекта для отлаживаемого кода.
- Показывает содержимое стека функций в реальном времени.
- Список активных на данный момент точек останова. Отсюда можно только удалить точку останова
5. DOM
Такой же как и HTML->DOM. Здесь ничего не отличается от того что было упомянутого раньше, поэтому перейдем к следующей вкладке.
6. NET
Интересует сколько времени заняла загрузка вашей страницы? Или вы хотите знать, ответ на какой запрос занял больше всего времени? К счастью, это тоже может быть осуществлено через панель Net.
- Запросы могут быть отфильтрованы в соответствии с их типом.
- Каждый запрос показан в этой вкладке. В конце списка запросов мы видим суммарный подсчет: количества запросов, объема, сколько было закешировано и общее время выполнения всех запросов.
- Может быть показано еще более детально, например: HTTP заголовки, ответ и кеш (такой же как и ответ)
Тестирование выполнения
Необходимо протестировать выполнение особой функции или цикла? Используйте характеристику «timer» в Firebug.
function TimeTracker(){
console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}
Три шага. Начинаем с вызова «console.time» в которой указваем уникальный ключ. Далее, вставляем наш код. Потом, вызываем console.timeEnd, и снова вводим наш уникальный ключ.
7. Reference
Это дополнительная панель предоставляемая CodeBurner, расширением Firebug’а. Как говорит само название, через эту панель мы имеем быстрый доступ к нашему HTML и CSS коду. Не смотря на то, что название панели говорит само за себя, мы все же рассмотрим ее детальнее.
- Секция поиска и фильтрации.
- Здесь один над другим расположены результаты, в нашем случае только один результат.
- Область совместимости с основными версиями браузеров. Да, Chrome не присутствует в этом списке, но Chrome использует тот же движок что и Safari, называемый Webkit, так что если есть совместимость с Safari, то и совместимость с Chrome будет такая же хорошая.
- И если отображаемой информации в этой панели будет недостаточно, вы можете перейти по этой ссылке для получения большего количества информации, такой как: примеры, совместимость с большим количеством версий браузеров, описание и т.д.
8. PixelPerfect
Если вы часто выполняете нарезку из PSD документа, вы знаете сколько времени занимает замер расстояний между возможными структурными элементами. Именно здесь PixelPerfect показывает свою силу. Наличие данного дополнения в вашей панели инструментов, поможет вам делать безупречную нарезку.
- С помощью этой кнопки мы можем добавлять множество слоев изображений для текущей страницы.
- Список слоев, где мы можем применить или удалять слой.
- Область параметров слоя.
9. YSlow
Другое дополнение Firebug’а было разработано Yahoo!, которое может предложить улучшения скоростных характеристик, основываясь на серии выполненных тестов.
С помощью YSlow, мы можем оценить общую производительность нашего сайта. Мы можем легко обнаружить места которые могут быть улучшены, а также получить ряд рекомендаций по улучшению.
Помимо круговой диаграммы, мы также имеем JSLint и Smush.it в своем распоряжении.
10. FirePHP
Наш последний, но не единственный, важный компонент Firebug’а это FirePHP. С помощью этого дополнения, вы можете прозрачно отправлять информацию (предупреждения, ошибки, логи, данные) в панель Console из вашего PHP кода. Пример использования FirePHP на стороне сайта:
<?php
FB::log('Log message');
FB::info('Info message');
FB::warn('Warn message');
FB::error('Error message');
?>
Заключение
Я надеюсь этот небольшой список панелей/дополнений Firebug’а поможет в вашей жизни вебразработчика – как помог мне. В конце-концов, мы все знаем что ошибки рано или поздно случаются, так что нет другого выхода кроме как подготовиться к ним.
Источник: www.net.tutsplus.com
