Прогрессивная Enhancement является мощной методологией, которая позволяет веб-разработчикам сосредоточиться на создании наилучших веб-сайтов, при этом балансируя проблемы, присущие эти веб-сайты, доступ к нескольким неизвестным пользователем агентов.Прогрессивное улучшение (PE) является принцип, начиная с рок-прочный фундамент, а затем добавить улучшений, если вы знаете определенные посещении пользователем агенты могут справиться с улучшенными experience.
PE отличается от плавное снижение (GD) в том, что Б-г есть путь от сложности к простоте, в то время как ПЭ путь от простого к сложному.ЧП считается лучше, чем GD методологии, поскольку он стремится охватить более широкий круг потенциальных проблем в качестве базового.PE является белый с GD’ S blacklist.
That’ ы все хорошо, но почему я хочу использовать его
Часть Обращение PE это сила конце result.PE заставляет вас изначально планировать свой проект в качестве функциональной системы с использованием только самых основных веб-технологий.Это означает, что вы знаете, you’ всегда будете иметь прочный фундамент, чтобы возвратиться, как сложность вводится в project.
PE хорошо сочетается с принципом “ Выпуск рано, выпуск often.” По начиная с прочным фундаментом, вы сможете освободить проекты, работы, а затем сосредоточиться на добавлении колокола и свистки, в более подходящее time.
PE проекты проще в обслуживании.При этом акцент на “ первых принципов, ” разработчики могут сосредоточиться на более сложных участках системы взаимодействия, не беспокоясь о foundation.
PE также хорошо для ваших пользователей.Это дает им безопасность зная, что они могут посетить ваш сайт, используя любой из тысячи агентов-пользователей доступны для них и по-прежнему взаимодействовать с контентом, как агент allows.
Все права, так как я могу использовать его
С практической точки зрения, it’ проще всего разбить концепцию ЧП в разных слоях, каждый из здания на предыдущую, чтобы улучшить опыт взаимодействия с website.
Layers
Первый слой чистой, семантической HTML.Это позволяет текстовых, речевых, устаревшие и робототехнических агентов-пользователей для навигации по содержанию вашего сайта properly.
Второй слой CSS.Это позволяет визуально на основе пользовательских агентов, чтобы отображать или изменять визуальное представление website’ S content.
Третий слой JavaScript.Это позволяет пользователю агентов, которые способны использовать его для предоставления пользователям с повышенными usability.
Практические example
We’ создадим Постепенно расширенного списка навигации по сайту элементов, порядок которых сохраняется пользователем.Наша конечная цель состоит в том, чтобы пользователи имели перетащить и падение опыт, который сохраняет порядок пунктов меню с помощью AJAX.Но так как мы будем достижения этой конечной цели на основе принципов PE, всеПользователь агенты должны быть в состоянии взаимодействовать с нашего списка в том, как наиболее подходящий для them.
Первый layer
Здесь у нас есть семантическая разметка навигации.См. навигационно-1.html.
<form action="save_order.php" method="post">
<fieldset>
<legend>Order of Navigation</legend>
<ol>
<li id="homepage-12">Homepage <label for="menu-id-12">Change the order for Homepage</label><input type="text" name="homepage-12" id="menu-id-12" value="1" /></li>
<li id="contact-23">Contact Us <label for="menu-id-23">Change the order for Contact Us</label><input type="text" name="contact-23" id="menu-id-23" value="2" /></li>
<li id="about-16">About Us <label for="menu-id-16">Change the order for About Us</label><input type="text" name="about-16" id="menu-id-16" value="3" /></li>
<li id="latest-14">Latest News <label for="menu-id-14">Change the order for Latest News</label><input type="text" name="latest-14" id="menu-id-14" value="4" /></li>
</ol>
</fieldset>
<p><input type="submit" value="Save new order" /></p>
</form>
Навигации выложен как упорядоченный список в форме, так что пользователь может изменять порядок с помощью входного полях.Отдельных элементов списка приведены ID, что коррелирует с названием поля ввода (по причинам, которые станут понятны позднее — сейчас, он ничего не делает, но добавить немного веса к разметке).Этикетки для полей ввода помочь пользователю понять, как использовать form.
Нажимая “ Save” разместим на страницу PHP, которая будет определять новый порядок и печатать результаты, но может так же легко сохранить в базе данных.Страница не очень привлекательны на вид, но главное в том, что каждый элемент находится в месте, чтобы позволить любому пользователю агент, как ни основной, чтобы прочитать и понять форме.Экран читатели должны быть в состоянии обрабатывать эту форму, легко и навигации с помощью клавиатуры является функциональным и включен по default.
Наши save_order.php страница очень проста и просто эхо порядок пунктов меню передается через в POST.
<?php
foreach($_POST as $menu_item=>$order) {
echo "The order for $menu_item is $order";
}
?>
Очевидно, что это isn’ та продукция сценарий.Это просто показывает, что процедура обработки форма должна быть одной из первых взаимодействий в PE.
Второй layer
Сейчас мы добавим слой CSS, чтобы придать форму немного визуальной элегантности.См. навигационно-2.html.
name="code">
<style type="text/css">
form { width: 50%; margin: 0 auto; }
fieldset { background: #555555; padding: 1em; }
...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров