HTML5 I CSS3!

Hola! En aquest post parlaré sobre HTML5 i CSS3, la seua aparició i les seues novetats.

En primer lloc, pel que fa a l'aparició d'HTML5, empreses com Apple, Mozilla i Opera van reprendre el projecte abandonat per a la creació d'una cinquena versió d'HTML, i van començar a treballar per aconseguir una millor compatibilitat amb les tecnologies de l'actualitat. Va ser en 2006 quan la W3C va tornar a interessar-se en HTML5 i finalment en 2007 es va unir al grup que es trobava treballant en aquesta versió. No obstant això, en la W3C encara existia rebuig cap a aquesta versió. Finalment en 2010 es dóna la popularització d'HTML5.

Per una altra banda,  CSS3 ha estat en desenvolupament des de 1998, i està en complet funcionament actualment.

Pel que fa a les novetats d'HTML5 les més destacades són les següents:

• Presenta una millor estructura, semàntica, que facilita la recerca als navegadors i la comprensió per part d'altres persones. Destaquen les etiquetes <section>, <article>, <aside>, <header>, <footer> i <nav>.

• També permet realitzar millors formularis amb les següents etiquetes: 

• <datetime>, <datetime-local>, <date>, <month>, <week>, <time>, per a indicar una data/hora.
• <number> per a que l'usuari indique un nombre.
• <range> per a indicar un rang entre dos nombres.
• <email> per a indicar un correu electrònic.
• <url> pera indicar una direcció web.
• <search> per a indicar una búsqueda.
• <color> per a indicar un color.

• Per últim, altres elements importants són:

• <audio> i <video> serveixen per a incrustar un contingut multimèdia de so o de vídeo, respectivament. 
• <embed> serveix pe ra contingut incrustat però no natiu, sinó executat per pluggins com el de Flash. 
• <canvas>  permet generar gràfics, dibuixant elements dins d'ell. S'utilitza, per exemple, en Google Maps. 

Les novetats de CSS3 més importants són les següents:

• En les vores:
• border-color: vores amb degradats, sols per a Mozilla.
• border-image: vores redones i de moltes formes per a imatges.
• border-radius: caixes amb vores redones.
• box-shadow: sombres amb gradients per a caixes. 

• Fons:
• background-origin & background-clip: posicions del fondo respecte a les caixes.
• background-size: tamany de la imatge de fons.
• multiple backgrounds: varies imatges de fons en el mateix element.

• Color 
• colors HSL: color, saturació i lluminositat.
• colors HSLA: afegeix opacitat.

• Text
• text-shadow: efectes d'ombra en text, comparables a photoshop.

Espere que siga útil!

HTML amb CSS!

Hola! En aquest post tractarem com fer un calendari amb HTML utilitzant CSS i dissenyant dos estils diferents. 

És important que el codi CSS el fem en un lloc web diferent a l'arxiu HTML on tenim el codi, ja que així ens permet modificar l'estil quan ho necessitem, incloure altres estils amb CSS, canviar un per altres fàcilment i, per últim, també ens permet tindre un model de codi HTML i CSS ja fet.

El procés que hem seguit per a fer un calendari és el següent:

• Primer, creem una carpeta on posarem l'arxiu HTML i els dos codis CSS que escriurem.
• En segon lloc, escribim el codi HTML definint una taula per a fer el calendari. Aquest és el resultat del codi, voreu que estan enllaçats dos arxius .css, açò serà els que ens permet definir l'estil del calendari, per això tenim dos, un actiu, "calendari2.css", i un altre inutilitzat temporalment mitjançant un comentari d'HTML, "calendari1.css". D'aquesta manera, en qualsevol moment podem canviar un estil per l'altre.

• Per últim, creem els full d’estils calendari1.css i calendari2.css, on definirem l'aparença del nostre calendari segons l'estil. Per tant, tindrem un arxiu HTML amb dos codis .css enllaçats, un actiu, que ens permetrá vore l'estil actiu i un inutilitzat, que no apareixerá al navegador. El resultat és el següent:

• Aquest és el primer estil de calendari.

• Aquest és el segon estil del calendari.

Espere que siga útil!