mineaeliza: { web design }: html

Se afișează postările cu eticheta html. Afișați toate postările

Responsive email templates articles

http://zurb.com/playground/responsive-email-templates
-> they use floats for columns and don't support Outlook 2007, 2010, 2013

http://www.campaignmonitor.com/guides/mobile/
-> good old campaignmonitor

http://internations.github.io/antwort/
-> they use align:left for columns and display block for smaller resolutions

http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i
-> also align:left and simple devicewidth class (no display block); good testing email app

Stamen - beautiful toner maps

http://maps.stamen.com/toner/embed#16/44.4374/26.0335

Latimea siteurilor traditionale (css)

Facebook.com	981px (fixed)
Linkedin.com	980px (fixed)
Ebay.com (listing)	760px - 1200px (liquid)
Amazon.com	980px - 100% (liquid)
Mobile.de (fixed)	978px (fixed)
Bmw.de (fixed) (left aligned)	1024px (fixed)
Mercedes-benz.de (left aligned)	1000px (fixed)
Gsmarena.com	1002px (fixed)
Nytimes.com	972px (fixed)

Browser specific hacks - css filters

Webkit only css hack (safari, chrome):

@media screen and (-webkit-min-device-pixel-ratio:0) {

body{ background:red}

}

Firefox only css hack:

@-moz-document url-prefix() {

body{ background:green}

}

Opera only css hack:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

       body {background:orange}

 }

IE only css hack:

body {  
 background : green\9; /* IE9,IE8 and below */  
 *background : yellow; /* IE7 and below */  
 _background : orange; /* IE6 */  
}

More:
 http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/

[Javascript] Exemplu break + label

outerloop:
  for(var i = 0; i < 10; i++) {
    innerloop:
      for(var j = 0; j < 10; j++) {
          if (j > 3) break;             // Quit the innermost loop
          if (i == 2) break innerloop;  // Do the same thing
          if (i == 4) break outerloop;  // Quit the outer loop
          document.write("i = " + i + " j = " + j + "
");
      }
  }
  document.write("FINAL i = " + i + " j = " + j + "
");

Rezultatul fiind:

i = 0 j = 0
i = 0 j = 1
i = 0 j = 2
i = 0 j = 3
i = 1 j = 0
i = 1 j = 1
i = 1 j = 2
i = 1 j = 3
i = 3 j = 0
i = 3 j = 1
i = 3 j = 2
i = 3 j = 3
FINAL i = 4 j = 0

Selectorii CSS

Selector	Ce reprezinta	Denumire
*	Orice element	Selector universal
E	Orice element E, i.e orice marcaj de tipul E	Selectori de marcaj
E F	Orice element F, care este descendent al unui element de tip E	Selector Descendent
E > F	Orice element F care este copil al unui element de tip E	Selector copil
E:first-child	Orice element E, cand este primul copil ala parintelui sau	Selector primul-copil
E:link E:visited	Linkurile nevizitate inca/vizitate	Pseudo-clasele linkurilor
E:active E:hover E:focus	Linkurile E, la diferite actiuni (atentie la ordinea LOVE/HATE)	Pseudo-clasele dinamice
E:lang(c)	Orice element E daca este in limba c	Pseudo clasa de limba
E + F	Orice element F ce este imediat urmator unui element vecin, de tip E	Selector adiacent
E[x]	Orice element E, al carui atribut x este setat	Selector de atribut
E[x="eroare"]	Orice element E, al carui atribut x are exact valoarea "eroare"	Selector de atribut
E[x~="warning"]	Orice element E, al carui atribut x are contine valoarea "eroare"(dintr-o lista de valori)	Selector de atribut
E[x\|="en"]	Orice element E, al carui atribut x incepe cu "en"	Selector de atribut
DIV.warning	Echivalent cu DIV[class~="warning"]: orice div ale carui clase contine si valoarea "warning"	Selector de clasa
E#myid	Orice element E cu id-ul "myid"	Selector de id

I heart CSS - Firefox only

Made with CSS3.

Vezi si alte iconite facute exclusiv cu CSS: http://rathersplendid.net/cssicons/

Eternele colturi rotunjite in css cross browser

border:5px solid #666;
-o-border-radius: 20px; // pentru Opera
-icab-border-radius: 20px; //pentru Icab
-khtml-border-radius: 20px;// pentru Konqueror
-moz-border-radius: 20px;// pentru Firefox
-webkit-border-radius: 20px;// pentru Safari si Chrome
border-radius: 20px;// viitorul standard

Ps. Despre IE:
Prezent:
"While the W3C has specified the border-radius properties in its latest CSS3 working draft, Microsoft has not implemented the border-radius properties in Internet Explorer 8." vezi http://msdn.microsoft.com/en-us/library/bb250413%28VS.85%29.aspx#borderradius

Viitorul IE9:
A more meaningful (from the point of view of web developers) example of standards support involves rounded corners. Here’s IE9 drawing rounded corners

Update: Da, Ie9 suporta border-radius !!!

Diacritice romanesti in HTML

Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ș, ț. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.

Ă ă	căciulă
Â â Î î	accent circumflex;
Ș ș Ț ț	virgulă, plasată sub literele corespunzătoare s, S, t, T.

valoare	cod
ă	ă
Ă	Ă
â	â
Â	Â
î	î
Î	Î
ş	ş
Ş	Ş
ţ	ţ
Ţ	Ţ

Notiuni CSS: Layout fluid (lichid) si layout elastic

Layout fluid:

widthurile blockurilor sunt procentuale

exemplu: www.okazii.ro

Layout elastic:

widthurile blockurilor sunt relative la unitatea literelor (definite in em-uri)

exemplu: http://jontangerine.com/

Ps. De observat in acest exemplu este si dimensiunea imaginii din header definita in em-uri. Tot site-ul va face un fel de zoom la redimensionarea fontului.

Articol interesant despre imagini fluide:
http://unstoppablerobotninja.com/entry/fluid-images/

Unitati de masura in html / css

Unitati absolute:

in: inches — 1 inch = 2.54 centimetri
cm: centimetri
mm: milimetri
pt: points — 1pt= 1/72 inch
pc: picas — 1 pica = 12 points

Unitati relative

em: dimensiunea unei litere a fontului curent
ex: inaltimea literei 'x' a fontului curent
px: pixeli, relativi la rezolutia device-ului folosit

W3.org recomanda folosirea em-urilor, iar altii recomanda folosirea ex-urilor pentru mai multa precizie.

Wikipedia - liste cu typeface-uri:

Culorile in HTML si XHTML - denumiri si valori hexazecimale

Denumire	Valoare hexazecimala	Exemplificare
Black	#000000
Silver	#C0C0C0
Gray	#808080
White	#FFFFFF
Maroon	#800000
Red	#FF0000
Purple	#800080
Fuchsia	#FF00FF
Green	#008000
Lime	#00FF00
Olive	#808000
Yellow	#FFFF00
Navy	#000080
Blue	#0000FF
Teal	#008080
Aqua	#00FFFF

Lectia 1 HTML - formulare - tagurile <fieldset>, <legend>, <label>

Iata modalitatea de scriere corecta a unui formular:

.........................................................................................................................................

<form action="inregistrare.php" method="post">
<fieldset>
<legend>Formular inscriere</legend>

<label for="numeu">Nume</label>
<input type="text" value="Popescu" name="nume" id="numeu" />

<label for="pren">Prenume</label>
<input type="text" value="Mihai" name="prenume" id="pren" />

<span>Sex</span>
<label for="sex_m"><input type="radio" name="sex" value="m" id="sex_m" /> masculin</label>
<label for="sex_f"><input type="radio" name="sex" value="f" id="sex_f" checked="checked" /> feminin</label>

<label>Data nasterii</label>
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
</select>
<select>
<option selected="selected">Alege data</option>
<optgroup label="Lung">
<option>Ianuarie</option>
<option>Februarie</option>
<option>Martie</option>
</optgroup>
<optgroup label="Scurt">
<option>Ianuarie</option>
<option>Februarie</option>
<option>Martie</option>
</optgroup>

</select>

<label for="poza">Poza</label>
<input type="file" name="poza" id="poza" />

<label for="mesaj">Mesaj:</label>
<textarea name="mesaj" id="mesaj" cols="30" rows="10">Completeaza cu mesajul tau...</textarea>

<label for="nl"><input type="checkbox" value="nl" name="nl" id="nl" /> Doresc sa ma abonez la NL dvs.</label>
<label for="acord"><input type="checkbox" value="ac" name="acord" id="acord" /> Sunt de acord cu <a href="#">termenii si conditiile</a></label>

<input type="submit" value="Trimite!" />
</fieldset>

</form>

.........................................................................................................................................

Taguri des omise in formulare, insa foarte importante sunt:

<fieldset> = element ce permite gruparea elementelor (campuri, butoane, etichete) aflate in legatura

<legend> = titlul fieldsetului

<label> = eticheta corespunzatoare campului urmator; atributul for permite asocierea etichetei cu elementul corespunzator. Observati cele 2 modalitati de scriere: separat - in cazul unui camp de tip text si inclus in cazul inputurilor de tip checkbox sau radio.

Folosirea acestor taguri imbunatateste gradul de accesibilitate al (x)html-ului.

Obs. Nu uitati in cazul xhtml-ului sa folositi numai atribute insotite de valoare: disabled="disabled".

no more tables

pentru toti cei care... ma irita :)) ...
pentru toti cei care inca mai folositi layout-uri tabelare, va recomand sa cititi urmatoarele articole(prezentari) de referinta:

Daca mai analizam inca o data posibilitatile infinite de design cu ajutorul css-ului si conceptul siteului si al cartii CSS Zen Garden, nu putem sa ajungem decat la o singura concuzie: "tables are bad!" Incercati! desi la prima vedere compatibilitatea browserelor va va da multe batai de cap, lucrurile se vor simplifica iar avantajele folosirii unui cod conform standardelor va va aduce multe beneficii.

Si pentru a va da inca un mic imbold, cititi si tendintele si draft-urile in lucru de la w3c, la categoria CSS3.

ps. scuzati-mi va rog engleza amestecata cu romana, dar unii termeni suna mai bine in engleza si mult prea complicat in romana..:)

web standards - forms

http://www.webstandards.org/learn/tutorials/accessible-forms/03-accessible-forms.html

Accesskeys

Recent Web Accessibility Articles - Using Accesskeys - Is it worth it? :: WATS.ca

mineaeliza: { web design }