Или е елегантното?

Не може просто да се вдигне и да ни разкажете за постепенното подобрение, без да се споменава постепенно влошаване. Каква е разликата между тези понятия? Както вече бе споменато по-рано. доброто разграждане може да се преведе като отказоустойчивост. Това е много широко понятие, но в контекста на мрежата да може да се разбира като отказоустойчивост уеб предния край, от страна на сървъра сайтове и така нататък. В тази статия, постепенно влошаване се разбира отказоустойчивост клиент уеб интерфейси.

Какво е прогресивно подобрение? Най-често терминът се превежда като прогресивна подобрение. Прогресивно подобряване предполага, че уеб-интерфейса, за да бъде създадена на етапи, цикли, от прости до сложни. На всеки етап трябва да се получи завършен уеб интерфейс, който ще бъде по-добре, по-красив и по-удобно последно. Можем да кажем, че в момента има четири етапа:

"Добрият стар-HTML» етап

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

В третия етап се използват новите възможности на CSS3 спецификации на семейството, както и документът е доведен до блясък: полупрозрачни плочи, заоблени ъгли, сенки. Също така, с CSS3, можете да добавите различни анимации и декоративно fishechki: постепенното затихване или изместване елементи, подчертавайки полета на формуляра, и така нататък.

Ние обобщи целите на описаните стъпки:

Смисълът на документ, логично оформление. Технологии: HTML.

Външен вид. Технологии: CSS.

Перфектен външен вид. Технологии: CSS3.

Можем да кажем, че уеб интерфейса, създаден добросъвестно и високо качество, в съответствие с подхода на елегантното, ще се държи по същия начин, както и уеб интерфейса, построена в съответствие с постепенното повишаване. Това означава, че постепенното подобрение - това е нищо като постепенно влошаване, доведена до съвършенство. И все пак, имайте предвид, основните разлики между тези понятия:

• Елегантното - широко понятие от постепенното повишаване, което се ограничава само до уеб интерфейса. Прогресивно подобрение - това е нашият, роден, vebovskoe.
• Прогресивно подобряване определя вектора на движение (започнете с прост!), Но за елегантното не е толкова важно.
• Прогресивно подобряване акцентира върху значението на съдържанието, но и за елегантното е от второстепенно значение.

Като цяло, постепенно включване на подобрения - по-строги критерии и последователна идеология на развитие на уеб интерфейси.

Защо се появява Подобрение Progressive

По-рано, ако вземете и в съответствие с елегантното, максимално качество, за да уеб интерфейса, можете да получите едно и също нещо, когато прилагането на прогресивно подобрение. Защо тогава излезе с това подобрение?

Отговорът е прост: не само, който е направил елегантното е много високо качество. Наистина е разочароващо, престижна и отговорни разработчици. В крайна сметка, за да се каже, че "Аз - добре направено и да направи постепенно влошаване» можеше почти никого, но усилията и времето се различава от порядъка на разработчиците.

Такова нещо кратко с устойчивост доста скучно "право" за разработчици, а аз трябваше да направя нещо. Прогресивно подобряване стана като реакция на лош постепенно влошаване. Сега, наистина добри програмисти и дизайнери могат да направят прогресивно подобрение, и лошите не са, тъй като е трудно и трудоемко. В същото време новият подход абсорбира всички най-добри практики на елегантното.

Практически пример

В първия етап ще се създаде форма се използва чист HTML. Да, формата не е толкова красива, но функционален. Полученият код и резултат са показани по-долу:

Във втория етап, чрез използване на прост CSS да се направи под формата по-красиво: добавите фон, размер, пълнеж. Сега формата изглежда по-добре:

В третия етап ние използваме някои нови CSS свойства, за да се получи форма блясък. Добави закръгляване използване граничен радиус, сянка елементи с формата на кутия, в сянка, използване на CSS-градиенти за проектиране бутони и така нататък. Ние използваме някои разширени селектори да се отървете от излишните подложка. Резултатът е доста добър:

По-простият пример, ние показахме как подходът е прогресивно подобрение. Между другото, този пример може да "се чувствам жив" в интерактивна демонстрация на HTML академия.

Вход ще се използва AJAX, а след това се занимавам с формата не е необходимо, използвайте Разделение. Заоблени ъгли и tenyushki ... Това е проблем. За полета за въвеждане с помощта на входа без граници, както и да зададете фон рамка на картина и сенки. Бътън ще направи с помощта на DIV, във фонов режим висят картини бутони, с наклон и сенки. Супер! И в стария IE ще изглежда красива, и само няколко снимки, за да изрежете.

Прогресивно Подобрение и адаптивен дизайн

В същото време е имало подобен подход, който се нарича мобилния първо място. На руския неговото име може да се преведе като "първи за мобилни телефони!". В действителност, тя е една и съща адаптивен дизайн, но с изискване: винаги започне проектирането адаптивен интерфейс с мобилната версия.

Съотношението на адаптивния дизайн и мобилен първия подход е много подобен на съотношението на елегантното и прогресивно подобрение. Първият подход е да се двойка на генерала, а другият конкретен подход и допринася за първите допълнителни изисквания:. "Стартира HTML с прост", "да започне да се изработи мобилна версия на", "потупване котката"

Заслужава да се отбележи, че подвижните подходи са перфектно съчетани помежду си и перфектно се допълват взаимно. И всички топ резултати, ще се обявяват в близко бъдеще: "Правим мобилен първи + прогресивно подобрение».

Защо се чете

Знаейки за този подход и разбиране на работата си, можете да се обзаложите задачи изпълнителя по-точно. Разработчиците на програми постепенното повишаване на вашия сайт ще ви спести пари, така и време.