Front-end разработчик

Web front-end (уеб фронт енд) е термин, описващ частта от уеб приложение или страница, която е видима за крайния потребител. Целта на front-end разработчиците е създаването на интернет сайтове и уеб приложения базирани на интернет технологии като HTML, CSS, JavaScript, Flash и т.н., в частта им, която върви на браузъра на потребителя. Те се занимават със създаването, поддържането, оформлението, навигацията и функционалността на интернет страниците, както и съвместимостта им с различни устройства, браузъри и техните версии.

Front-end девелопър – Мисловна карта

Някои от отговорностите на front-end разработчиците включват:

Едно от задълженията на front-end девелопърите е поддръжката на различни устройства и браузъри.

• Разработка на динамични уеб страници
• Създаване и поддръжка на уеб страници
• Създаване и поддръжка на приложения базирани на уеб технологии
• Уеб дизайн
• Стилизиране на сайтове
• Осигуряване на удобна навигация и структурирано съдържание
• Проектиране на потребителски интерфейси
• SEO оптимизация
• Разработване на решения базирани на CMS системи
• Поддържане, независимо от браузър или устройство, на еднакъв изглед и функционалност

Използвани технологии

HTML и XHTML

HTML и XHTML са основните маркиращи езици, за създаване на уеб страници и друга информация, която да бъде визуализирана от уеб браузър. Чрез HTML елементи (тагове) се създават основните блокове, оформящи структурата на страницата. Тя е съществена за по-лесното намиране на сайта от търсачки. HTML позволява вграждането на изображения, обекти и съдържание. Осигурява средства за създаване на структурирани документи чрез обозначаване на структурната семантика за текст като например заглавия, параграфи, листи, връзки, цитати и др. Позволява вграждане и на скриптове, писани на езици като Javascript, които повлияват на поведението на HTML страницата.

CSS

CSS (Cascading Style Sheets) е отделен език, съдържащ множество инструменти, които позволяват изграждането на облика на HTML страниците. Предимства, които предоставя на front-end разработчиците: проектиран е с цел да отделя представянето от съдържанието на страниците, позволява лесен контрол над голям брой HTML страници без да се променя HTML кода на всяка една от страниците, подобрява достъпността на съдържанието и неговата гъвкавост, може да се прилага към всеки XML документ (не само към HTML и XHTML).

Предпроцесори за CSS код

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

• SASS (Syntactically Awesome Stylesheets) е разширение на CSS, което прави работата с CSS по-лесна и организирана, тъй като въвежда променливи, функции и др.
• LESS (The Dynamic Stylesheet Language) също като SASS) разширение на CSS, което използва променливи, вложени селектори, функции и др. LESS работи и на сървърната и на клиентски-ориентираната част от системата.

JavaScript

JavaScript е интерпретиран (скриптов), платформено независим език за програмиране, който се изпълнява при клиента. Най-често се прилага към HTML-а на интернет страница с цел добавяне на функционалност и зареждане на данни. JavaScript функции могат да се свържат със събития на страницата (например: движение/натискане на мишката, клавиатурата или елемент от страницата, и други потребителски действия). JavaScript не трябва да се бърка с Java.

Основни задачи в повечето JavaScript приложения са:

• Зареждане на данни чрез AJAX
• Ефекти с изображения и HTML елементи: скриване/показване, пренареждане, влачене, слайд шоу, анимация и много други.
• Управление на прозорци и рамки.
• Разпознаване на възможностите на браузъра.
• Използване на камерата и микрофона.
• Създаване на 3D графики WebGL.

JavaScript библиотеки

JavaScript библиотека е готов код, който позволява по-лесно писане на приложения чрез използване на предварително създадени решения. Примери за JavaScript библиотеки са jQuery, Prototype, Underscore.js, Sammy.js, Mustache (използване и създаване на шаблони), Kendo UI (цялостна разработка на SPA приложения), Modernizr, Angular JS (създаване на SPA приложения), Knockout.js и Ext JS.

Алтернативни езици за програмиране

Има различни алтернативни езици, които могат да компилират крайния код в JavaScript. Те обикновено добавят някои липсващи функции и реализират собствени езикови конструкции. Такива езици са Coffeescript, Kaffeine и Dart.

CMS

Голямата популярност на CMS програмите (или Системи за управление на съдържанието), която се дължи на редица факти (сред които лекотата при управление на съдържанието на сайта) налага работата на front-end разработчиците с тях. CMS системите позволяват на крайните потребители бързо и лесно, без да имат знания по HTML, да редактират съдържанието на сайтовете си: създаване на нови, изтриване на стари и редактиране на съществуващи статии, добавяне на менюта, коригиране на хипервръзки, инсталиране на допълнителни компоненти и др.). Едни от най-популярните CMS програми са: WordPress, Drupal, Joomla! и Sitefinity.

Други Web технологии

• Adobe Flash е една от най-популярните и използвани мултимедийни среди за създаване на анимирани интернет страници, уеб реклами, уеб игри, както и на различни програми и презентации. Има богати възможности за възпроизвеждане на видео и аудио, което прави средата изключително привлекателна, както и основно средство в работата на много професионални дизайнери. Flash позволява създаването на така наречените rich internet applications.
• Microsoft Silverlight е технология за създаване на уеб приложения с подобни функции и предназначения на приложенията, създадени с Flash. Silverlight се използва най-често за видео стрийминг, мултимедия, компютърна графика и анимация.

Софтуер за front-end разработка

Редактори на код

Въпреки че HTML и CSS може да се редактира с всеки текстов редактор като Microsoft Word или Notepad, редакторите на изходен код предоставят допълнителна функционалност като валидиране на кода, автоматично затваряне на тагове, синтаксисно маркиране и др.

• Notepad++
• PSPad
• Aptana Studio
• Sublime Text
• Vim

WYSIWYG редактори

Редакторите WYSIWYG са тип HTML редактори, при които съдържанието по време на редактиране изглежда като крайния резултат.

• Adobe Dreamweaver
• KompoZer
• Web Page Maker

Съпътстващи/Необходими умения

Познания за потребителски интерфейси (GUI), Дизайн и съпътстващи програми (PhotoShop, Illustrator), мултимедия (аудио, видео, анимация), CMS, сървърни технологии (комуникация front-end/back-end, клиент-сървър), QA и тестване, сигурност, SEO, управление на проекти.

Създаването на един сайт с интерактивна визия и качествено съдържание е недостатъчно за популяризирането му. Front-end специалистите използват сложни техники и действия за подобряването на видимостта на сайта в интернет чрез интернет маркетинг.

Интернет маркетингът е глобален термин, който включва SEO, SEM, SMM, e-mail маркетинг и др.

• SEO (Search engine optimization) e процес, включващ поредица от действия (добавяне на ключови думи, добавяне на карта на сайта, предназначена за търсещи машини, добавяне на хипервръзки към сайта от други сайтове на сродна тематика с добър рейтинг и др.), които подобряват класирането на един сайт в търсещи машини като Google, Yahoo, MSN Search и др.
• SEM (Search engine marketing) е процес, който освен SEO техниките, включва и създаване на платени реклами.
• SMM (Social media marketing) е процес на създаване на кампании в социалните мрежи.

Вижте също

• уеб приложение
• уеб дизайн

Външни препратки

• Разлики между Уеб Дизайнер, Front-end Разработчик и Уеб Програмист – Блогът на Павел Иванов
• SASS – официален сайт
• LESS – официален сайт
• Sublime Text – официален сайт
• Microsoft Silverlight – официален сайт