APUNTS DE HTML i CSS: de juliol 2009

CSS - TALLER - Maquetant una web amb CSS (pas a pas)

L'objectiu que hem de perseguir sempre és definir la estructura de la informació en llenguatge HTML i l'aspecte amb que volem que es representi en CSS, i si pot ser en una fulla externa. Us poso a continuació els passos que podríem seguir per aconseguir dissenyar una pàgina.

Muntem la estructura HTML.

ESTRUCTURA DE LA INFORMACIÓ EN HTML

EL NAVEGADOR REPRESENTA AIXÍ EL CODI ANTERIOR:

Li connectem la fulla d'estils externa.
No és obligatori però és pràctic.

Si de cas enrecordeu-vos de posar el IE7.js per que no tinguem problemes amb els Internet explorer 5.1, 5.5 i 6 a l'hora de representar les capses.

A la fulla d'estils fem:

I el resultat provisional és:

Una evolució d'aquesta plantilla base la podeu trobar clicant aquí. Us convindria analitzar-la.

Vista la pàgina avia.html[Clica aquí] i mireu el codi seu codi font i a continuació el codi CSS. Us el podeu descarregar el CSS d'aquí.

* { /*margin:0; padding:0;*/
/* Aquí definim aspectes globals que no admetin herència i que els vulguem a qualsevol contenidor. */
}

html, body {height:100%; margin: 0px;
padding: 0px;}
/* aconseguim que body arribi de dalt a baix */

body {
/*background-color: #223300;*/
background-image:url(../img/fons_body.jpg);
background-position:left center;
background-color:#cddcdf;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-repeat: repeat-x;
background-attachment: fixed;
}
a {text-decoration:none;}
a:link {color:#333333;}
a:visited {color:#333333;}
a:hover {color:#cc0000;}
a:active{color:#ff3300;}

p {margin:0; margin-bottom:1em;}

h1, h2, h3, h4, h5 {margin:0; padding:0;}

#ajustadora {
min-height:100%;
background-color:#FFFFFF;
margin-bottom:-50px;
background-attachment: fixed;
background-image: url(../img/fons_ajustadora.jpg);
background-repeat: repeat-x;
background-position: center;
}

#ajustadora, #peu {width:1000px; margin-left:auto; margin-right:auto;}

#peu {height:50px; margin-left:auto; margin-right:auto; clear:both;}

#peu span {position:relative; left:150px; top:10px;}

#cap {height:80px;}

#cap, #peu {background-color:#cc0000; color:#000000;}
/* cap i peu comparteixen els mateixos colors */

#logo, #titulo {height:100%;}

#logo {width:150px; float:left; }

#titulo {}

#dia {float:right; position:relative;top:10px; right:20px; text-align:right;}

#titulo h1 {margin:0; font-size:14px; color:#000000; position:relative; top:7px; left:8px; font-weight:bold; font-variant:small-caps; color:#000000;}

#titulo img {position:relative; top:8px; }

#menu {clear:both; padding-top:8px; padding-bottom:8px; background-color:#333333; margin-bottom:20px;
padding-left:150px; }

#menu a {margin-right:10px;}
#menu a:link {color:#eaeaea;}
#menu a:visited {color:#eaeaea;}
#menu a:hover {color:#ffffff;}
#menu a:active {color:#ffffff;}

#lateral {/*width:150px;*/
width:130px;
padding-right:20px;
float:right;
color: #cc0000;
font-size: 10px;
}

#lateral h5 {font-size:14px; text-align:center; padding:1px; color:#FFFFFF; margin-bottom:10px; font-variant:small-caps;}

#lateral .anunci {margin-bottom:10px;padding-bottom:10px; /*border-bottom:1px solid #cccccc;*/ background-image:url(../img/bora_inf.gif); background-position:bottom; background-repeat:repeat-x;}

.fnegre {background-color:#000000; color:#FFFFFF;}
.fvermell {background-color:#cc0000; color:#FFFFFF;}

#lateral-2 {width:230px; margin-right:20px; float:right; font-size:11px; color:#666666;}
#lateral-2 img {margin-bottom:2px; width:100%;}
#lateral-2 h3 { font-size:12px; padding:4px; background-color:#cc0000; color:#eeeeee; text-align:center; margin-bottom:10px; font-variant:small-caps;}
#lateral-2 h4 { font-size:12px; margin-bottom:.2em; display:inline;}

#lateral-2 .notialt {margin-bottom:20px;}

#lateral-2 .notialt a {color:#cc0000; }

#titulin {margin-bottom:20px;}
#titulin h2 {margin:0p; font-size:22px; text-align:justify; }

#miguitas {font-size:10px;}
#miguitas a {color:#CC0000;}

#data {font-size:10px; float:right; font-weight:bold; color:#cc0000;}

#submenu {/*width:150px;*/ width:120px; float:left; }

#submenu a {display:block; margin-bottom:3px; padding:4px; padding-top:2; padding-left:30px; padding-bottom:2px; width:110px; font-weight:bold; color:#666666; position:relative; top:-2px; letter-spacing:-1px; font-size:11px;
/* li posem farcit esquerre(marge intern per la esquerra)
per deixar espai per col·locar la imatge de fons del triangle als
estats hover i active dels enllaços */
}

#submenu a:hover {background-image:url(../img/submenuhover.gif); color:#FFFFFF; background-color:#cc0000; }
#submenu a:active { background-color:#cc0000; color:#FFFFFF;}
#submenu a:focus { background-color:#cc0000; color:#FFFFFF;}

#continguts {margin-left:150px; /*margin-right:170px;*/ margin-right:425px; height:auto; color:#333333;}

#continguts p {margin-top:0; margin-bottom:20px; text-align:justify;}

#nomeflotes {clear:both; height:50px;}

.notialt a:target {content: "hola";}

[Clica aquí]

[Clica aquí per veure tutorial pautat per posar menús emergents que es troba a la secció d'autoedició]

HTML - Charset UTF o ISO 8951 ?

La etiqueta "meta charset" serveix, entre d'altres coses, per que el navegador sàpigue amb quin joc de caràcters ha de representar el text.

Mireu aquest enllaç per saber més sobre si fer servir UTF o continuar amb l'ISO-8951 i caràcters especials. Clica aquí.

FLASH - Posar un Flash sense que surti l'avís de l'ActiveX

Unijimpe ens explica com aconseguir que no surti l'avís de l'ActiveX. Es fa mitjançant un javascript. Per més informació cliqueu aquí.

HTML - Etiquetes META

Aquí podeu mirar més sobre les etiquetes META.

CSS - Posicionant capses

Les capses les podem posicionar mitjançant CSS. Això, entre d'altres utilitats, és un recurs més, dels que tenim, per maquetar.

Quan es vol posicionar una capsa el primer que s'ha de fer és definir de quina manera. I això ho fem amb l'atribut "position:", el qual admet com a valors els següents:

absolute. Quan li donem aquest valor a position li estem dient al navegador que la capsa es situï respecte a la capsa body o respecte al seu element pare en cas que aquest estigui posicionat d'alguna manera. Per altra banda al posicionar d'aquesta manera la capsa s'aparta del "fluxe" natural dels continguts permetent que aquests es "comportin" com si la nostra capsa no hi fos.

relative.El posicionament relative és relatiu respecte al punt on es troba situat al codi font, no respecte al body. Per altra banda quan s’aparta del “flux natural” la resta de continguts es comporten com si encara hi fos.

static. Serveix per situar la capsa allà on es troba respecte al codi font.
fixed. Als navegadors moderns i també a IE7 i IE8 podem situar una capsa fixa que no es bellugui encara que moguem la barra de desplaçament.

Exemples de webs fetes amb HTML i CSS

El 90% de les webs no es fan íntegrament en Flash si no en HTML i CSS com a base, i en tot cas el flash no és la base si no una guirnalda més. Les raons són:

Són molt més flexibles en quant a la renovació de continguts.
Mitjançant llenguatges de servidor(p.ex: PHP, ASP, Python,...) es poden generar dinàmicament webs que treguin la informació, o no, d'una base de dades(p.ex: Mysql).
Tenen millor reputació per Google degut a que les pot indexar millor.

I aquest és el món real. És aquest el mercat generalista per on passa tothom, ja que tothom fa servir Google. Avui, a més, amb l'ús d'Ajax(Asynchronous JavaScript And XML) es poden fer coses similars que faríem amb Flash, en quant a interactivitat, però sense perdre grau d'indexabilitat.

Veiem-ne alguns exemples destacables de pàgines que fan servir (X)HTML+CSS com a base:

CSS - Recursos - Les unitats

A ignside.net expliquen molt bé les unitats. Cliqueu aquí.

CSS - Recursos - Javier Eguíluz Pérez

Javier Eguíluz Pérez ens brinda aquests dos excel·lents llibres en format PDF Introducción a CSS sota llicència creative commons no comercial, que es troba a http://www.librosweb.es/css

Introducció al CSS (PDF).
CSS Avanzado (PDF)

Felicitats Javier per aquestes dues perles tant magnífiques.

CSS - Recursos - Maquetar amb CSS

El camí per maquetar amb CSS no és inmediat. Convé que veieu tots els exemples possibles. Haureu de controlar les capses tot el que pugueu.

Hauríeu de mirar-vos els següents recursos:

[Continuarà...]

CSS - Com situar una capsa "PEU" a la part baixa de la finestra.

Introducció:
Tenim el codi següent:

I com veieu estem fent servir models xhtml1.0 transitional o xhtml1.0 strict, amb la qual cosa hem perdut la capacitat de posicionar capses tocant a la part inferior de la finestra del navegador tal i com passava uns pocs anys abans amb versions de navegadors anteriors. És una cosa que dona molts mals de cap habitualment per qui estava acostumat a treballar a la manera antiga ja que les pàgines queden com penjant de dalt quan encara no hi ha prou continguts.

La raó per la qual passa això té a veure amb que amb aquests modes transitional i strict els navegadors no consideren que el body hagi d'arribar de dalt a baix de la finestra. Hi ha una comprobació que podeu fer per adonar-vos d'això que és posar una vora a body i mirar fins on arriba quan encara no hi ha continguts.

body {border:5px solid #ff0000;}

El resultat és aquest:

Solució:

La capsa body no arriba a tocar ni el sostre ni les parets degut a que el navegador li representa marges i farcits en aquesta capsa per defecte. Per solucionar això fem:

body {margin:0; padding:0;}

La body no arriba fins a baix. Per aconseguir-ho hem de definir els CSS següents:
html, body {height:100%;}
body {margin:0; padding:0; }
Un cop estirat el body la capsa ajustadora també la podrem estirar al 100% del que ocupi el body.
A la fulla css posarem el següent codi:
body { margin:0; padding:0px; background-color:#000000;
/* Així posem els marges de body a zero. */
}

html, body {
/* "html, body" selector de grup. */
height:100%;
/* ocupen el 100% de la finestra estirant body */
}

#ajustadora {
width:955px;

margin:auto;
/* Això centra la capsa ajustadora */

min-height:100%;
/* ajustadora ocupa com a mínim el 100% de body */

/* NOTA: min-height: no està suportat a versions anteriors de Internet Explorer 7, a no ser que li poseu la biblioteca IE7.js */

Com veieu la capsa ajustadora arriba arran de finestra però la capsa peu sobresurt de la pantalla.

margin-bottom:-50px;
/* Això serveix per restar a l'alçada mínima de l'ajustadora, que és el 100% de la finestra, el que té d'alçada la capsa peu i d'aquesta manera aconseguim que la capsa "PEU" entri a la pantalla */

/*I per que el text de continguts no es superposi o s'amagui a causa de la footer, posem: */
padding-bottom:50px; /* l'alçada de peu */
/* I fins i tot posaríem una mica més per que l'usuari vegi espai*/
padding-bottom:100px;
}

#menu {width:150px; height:300px; float:left;}
#lateral {width:150px; height:300px; float:right;}
#continguts { }
#peu {width:995px; margin:auto; height:50px; background-color:#333333;}

NOTA: Potser convindria posar a #peu l'atribut: clear:both; en cas que les capses menu i lateral sobresurtissin per sobre de peu per contenir massa coses.

En un capítol més endavant i amb l'ajut de javascript farem que les capses menu i lateral arribin fins avall.

Agraïments i crèdits:
La solució que heu vist està basada a CSS STICKY FOOTER, Clilqueu aquí per anar a la pàgina original.

JAVASCRIPT - ARRODONIR CANTONADES AMB CSS i JAVASCRIPT

CSS

Quan s'implementi als navegadors CSS3, dintre de "x" anys i es deixin de fer servir els navegadors que encara no l'implementin podrem fer servir una propietat que s'està preparant per posar múltiples fons a una capsa.
Fent servir 4 capses anidades, una dintre de l'altre, podem posar una imatge cantonera de fons que no es repeteixi i col·locada de forma adient a cadascuna de les capses. L'usuari no ho percebrà. Això té l'avantatge que les capses poden ser líquides.
Si la capsa té una mida rígida li podem posar una imatge de fons que tingui els cants arrodonits.

Javascript

Nifty Corners Cube. Clica aquí per anar a la pàgina oficial. I aquí per anar a una pàgina que la expiquen en castellà.
Curvycorners. Clica aquí. per anar a la pàgina oficial. I aquí per anar a una pàgina en on la expliquen en castellà.
GOOGLE -> Javascript + round + corner

Comparatives de suport CSS entre els diferents navegadors

Podeu trobar un interessant article sobre la futura suportabilitat de l'estàndard CSS3. Cliqueu aquí .

L'anterior link està basat en l'aplicació online següent: Clica aquí.

També pots veure una comparativa a la Viquipèdia en anglès tot clicant aquí.

Diversos Hacks de selector per Internet Explorer

A la següent adreça fa un "recordatori" de selectors que entenen només els Internets Explorers.

http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml

Tot i això convé que tingueu en compte que això evoluciona. Per tant mireu també l'adreça de JavascriptKIT que parla dels hacks no recomanats. Clica aquí.

CSS - Convertir un Internet Explorer 5+ o 6 en un 7 - Llibreria IE7 de Dean Edwards.

Internet explorer 6, que ha durat 5 anys, encara el fa servir força gent. Però no admet plenament els atributs de CSS2. Però hi ha una possible solució si volem aplicar CSS més modern.

Una possible solució és fer servir una biblioteca de javascript de Dean Edwards anomenada IE7 que fa que Internet Explorer 5+ i 6 es comportin com un 7 admetent forces selectors més i també forces propietats més.

Us tradueixo les característiques d'aquest script:

La llibreria IE7 proporciona a Microsoft Internet Explorer el següent suport pels estàndards del W3C CSS i HTML:

suporta els següents selectors CSS:
- Selector de fill directe:
  pare>fill
- Selector d'element germà adjacent:
  + sibling
- Selector d'element germà:
  ~ sibling
- Selector per atribut
  [attr], [attr="value"], [attr~="value"] etc
- Selector .multiple.classes
  (error fixat)
- Selectors de pseudoclasse dinàmics:
  :hover, :active, :focus (per tots els elements i no només enllaços)
- Altres selectors de pseudoclasse:
  :first-child, :last-child, only-child, nth-child, nth-last-child
- :checked, :disabled, :enabled
- :empty, :contains(), :not()
- :before/:after/content:
- :lang()
Suport d'importació de fulls d'estils CSS amb import.
Preserva la cascada dels fulls d'estils.
No altera l'estructura del document.
No demana repetidament l'arbre DOM fent servir Javascript.
Utilitza CSS pur.
Suporta els modes de capsa del W3C l'estàndard i el mode quirks.
Suporta posicionament fixed (flicker free).
Suporta overflow:visible.
Suporta min/max-width/height.
Fixa elements trencats (X)HTML(abbr, object).
Estandaritza el comportament dels formularis.
Suporta el format PNG amb alpha transparent.
És un script lleuger (11KB).
Treballa amb Microsoft Internet Explorer 5+ (Windows only).

Podeu descarregar-vos el i mirar com es fa servir a la pàgina següent: Clica aquí. I si us fixeu també està preparant la llibreria IE8.

Navegadors - Condicionals d'Internet Explorer

Els navegadors Internet Explorer disposen d'un codi que només entenen ells. Es tracta d'unes etiquetes condicionals que podem fer servir per detectar si la pàgina s'està veient des d'un Internet explorer i fins i tot per detectar la versió. Veiem-ne alguns exemples.

Condicional [Si el navegador és Internet Explorer...]

Condicional [Si el navegador és Internet Explorer 7...]

Condicional [Si el navegador és anterior (low than) Internet Explorer 7...]

Entre mig d'aquestes etiquetes podem posar les etiquetes HTML que vulguem. Ens podria ser útil per definir fulles d'estil per navegadors més antics. Podeu ampliar la informació i veure més opcions de condicionals clicant aquí.

CSS - ALTRES SELECTORS, PSEUDOCLASSES i PSEUDOELEMENTS

Existeixen altres selectors a CSS2 tot i que encara no gaudeixen de prou suport ja que encara es fa servir el Internet Explorer 6. Això, segons com, ho podem utilitzar al nostre favor per discriminar entre navegadors a l'hora de fer hacks.

Selector fill[Selector descendent directe] [Per seleccionar elements que són descendents directes d'un altre.]

body>p{
declaracions
}

En aquest exemple està seleccionant tots els paràgrafs que tinguin com a element pare a body.

Selector per atribut [Pels elements que són descendents directes ]

p[align] {
declaracions
}
En aquest exemple està seleccionant aquells paràgrafs que tenen atribut align.
p[align=center] {
declaracions
}
En aquest exemple està seleccionant aquells paràgrafs que tenen atribut align i com a valor center.
q[x~=y] {
declaracions
}
Coincideix quan el valor de l'atribut de l'element és una llista de paraules separades per espais, una de les quals és la y.
p[x|=y] {
declaracions
}
Coincideix quan el valor de l'atribut de l'element és una llista de paraules separades per guions, una de les quals és la y.

Selectors agrupats[Per seleccionar elements que són descendents directes d'un altre.]

h1, h2, h3{
declaracions comunes a tots 3 elements
}

En aquest exemple estem seleccionant 3 elements per definir aspectes comuns.

Selector germà adjacent[Per seleccionar elements que són descendents del mateix pare i que van seguits.]

h1 + h2{
declaracions
}

En aquest exemple estem seleccionant l'element h2 que estigui directament a continuació d'un h1. No pot haver coses entre mig d'aquests dos elements germans. Han d'anar un darrera l'altre.

PSEUDOCLASSES
Una pseudoclasse no fa referència a un element HTML en concret si no determinats estats especials d'aquest. La seva sintaxi és una mica especial ja que s'escriuen amb dos punts per separar-les de l'element al que ens referim. Veiem-ne com són els selectors de pseudoclasse:

:firstchild[Per seleccionar els elements descendents que siguin primer fill.]

Exemple 1:
div p:firstchild{
declaracions
}

[En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de div].
Exemple 2:
div > p:firstchild{
declaracions
}

[En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent directe de div].

Exemple 3:
p:firstchild{
declaracions
}
[En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de qualsevol altre element].
Exemple 4:
* > p:firstchild{
declaracions
}

[Una altra manera de fer en aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de qualsevol altre element].

Pseudo classes per a enllaços i altres.
Serveixen per seleccionar diferents estats dels enllaços. Les pseudoclasses que fem servir als enllaços són les següents:

:link
:visited
:hover
:active
:focus

Aquestes pseudoclasses quan es declaren han de seguir necessàriament aquest ordre. Les dues primeres serveixen per definir els aspectes dels enllaços abans de ser visitats i després respecticament. Aquest estat dels enllaços depèn de l'historial del navegador. Les 2 següents en canvi depenen del cursor ja que apareixen quan passem per sobre o cliquem amb el ratolí. La darrera depèn de l'ús de la tecla TAB que va saltant d'enllaç a enllaç.

[Continuarà...]

PSEUDOELEMENTS
Els pseudo elements no són en si mateixos elements si no part d'elements
[Continuarà...]

CSS - ELS SELECTORS

Selector Universal

* {
declaracions
}

Selector de Tipus [Redefineix etiquetes HTML]

p {
declaracions
}

Selector descendents [per seleccionar elements en cas que estiguin anidats entre d'altres]

p b {
declaracions
}

En aquest exemple està seleccionant totes les negretes que vagin a dins de paràgrafs.

Selector de Classe(per definir estils personalitzats)
[per cridar-los des dels elements HTML es posa l'atribut class="nom_estil_personalitzat"]

.negreta12 {
font-size:12px;
font-weight:bold;
}

p.negreta12 {
font-size:12px;
font-weight:bold;
/* En aquest cas el selector és més específic ja que s'està referint només als paràgrafs que tenen negreta12 com a valor de l'atribut class.*/
}

Selectors de zona
[Per aplicar-los a zones identificades amb un nom mitjançant l'atribut id="nom_de_zona"]

#zona1 {
declaracions
}

div#zona1 {
declaracions
}
/* En aquest cas el selector de zona és més específic ja que s'està referint només a l'element, en aquest cas DIV, que té com a identificació id="zona1"*/

CSS - Mètodes per que les capses es vegin igual als diferents navegadors

PROBLEMA: DIFERENT FORMA DE REPRESENTAR L'AMPLADA I L'ALÇADA DE LES CAPSES.

Els navegadors Internet Explorer, si més no fins la versió 7, fan servir el model Quirk. Per tant en aquests consideren que l'amplada va de vora a vora. En canvi els Mozilla consideren que l'amplada va de farcit a farcit.

Observeu com representen els navegadors el codi següent(Clica a la imatge per ampliar):

SOLUCIÓ 1: Especificant el Doctype, just abans del començament de la etiqueta HTML, que volem que faci servir. Les versions anteriors de l'Internet Explorer 6 encara no estaven programades per acceptar aquesta especificació.

SOLUCIÓ 2:
Observeu una altra solució més universal tot i que aparentment més matussera. Clica a la imatge següent per ampliar:

Links

APUNTS DE HTML i CSS