Category Archives: Webdesign

Browser CSS hacks

Posted on by
Reply 
 
/***** Selector Hacks ******/ 

/* IE6 and below */
* html #uno  { color: red } 

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red } 

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red } 

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red } 

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red } 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red } 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red } 

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
} 

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
} 

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  } 

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  } 

/* Everything but IE6-8 */
:root *> #quince { color: red  } 

/* IE7 */
*+html #dieciocho {  color: red } 

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red } 

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  } 

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; } 

/***** Attribute Hacks ******/ 

/* IE6 */
#once { _color: blue } 

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ } 

/* Everything but IE6 */
#diecisiete { color/**/: blue } 

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; } 

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; } 

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */ 

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Google chrome extensions pre web development

Posted on by
Reply
Google chrome je môj najobľúbenejší prehliadač stránok na windowsoch. Používam ho od jeho prvej verzie. Jediné čo mi na ňom chýbalo boli nástroje na developovanie webových stránok. Pre tieto účely som vždy zapínal firefox. Tento problém vyriešili extensiony. Bohužial firebug sa dá používať len vo verzii lite a nie je implementovaný ako extension ale len ako doplnkový javascript, ktorý musíte vložiť ručne do stránok. Ešte jeden krôčik a firefox nezapnem.
jQuery Shell
Webpage Screenshot

Robiť alebo nerobiť prototypy webových stránok?

Posted on by
3

Problémová oblasť:

  1. Klient dodá najviac nejaký excel súbor, aj to len málokedy.
  2. Klient nevie čo chce.
  3. Klient nevie ako to funguje štandardne a nevie ani ako to chce, aby to fungovalo.
  4. Klient nerozumie IT, technológii, procesom.
  5. Často krát klient nemá ani predstavu o dizajne, rozmiestnení prvkov, inzercie, …

Samozrejme sú výnimky. Niekedy ma prekvapí objednávateľ presnou špecifikáciou, rozumie sa problematike a dá mi konkrétne požiadavky.

Doteraz som väčšinou vždy nakreslil na stretnutí kopec obrázkov na papier, analyzoval potom požiadavky v hlave a dizajnoval rovno v grafickom programe. Zistil som však, že sa oplatí robiť ešte pred dizajnovaním prototyp webovej stránky, eshopu alebo aplikácie.

Výhody:

  1. Nezoberie to až tak veľa času a ušetrí veľa času v budúcnosti.
  2. Klient môže odsúhlasiť prototyp(rozmiestnenie prvkov, názvy položiek,…)
  3. Lepšie je mať niečo viditeľné a klikateľné na webe ako mať 50 stranovú špecifikáciu s nepresnými požiadavkami.
  4. Je to vlastne jedna z hlavných čŕt čoraz viac zaužívanejšieho prístupu ako je agilné programovanie .
  5. Dajú sa na prototype robiť používateľské testy.
  6. Vidí sa budúca funkcionalita. Dá sa lepšie naceniť.
  7. Vytvorí sa predstava o počte podstránok, viewov, o ich obsahu.
  8. Pokryjú sa aj  scénáre použitia používateľa.
  9. Šablóny prototypu sa dajú transformovať aj do výslednej šablóny po vytvorení dizajnu.
  10. Jednoduchšie špecifikovanie dizajnu pre dizajnéra (niekedy to môže byť ale kontraproduktívne, keď sa obmedzí webdizajnér daným prototypom a nevymýšľa vlastné “kreatívne” rozmiestnenie elementov webovej stránky) .

Čo použiť?

Existujú CSS frameworky ako blue print, 960 grid system a veľa ďalších, kde sú vytvorené základné layoutovacie prvky, je definovaná základná typografia. Ideálne je použiť WYSIWYG editor. Naposledy keď som robil cenovú ponuku pre jeden eshop, tak som ešte pred tým vytvoril prototyp. Ľahšie sa komunikovali potreby, robil som to síce zadarmo netušiac, či vôbec získam danú zákazku. Je to riskantný krok, ale oplatil sa spraviť, lebo sa veci urýchlili. Asi 8 viewov mi trvalo ručne spraviť asi 2 hodiny, čo ma nezabilo.  Myslím, že to muselo zaujať viac ako by som poslal len textovú špecifikáciu.

Nápad na Web 2.0 aplikáciu

Vytvoriť v budúcnosti webovú aplikáciu, v ktorej by sa dali prototypy robiť.  Samozrejme to musí mať export ako validné XHTML, CSS, najvhodnejšie by bolo aj keby to je pripravené už aj na ďalší vývoj a nasadenie na ľubovoľnom CMS. Protyp by mal byť ale klikateľný, a preto rozmýšľam nad vytvorením aj nejakého maličkého frameworku, ktorý by sa staral o administráciu všetkých viewov, ich prelinkovanie. Išlo by hlavne o nástroj pre web dizajnérov. Preťahovanie elementov z roletky a podobné  javascriptové vychytávky by sa takisto zišli. Niečo podobné už existuje a už som to aj zmienil na tomto blogu, ale to bolo skôr len za účelom skicovania, bolo to platené, nie je zatiaľ implementovaná interaktivita. Zišlo by sa niečo, čo sa dá robiť cez web, priamo na stretnutí s klientom a sautomatizuje to čo najviac činností. Uvidím ako na tom budem s časom. Ak si náhodou AJAX guru, tak sa ozvi kôli istej spolupráci.

Barcamp 2009

Posted on by
Reply

Akosi som pozabudol, že som sa vlastne zúčastnil na tejto ne-konfererencii, ktorá sa konala 21.2.2009 v Bratislave.  Nemôžem tu písať obsiahly report, lebo som sa zúčastnil len na maličkej časti prednášok, pretože som prišiel až poobede. Oproti prvému slovenskému barcampu bol tento na pre mňa nevhodnejšom mieste a nestihol som v podstate nič, čo som chcel vidieť, respektíve koho stretnúť. Nabudúce sa však určite budem chcieť zúčastniť. Toť z mojej strany.