Емо Соколов

В миналото, css нинджите били войни, специално тренирани в различни стилове на xhtml и css техники и разбира се обичайно въоръжени с различни уеб дизайн / програмистки инструменти.

Ето и няколко от възмжните симптоми:

• 1. Първото нещо, което правиш, когато попаднеш на нов сайт, е да видиш сорс кода му.
• 2. Чувстваш, че си крайно обсебен от xhtml и css.
• 3. Некадърно написан код, те кара да изпитваш спешна нужда да го пренапишеш на момента, дори да знаеш, че сайта въобще не не е твой.
• 4. Живееш, според каноните на Семантичната библия.
• 5. Страстно мразиш Интернет Експлорър 5,6,7,8 ~, и искаш да го пратиш по дяволите, заедно с всичките му създатели и всички, които още го използват.
• 6. Неинтуитивен сайт с калпава навигация те кара да крещиш на ум и на глас проклинайки бездарния уеб дизайнер.
• 7. Имате толкова много уеб девелопърски допълнения инсталирани на браузъра си, че чак е заприличал на пулт на космически кораб.
• 8. Личната ти страница е пълна с линкове към уеб дизан / програмистки сайтове.
• 9. Не ти пука, че докато си работили върху някой проект, често ти се е случвало да усъмнеш в 4-5 часа сутринта.
• 10. Сънищата ти са свързани с CSS техники.
• 11. Можеш да пишеш CSS код по-бързо от колкото да хвърляте нинджа звезди.
• 12. Когато твоята „друга половинка“ отегчено повдига вежди, на вашите уеб/css шеги.
• 13. Когато твоята „друга половинка“ трябва да се конкурира с компютъра ти за твоето вниманието
• 14. Когато се усетите, че основните ви контакти в ICQ/Skype са други CSS нинджи, с които ежедневно обсъждате или критикувате чужди уеб сайтове.
• 15.Когато изпадате в истеричен смях или неубоздан гняв когато разглевдате този сайт.(Не пропоръчвам да гледате сорс кода ми, ако сте със слабо сърце или в напреднала бременност).
• 16. Прочете всичко до тук и си мислиш – От къде ме познава този тип, че и да пише за мен!

Можете да допълните списъка, оставяйки коментар по-долу.

Какво се случва със сайтовете напоследък? За кого работи всеки уеб дизайнер днес, всеки собственик на сайт? За потребителите на сайта? или за интернет търсачките?

И друг път съм се замислял, на къде по дяволите за се запътили нещата със съдържанието в сайтовете. Замислял съм се да, просто не толкова сериозно, колкото днес. Ставам тази сутрин – Събота. Закуска, кафе, скандал и сядам на компютъра, за да разгледам, какво ново са измъдрили собствениците на любимите ми сайтове.Цъкам на фейвъритс и се вглеждам в съдържанието на папкта. Мдааам, не ми се налага да се съсредоточавам, съдържанието се състои само от 2 сайта. Не е като да имам голям избор. А имаше време, когато един един не ми стигаше за да разгледам всички сайтове, които следях. Седя си, гледам си и се чудя. Чудя се, как стана така, че от толкова полезни и интересни сайтове, които преглеждах ежедневно, останаха само 2, които ми предлагат съдържание, което не ме кара да се напия, да си разкъсам ризата и да се махна от тоя живот.

Връщам се малко назад във времето, когато бях щастлив, ентусиазиран и неориентиран потребител на интернет. На който и сайт да попаднех, можех да остана с часове на него, поглъщайки ненаситно купища интересна и полезна информация. Носталгия. Отварям очи – действителност! Имам чувството, че всеки е наел по-един некадърен писател за сайта си, за да го напълни с безсмислено съдържание, което, ще се хареса много на Google да кажем, но ще накара мен, теб или на който и да е друг „обикновен потребител“ да си каже – м?. В днещно време, май всичко се свежда до рейтинг, рейтин и пак .. рейтинг.

Ето как, според МЕН стоят нещата.

Потребител Х разбира, че потребител Y е реализирал приход от 500лв от сайта си за уроци за фотошоп през изминалия месец и си казва: „Хм, абе аз от фотошоп не разбирам, ама и аз искам приходи от моя сайт, ще взема да копирам малко съдържание оттук – оттам, ще го преразкажа малко и ще хвърля всички сили и ресурси с които разполагам за да излизам по-напред в Google от потребител Y, дизайна и структурата на сайта, не ме интересува, важното е Google да я хареса“. Речено-сторено. След месец-два, при търсене на „уроци за фотошоп“, потребител Х излиза много, ама много по-напред от потребител Y, защото не си е губил времето да пише собствени статии, уроци или нещо друго полезно, а го е използвал в надлъгване с интернет търсачките. Браво. Потребител X, токущо спечели 1000лв. Въпросът е,

какво спечели потребителя,

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

Има ли решение на този проблем?

Ами незнам, аз съм си обикновен потребител, попадащ в същите тези капани, като всички останали. Ако не друго, поне вече разпознавам кога един сайт, ще ми бъде полезен и интересен от пръв поглед (е, почти винаги).

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

Хм.. май ще спра до тук, че взех да си губя мисълта нещо. Пък и колкото и да разсъждавам върху тази тема, няма да постигна нищо, освен да плюя на вече и без това, не толкова страхотното ми съботно настроение. BRB.

Това е работата ми за Марвълъс Маркетинг ЕООД като уеб дизайнер. Сайтове за резервации на апартаменти на хотелски начала и резервации на хотели. Част? Каква ти част, не помня, от кога не съм правил сайт на различна тематика. Въпреки, че вече 3 години правя тези сайтове, от време на време, все още ми се случва да се наслаждавам на работатакато дизайнер. Ето част от последния ми проект, който мисля, че става добре:

И да, знам, изглежда твърде обикновен, но това си е част от плана, за този тип сайтове.

Това е първият ми пост, свързан директно с работата ми като дизайнер и още ще последват. Дори смятам да публикувам и част от работата ми по някои по-стари проекти. Другото нещо, което ще направя, е че ще е да се пробвам да напиша няколко урока за Adobe Fireworks – програмата с която аз създавам моите уеб дизайн превюта.

Аз лично, не пишех CSS до скоро, но сега се налага. За това, спокойно мога да се определя като начинаещ. Съвсем начинаещ. В момента, всеки път, когато ми се налага да направя нещо ново свързано с CSS, откривам по една купчина неща, които улесняват живота ми в последствие .
Има някои полезни неща, които научих от уроци из нет-а или от приятели програмисти (Валери Бучински), и които искам да споделя тук, за останалите прохождащи в писането на CSS. Ето някои от тях:

1. Задайте размера на текста , без да използвате пиксели

Ако се чудите, как някои уеб дизайнери, успешно прилагат em като мярка вместо пиксели, не се чудете повече а продължете да четете. Има един начин да ресетнете размерите на фонтовете за целия сайт, в който случай ще се получи, че 1.0em се равнява на 10px.
body { font-size: 62.5% } Просто добавете font-size: 62.5% в body стила и сте готови. Сега като размер можете да използвате em-ове (хаха) като размер, вместо пиксели. Ето например как изглежда един параграф използвайки em:
p { font-size: 1.3em; line-height: 1.2em; } Може би вече сте си задали въпроса, защо пък да има значение, по какъв начин декларирам размера на фонтовете в сайта ми (даге)?. „Достъпен за всички възрасти“ или по-просто казано, за да направите сайта си, удобен за максимална част от аудиоторията ви. Объркахте се още повече ? :) хехе и аз така, тоя не можа да го напише с малко побългарени примери :) Идеята е, че сайта трябва да остане четлив, когато се използва вграденото в повечето браузери увеличаване на сайта. Възрастните хора или хората с нарушено зрение, често използват тази функция и ако сте сложили абсолютни стойности на шрифтовете, крайния резултат ще бъде неадекватно изглеждащи текстове (Това си е малко преувеличено, но съм съгласен , че ем вече се е наложило като стандарт в задаването на големината на текстовете в CSS за това и включих това във статията ми).

2. Направете кода си лесен за четене.

Когато съм се натъквал последните месеци на CSS, писан от някой от колегите ми, винаги ми е правило впечатление, как приятно за окото си разделят heading таговете (и не само тях разбира се, но с това ще дам пример). Мисля че изглеждаше такa:
h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }Това се е много удобно, ако искате бързо да намерите точно този heading , който ви трябва точно сега, на момента, без да се налага да изчетете половината си CSS. Също така, е полезно, и ако работите върху по-голям проект, където използвате един и същ heading таг (да кажем h2) на много места в сайта, защото както знаем (или не!), можем да му даваме различни стойности в отделните класове, всеки път, когото го използваме, без да се притесняваме, че ще вземе стойности от първоначалното му деклариране. Аз лично използвам такова подреждане и за параграф таговете, Anchor таговете и всички останали тагове, които изискват различни класове, за да изглеждат както трябва във даден случай.

3.Подреждайте кода си на секции

Аз до скоро не го правех. И много други програмисти уеб дизайнери също не го правят. Защо? Мм… ми честно казано незнам., но е факт, че ако искаме да редактираме някакъв код след няколко месеца или години, ще бъде много, ама много по-лесно да намирате класове и елементи, които искате да редактирате в същия този код.
Ето как аз структорирам моя код:
/* Structure */Тук слагам основните дивове и класове
/* Typography */Тук описвам параграфите, Headings и другите дребни неща свързани с форматирането на текста, като strong, code и други.
/* Links */Това си говори само за себе си ( не, че другите не го правят де, но това си е класика ). Тук слагам всички anchor тагове.
/* Lists, images, etc. */ Тук слагам стиловете за картинки, списъци и всички останали елементи които не се вписват в останалите секции. Ако например обаче имам неподреден списък за менюто на сайта ми, ще си направя съвсем нова секция (/* Navigation*/ примерно) и ще сложа всички елементи, които са свързани по някакъв начин с тази част от кода в нея. По този начин ако след време ми се наложи да преправя само навигацията на сайта ми, ще ми бъде много по-лесно да го направя.

4. Не използвайте div-вове за щяло и нещяло

Аз лично, нямам нищо против използването на повече div елементи, но само, когато е обоснована нуждата от такива. Всеки път ми идва да се напия, да си разкъсам ризата и да се махна от тоя живот, когато видя някой, който задава стил на заглавиятa на своите статии, използвайки div елемент. Опитвайте се, когато е възможно, да изпозвате по често span или някакъв друг подходящ за случая елемент примерно, вместо div. Не бързайте, просто обмисляйте всяко свое действие. Това може да ви донесе само плюсове.

5. Задайте стил само веднъж

Не че много се замислям по принцип, но напоследък забелязах, че пиша „margin:0; padding:0″ във почти всеки елемент. Наскоро открих как колегата ми Елин е разрешил този си проблем, използвайки *, за да зададе дадена стойност, на всички елементи по страницата наведнъж. Първото нещо което ми дойде на ум, беше, че е безсмислено да пиша margin и pading с едни и същи параметри във всеки таг, след като мога да ги задам за всички тагове, само веднъж:
* { margin: 0; padding: 0; } Сега вече използвам margin и padding, само в случаите, когато се налага .
Надявам се, че съм бил полезен за някой.

За никого не е тайна, че използването на CSS за прозрачност на картинки, е едно от нещата, което не се възприема по един и същ начин от различните браузери. За да успеете да го направите съвмeстимо с всички браузери, трябва да използвате специфични за тези браузери CSS атрибути. За щастие, те не си пречат помежду си, и за това могат да се сложат под един калпак, и така използвайки един и същ клас, когато искате да добавите прозрачност, ще сте сигурни че работи под всички браузери. Ето един примерен клас със прозрачност зададена за 70%:

А ето и, за какво точно, са тези CSS атрибути:

• opacity: 0.7; Това е „На-важния“ атрибут, защото това е CSS стандарта в момента. Използвайки този атрибут, прозрачноста, ще „работи“ при почти всички версии на Firefox, Safari, и Opera. По-принцип, това щеше да е всичко, от което, ще имате нужда при използване на прозрачност с CSS, но само ако всички браузери поддържаха текущия стандарт. За съжелние това не е така в момента, точно за това е и тази статия :)
• filter:alpha(opacity=70); Единствено по този начин, можете да накарате „Негово Нищожество“ Internet Explorer да ви послуша.
• -moz-opacity:0.7; Този атрибут ви трябва, за да подържате наистина старите браузери от семейството на Mozzila (Netscape Navigator).
• -khtml-opacity: 0.7; А това е за също много стара версия на Safari (1.x)

И не на последно място, искам да препоръчам на всички, никога да не използват прозрачност, директно на картинката, а да сложат класа в див-а, който съдържа картинката. Всичко това е за съвместим и оптимизиран код :)