В последно време много се дразня на хората, които си мисля, че изграждането на един сайт е супер проста и лесна работа. И че от техническа гледна точка един сайт (или даже уеб приложение) е в пъти по-прост от едно десктоп приложение. Затова реших да драсна няколко реда, за някои от важните неща за който трябва да се мисли в един сайт от frontend страната.
Като начало – html
За създаването на един сайт, трябва html. По принцип html е просто нещо, но и той като php-то е “измамно лесен”. За една добра html структура какво трябва да се гледа?
Първо дали е семантична – всеки html си има някакво значение. И това значение трябва да се ползва. Въпреки, че понякога това е много трудно. Примерно тага за списък <ul> трябва да се използва всеки път, когато има меню или списък от каквото и да е естество. За всяка форма към всеки елемент трябва да има <label> със съответния for атрибут, оказващ за кои елемент е този label. И т.н.
След това идва и seo-то. Много е важно html да е построен така, че една търсеща машина (google например) много лесно да може да се ориентира в самия сайт какво има. От една страна това е свързано със семантиката на html. Примерно е важно заглавието на страницата да е със <h1>, да има коректни meta тагове (по възможност различни за всяка страница), всяка връзка, ако няма текст, да има поне title атрибут. Както и всяка картинка. Също така е важно и реда на връзките в html къде ще са, за google колкото по-нагоре е връзката толкова по-голям приоритет има. Затова примерно в даден сайт в кода текста на страницата може да е преди менюто, но визуално менюто да е от ляво, а текста от дясно.
Картинки
Всеки сайт трябва да има картинки, нали така? Обаче и тук има няколко особености. Като за начало е важно да се разграничат два вида картинки – едните са част от дизайна на сайта, а другите са част от неговото съдържание. Тези, които са част от дизайна са примерно фона на сайта, различни орнаменти и други подобни. А тези които са част от съдържанието са примерно снимки на продукт, ако това е каталожен сайт или снимка от новина, ако в сайта има новини.
При добре свършена работа <img> тага се ползва само за снимки от съдържанието. Като всяка една от тях трябва да има алтернативен текст в alt пропъртито. Докато другите картинки, част от дизайна, се слагат като фон чрез css (за него по-долу).
Много важна е оптимизацията на снимките. Като за начало е почти задължително вече всички картинки от дизайна да се обединяват в sprite. Т.е. да се обединят в една снимка и тя да се прилага. Вече, в зависимост от дизайна, може да се ползват и няколко sprite-а. Така от една страна е по-лесно да се организира сайта (колкото и странно да се струва това на пръв поглед). От друга, сайтът се зарежда по-бързо, защото трябва да се изтегли само една снимка, а не примерно 10-20.
Също така е важно всяка снимка (особено sprite) да мине през нещо като SmushIt, за да и се намали размера, като и се изчистят ненужни мета данни.
Друга важна подробност е, че ако по дизайн някоя връзка, примерно от менюто, трябва да е картинка (например, защото там се ползва някой изчанчен шрифт с antialiasing), тя трябва да се сложи като фон. А текста, който е написан в нея, да се сложи и като title атрибут на връзката и да се сложи като текст в самата връзка (и да се скрие с css).
Cascading Style Sheets или за по-кратко css
Стиловете трябва да са отделени в css файл, за предпочитане само в един за по-лесно зареждане. Не е препоръчително ползването на <style> тага или inline стилове (style=”").
Ако се ползват стилове предназначени само за IE, не трябва да се ползват с хакове, а да са отделени във файлове според версията на IE чрез conditional comments. Например <!–[if lte IE 6]> <link rel=”stylesheet” type=”text/css” href=”stylesheets/IE6fix.css” /> <![endif]–> ще зареди файл важащ само за версии на IE до 6 включително. Стиловете трябва да се организират поне според структурата на html-а (header, content, sidebar, footer…) и по значението им (за текст, форми, заглавия…).
Не лоша идея е да се използва css reset.
Хубаво е пропъртитата да са подредени по азбучен ред и задължително да се ползват shorthand. Например padding-top: 5px; padding-right: 15px; padding-bottom: 12px; padding-left: 10px може да се изпише padding: 5px 15px 12px 10px. Имената на class и id трябва да са смислени, указващи частта от html, за която са предназначени (header, footer, nav_main, nav_categories). Ползването на дълги селектори като #header .menu .home li a се отразява зле на IE, а и по принцип е затормозяващо.
Ползването на нови селектори като box-shadow не е невъзможно, тъй като те имат поддръжка или алтернатива в повечето браузъри, включително IE, което намалява значително ползването на изображения. За намаляване и оптимизиране на css кода могат да се ползват css компресори, но такива, които не ползват нестандартни вредящи похвати, като да заменят strong с b. Освен това може да се приложи компресия gzip.
Приложна магия – JavaScript
JavaScript е един от най-неразбраните програмни езици в света. Поради различни причини, за които, ако трябва да пиша, ще ми трябват поне 1-2 поста още. Но въпреки това е един от любимите ми езици. 
Надявам се да не се налага да казвам че всичкия JavaScript трябва да е unobtrusive.
За JavaScript си имам едно правило – всичко в сайта трябва да работи без javascript. Тук идеята е следната. Ако примерно имаме галерия със снимки – една голяма и малки тъмбнейли – при натискане на даден тъмбнейл се сменя голямата снимка. Обаче ако няма javascript, какво правим? Много просто – всяка снимка при натискане да се отваря в нов прозорец, за да може потребителя така или иначе да я види. А ако има javascript просто ще спрем отварянето и ще я покажем с хубав ефект.
Естествено, има неща, които без javascript не работят. Тук правя следното – просто ги крия, т.е. при зареждане на страницата са маркирани като невидими и след като се зареди javascript-а ги показвам.
Само тук искам да отбележа, че става дума за най-нормален сайт, който трябва да бъде достъпен отвсякъде и понякога без JavaScript просто няма накъде.
Браузъри
Yahoo имат един списък с браузъри – http://developer.yahoo.com/yui/articles/gbs/. Дефакто в A-Grade (и IE6) браузърите се налага сайта да работи. За IE6 може и да не работи толкова добре. Все пак, който ползва IE6 (и като цялата IE фамилия де), си е свикнал да не вижда хубави работи…
Скорост
Една от новите ми любими теми.
Като за начало има 2 инструмента, с които може да се замери скоростта на сайта по различни показатели (става дума само за html/css/js/assets часта) – YSlow и Google Page Speed.
Някои от най-важните неща са:
- css най-отгоре и в един файл
- javascript най-отдолу и в един файл
- компресиране на всичко, което се праща от сървъра (тук има и малко работа по server-side)
- expire headers
- по-малко DOM (html) елементи
- по-прости css селектори
Една нова дума взе да се появява из различни презентации и постове при темата за Скорост и това е – Progressive HTML Rendering.
Идеята там е, че за потребителя страницата се “построява” пред очите му и така се създава усещането за скорост. За това много помага JavaScript да е възможно най-долу. Защото когато браузърът стигне <script> таг, забравя всичко останало. Затова много хора се насочват към това с малко javascript да зареждат останалия javascript, защото така не се блокира нишката на браузъра.
Заключение
И това е само една малка част от нещата, които се правят само по обвивката на един сайт. По принцип за всяка точка тук може да се пишат серии от постове. Да не говорим колко много развитие и промени има по темата.
Естествено. винаги може някой да си хване един dreamweaver и да си нареди 2-3 картинки и да каже, че има сайт. То и аз така съм почнал. Но в един момент това си е професия със своите тънкости и особености. Даже и името и е много яко - Frontend Engineering.
п.п. Само да вметна, че аз се водя web developer в Pixel Depo и основно работя по нещата, които стоят под frontend-a и JavaScript-a .
