www.jquery.com
официален сайт на популярната javascript библиотека. От тук може да се свалят последните версии на jQuery, а също така разполага и с богата документация и уроци.

www.learningjquery.com
обширна информация за използването на jQuery библиотеката

www.nettuts.com/javascript-ajax/build-a-top-panel-with-jquery
изграждане на много ефектна login форма

www.nettuts.com/javascript-ajax/jquery-style-switcher
как да си направим превключвател на стиловете с помоща на jQuery. В примера е демострирано използването на два отделни стила и автоматичното им превключване, в зависимост от часовия период, съответно ден или нощ.

www.planetozh.com/projects/lightbox-clones
над 50 различни вариации на широко използваната фото галерия lightbox, базирана на jQuery

www.no-margin-for-errors.com/projects/prettyPhoto
lightbox галерия за снимки. подобна съм използвал за www.complex-diana.com

www.mind-projects.it/blog/jqzoom_v10
интересен zoom ефект върху снимки. използван е в www.charovnica.net

www.jqueryfordesigners.com/demo/fade-revisited.html
меню с плавен hover ефект

www.nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result/index.html
атрактивно анимирано меню

www.eyecon.ro/spacegallery
една по-различна фото галерия

labs.activespotlight.net/jQuery/menu_demo.html
ajax меню, походящо за продуктов каталог с няколко нива на подкатегориите

В настоящият пост ще представя един вариант за откриване на потенциални пропуски и проблемни зони в HTML документите ни, чрез използване на специални стилове за диагностика и откриване на проблемните елементи. Техниката е описана от Ерик Майер - един от водещите световни уеб разработчици, автор на някои от най-ценните книги в областта на уеб дизайна и ползваемостта.

Решението, което предлага той засяга някои по-рядко търсени грешки в сайтовете, които остават скрити от погледа на разработчика. Дори и с напълно валиден код на страницата има вероятност да са направени някои пропуски, които в определени моменти да се отразят на цялостната структура на документа. Tехниките работят под Firefox, Opera и Safari, а за Internet Explorer 7 има добавен допълнителен фикс, но едва ли някой ще го използва при положение, че разполага с някой от другите браузъри.

За прилагането на тази техника се използва специално създадения за случая CSS файл който се добавя в хедъра на HTML документа след останалите стилове, които ползваме. Файлът може да бъде свален от тук CSS файл за по-добрите браузъри и от тук CSS файл за лошия Internet Explorer. А какъв е резултата може да видите тук демо (за по-добрите браузъри) и тук демо2 (за IE7).

Кратко пояснение:

Използват се стилове, които в зависимост от състоянието на дадения елемент или негов атрибут, го изобразяват с различни стойности на някои негови CSS свойства /предимно рамка (border) и фон (background)/.

Основните цели, за които се използва тази техника са:

• Откриване на елементи с празни стойности за class и id (<span class=”" id=”">);
• Хипервръзки (<а>), на които е забравено да се добави стойност на атрибута href, или пък е със стойност”#”, която обикновено използваме в процеса на разработка и сме пропуснали да актуализираме(<a href=”#”>). В случая синтаксиса ще е правилен, но няма да получим резултата, който сме заложили в следствие на действие от страна на посетителите.
• Линкове без атрибут “title” или с празни стойности на атрибута title (<a href title=”" … >).
• Откриване на графични елементи без атрибути alt и title или с празни стойности на атрибутите alt и title (<img src=”xxx.png” alt=”" title=”"/>).

Оригинална статия и допълнителна информация:
http://meyerweb.com/eric/tools/css/diagnostics/index.html
http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/
http://24ways.org/2007/diagnostic-styling

Настоящата ми длъжност е HTML/CSS developer. В общи линии характеристиките и се припокриват с длъжността CSS дизайнер, за която става дума в поста на Alen Grakalic, в който и той си задава въпроса “Дизайн или кодиране?”. По-долу съм се опитал да преведа неговите разсъждения, а също и съм добавил някои мои такива.

CSS дизайнерът е човек занимаващ се с уеб дизайн, който е в състояние да доведе готовия дизайн до стандартен документ в HTML формат. Основните изисквания към длъжността са добри познания при работа с графични приложения(Фотошоп) и отлично познаване на уеб технологиите и стандартите. Такъв човек би бил идеалният вариант за компания, която има ограничен бюджет и не може на си позволи да наеме екип от специалисти за същата работа. В ежедневната работа на CSS дизайнерът се налага да се справя с разнообразни задачи и проблеми - изграждане на структури(layouts), цветови схеми(color schemes), CSS хакове и др. Най-големият плюс на тази професия, е че имаш пълен контрол върху целия процес по изграждането на сайта и си зависим единствено от клиента. Ако сте един от тези хора знаете за какво говоря.
В големи компании политиката е да се изграждат екипи и хората в тях да се специализират в по-тясна област. В такива моменти се налага да се направи избор. В случая той е между дизайна и писането на код. Затова ще се опитам да посоча част от положителните и отрицателните аспекти на това да се концентрираш върху една от двете дейности.

Дизайн

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

• винаги може да си направиш и добавиш нов дизайн към порфолиото, дори и да не е за реален клиент.
• може да направиш нещо наистина интересно и сложно като дизайн, което обаче не би го направил ако се налага в последствие го режеш на HTML-и ти самия.
• ако работиш достатъчно бързо, почасовото заплащане може да бъде доста високо.
• можеш да предлагаш и други услуги свързани с графичния дизайн, като печатна реклама (визитки, брошури и т.н.) или лого дизайн.
• като покажеш твоят последен дизайн на майка си и тя ще каже: “Браво! На мама златото!!!”.

• клиентите понякога имат лош вкус и искат да сложите неща, които не бихте си позволили да уронват репутацията ви сред колеги и клиенти и едва ли бихте посочили в портфолиото си.
• налага ви се да работите с некачествени материали, предоставени от клиентите, като лога, изображения и снимки и очакват от вас да направите чудо с тези материали за да получат мечтания дизайн.
• безкрайни срокове, породени от това, че без значение какво е било уговорено в началото, впоследствие променят до последно голяма част от изискванията си.
• независимо колко добре си се справил с дизайна има голяма вероятност той да бъде отхвърлен.
• повечето клиенти искат нещо оригинално и очакват за минимално време да им се предложи нещо уникално. Както ми каза един клиент: “Искам сайта ми да е като жив.”, каквото и да означава това в неговите представи, но той очаква да го получи “като жив”.

Код (XHTML/CSS)

За всеки CSS дизайнер или Front-end разработчик е голяма гордост и удовлетворение, когато създава страници с напълно валиден (x)HTML и CSS код, при които валидатора на W3C ги озарява със зелена светлина. Но по-важното е, че плодът на техният труд отговаря на условията за достъпност и е еднакво добре видим във всички браузъри, а също така и при печат. За един такъв човек е трудно да си представи, че все още съществуват хора, които използват таблици за разположението на елементите, без да осъзнават колко грешно е това. Основните плюсове на уеб кодера са:

• ако си достатъчно добър няма начин работата ти да бъде отхвърлена
• лесно може да пресметнеш колко време ще ти отнеме един проект
• получаваш статут на експерт ако страниците ти изглеждат еднакво под всички браузъри
• понякога не ти е нужно вдъхновение за да си вършиш добре работата, а може да го правиш и на “автопилот”
• клиента никога не се бърка в работата ти
• можеш и е препоръчително да използваш повторно, код който вече е използван
• причисляваш се към програмистите, които са по ценени като труд и имаш възможност да се развиваш в посока към уеб програмирането (Java Script, Ajax, PHP, ASP.Net, Python)

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

Ще се радвам ако споделите и вашето мнение по темата!

Все повече уеб разработчици се стараят да изграждат структурата на своите и клиентските сайтове, използвайки възможностите за CSS(каскадните набори от стилове), за оформление и контрол над представянето на елементите на страницата. Основните проблеми идват с различното интерпретиране на стойностите на CSS свойствата от различните браузъри, а също и от различните версии на един и същ уеб браузър. Затова се налага използването на допълнителни техники за фиксиране на тези разминавания, което от своя страна усложнява разработката и удължава времето за завършване на проекта.

Като повечето от уеб дизайнерите и разработчиците и аз използвам Mozilla Firefox като основен браузър, а Internet Explorer версии 6 и 7, Opera и Safari само за тест и фиксиране на бъговете в дизайна. Ровейки се в тематични сайтове, свързани с моята професия, попаднах на една интересна страница, която прави онлайн тест и извежда резултат до колко софтуерът, с който сърфираш в мрежата е съвместим и поддържа стандарта CSS3, който тепърва навлиза в по-масова употреба, и чиито възможности ще ползваме вероятно следващите няколко години.

Резултатите от тестовете не са особено изненадващи:

Opera 9.51 - From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)

Safari 3.1.2 - From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)

Mozilla Firefox 3.0.1 - From the 43 selectors 36 have passed, 0 are buggy and 7 are unsupported (Passed 373 out of 578 tests)

Mozilla Firefox 2.0.0.16 - From the 43 selectors 26 have passed, 10 are buggy and 7 are unsupported (Passed 357 out of 578 tests)

Internet Explorer 7 - From the 43 selectors 13 have passed, 4 are buggy and 26 are unsupported (Passed 330 out of 578 tests)

Internet Explorer 6 - From the 43 selectors 10 have passed, 1 are buggy and 32 are unsupported (Passed 276 out of 578 tests)

За Opera могат да се кажат само добри думи. Това е браузърът който от години, ако не и от самото му начало, следва стриктно стандартите. Safari поема в правилната посока след като за версия 3.0 имаше някои пропуски, а в последната си версия за Windows вече демонстрира пълна поддръжка. Донякъде изненада е резултата за последната версия на Mozilla Firefox - 3.0.1, която макар и с подобрени стойности все още не достига до 100% support. И естествено на опашката остават двeтe най-използвани версии на Internet Explorer - 6 и 7, които сравнени помежду си показват макар и бавна, но положителна тенденция към подобрение. Дано тя да се запази и в осмата версия на браузъра на Microsoft, който в момента е в бета версия.

Тествайте вашият браузър тук: http://www.css3.info/selectors-test/test.html

Постове от същата категория:
[catlist=10]

Изграждането на форма за вход на регистрирани потребители позволява използването на различни техники. Разпространеното и масово използвано допреди години представяне в таблици, вече е изместено от безтабличните форми, при които се използват препоръчваните от W3C похвати и тагове, подобряващи достъпността и ползваемостта на уеб формата.

Някои от основните положения в примера са:
1. Използване на тага <label>. Това е т.нар. етикет, който в случая се прикрепя към полето за въвеждане на данни от потребителя, като се използва неговото ID (<label for=”name”>Name</label><input type=”text” value=”" id=”name”/>). Това позволява при клик върху текста на етикета, фокуса да се пренася директно в полето за въвеждане на данни.
2. Използване на разпознаване на браузъра и версията му(за Internet Explorer) и добавяне на отделни стилове за някои от елементите в страницата, с основна цел фиксиране на проблеми в позиционирането на HTML елементите. Основния проблем който се решава с този похват е неправилното интерпретиране от страна на IE6 на стойността на CSS свойството “margin”.
Пример:
<!–[if lte IE 6]>
<style type=”text/css”>
input.btn { margin: 0.5em 0 0 5.7em;}
</style>
<![endif]–>

Демо: HTML form
Download: HTML form (.zip)
Оригинален пример: http://www.muttmansion.com/lightbox/text_lightbox/

Постове от същата категория:
[catlist=10]