Comença amb HTML5 / CSS3: Consells, vitrines i mostres de codificació

HTML5 guanya més popularitat i comença a evolucionar tota la interfície web. Fins i tot alguns desenvolupadors web van citar que els elements i efectes visuals HTM5 són comparables a Flash. El nou estil de script és fàcil d’entendre i les funcions per millorar la interfície web són il·limitades. Llavors, què interessant és aquest HTML5??


Aquest article té l’objectiu de donar a conèixer als lectors què heu de conèixer sobre el codi HTML5 i, el que és més important, alguns consells & trucs per crear pàgines HTML5 lleugeres, atractives i interactives.

1. Bàsic en HTML5

HTML5

Abans d’iniciar més coses d’aquest tema a HTML5, serà bo consultar primer el vostre navegador actual. Com que molts navegadors encara es troben en mode de desenvolupament (millora per acomodar el HTML5), és possible que algunes funcions esmentades aquí no siguin compatibles.

Aquí teniu uns consells ràpids per comprovar-ne compatibilitat del navegador.

Per entendre més la limitació d’un determinat navegador, pot ser que es refereixi aquí.

2. Efectes de text: afegint un efecte de text d’ombra i avançat a HTML5

Efectes de text en HTML5

Efecte bàsic d’ombra sobre el text

Aquest és el codi de cadena més senzill que transforma el teu títol ordinari en un text d’aspecte genial. Mai subestimeu l’efecte ombra. Per crear aquest efecte d’aspecte similar cal que el dissenyador web passi per diversos passos d’edició d’imatges a Photoshop. I ara només cal una línia de codi. La distància d’ombra, el color es pot canviar pel contingut del cor.

Mostra de codificació

#shadow h1 {
text-shadow: 0px 1px 1px rgba (0,0,0, .2);
}

Text sobre l’efecte anticipat, similar al foc

El següent consell és mostrar-vos com es pot modificar la codificació HTML5 en un text encara més elegant. Si experimenteu prou o trobeu altres exemples, les possibilitats de personalitzar els efectes són infinites. Nota: aquest exemple no el crea cap programari d’edició d’imatges. Simplement els codis simples en HTML5.

Mostra de codificació

#fire h1 {
alineació de text: centre;
marge: 200px automàtic;
font-family: "Lliga-gòtica", Missatgeria;
font-size: 200px; text-transform: majúscules;
color: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80px # 451b0e;
}

Un altre gran exemple: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Racó arrodonit en HTML5

Racó arrodonit en HTML5

L’estil de disseny de pàgina web a HTML5 mai ha estat tan fàcil des de la introducció de CSS. I ara fins i tot podeu tenir racons arrodonits dels elements de la vostra disposició. Imagineu-ho; cap imatge de fons més tallada, cap fragment de imatge més desordenat. Això provocarà moltes alegres als dissenyadors web per aquí.

Mostra de codificació

div {
vora: 2px sòlid # 434343;
encoixinament: 10px;
fons: # e3e3e3;
-moz-border-radio: 10px;
-webkit-border-radi: 10px;
amplada: 500px;
}

Nota: Moz significa Mozilla i el webkit és per a Safari i Chrome.

Un altre gran exemple: http://fjd1.com/roundcorner.html

4. Gràfic vectorial escalable (SVG) en HTML5

Tutories, guia i mostres HTML 5

El gràfic vectorial escalable o conegut generalment com a (SVG) és un gràfic vectorial de dues dimensions que es defineix als fitxers de text XML. És a dir, perquè el seu ADN es basa en el fitxer de text XML, es poden crear o editar a la plataforma web. El que també significa que hi pot haver escala fàcilment i els motors de cerca són capaços de llegir i comprendre la imatge.

Codi d’exemple

Altres exemples excel·lents:

5. Incorporació de fitxers de pel·lícules a HTML5

Vídeo en HTML5

Aquí hi ha una altra part interessant per mostrar les capacitats de HTML5. Molts dels vídeos en línia es solen presentar al webuser en forma de Flash. Fins fa poc, la incorporació de vídeo a HTML5 lentament va guanyar impuls (YouTube és un bon exemple) i Flash perd lentament el seu atractiu. Per què és així? Usuaris mòbils. Si voleu que el vostre vídeo pugui reproduir-se tant en telèfons iPhone com Android, HTML5 és la manera de seguir endavant.

Per incrustar el vídeo, actualment haureu de conèixer 3 formats compatibles amb diferents navegadors; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Codi d’exemple

Un altre gran exemple: https://www.html5rocks.com/ca/tutorials/video/basics/

6. Presentació de diapositives en HTML5

Tutories, guia i mostres HTML 5

Powerpoint ha estat un nom sinònim associat amb la presentació de diapositives. Però, per què limitar-vos a una presentació fora de línia on podeu crear diapositives destinades al públic web? HTML5 ha aconseguit rescatar la creació de diapositives de presentació molt potents, completades amb el menú de transició i navegació. La millor part és que, fins i tot, podeu aplicar 3D transform a la vostra presentació.

Codi d’exemple

pre {
transició: totes les facilitats de sortida;
}

pre: hover {
color de fons: # F2F5FE;
color de la vora: negre;
}

div {
transformar: girar3d (1,1,0, 45deg);
}

Altres exemples excel·lents:

7. Contingut editable en HTML5

Tutories, guia i mostres HTML 5

El text estàtic és una escola tan vella en l’època on la flexibilitat i la dinàmica dominen el món. A HTML5, podeu definir una àrea de text que pugui ser editada per l’usuari web sense editor de text.

Codi d’exemple

Aquest contingut és editable!

Un altre gran exemple: http://html5demos.com/contentable

8. Lloc web interactiu en HTML5

Tutories, guia i mostres HTML 5

A més de SVG a HTML5, el llenç és el següent millor que ha passat mai al web. Canvas permet la representació de formes de dues dimensions que aporten la interactivitat a tot un nivell sense l’ajuda de Flash.

Tanmateix, cal mencionar aquí la senzilla codificació en HTML5 que crea una interacció animable sorprenent.

Un altre gran exemple: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Arrossegueu i deixeu anar HTML5

Tutories, guia i mostres HTML 5

Arrossegar i deixar anar (de vegades conegut com DnD) és una altra característica interessant disponible per a HTML5. Un bon exemple seria la implementació de Google al seu Gmail. Si utilitzeu qualsevol dels navegadors compatibles amb HTML5, només podeu arrossegar un fitxer des de l’ordinador i deixar-lo caure a la finestra de missatge de redacció. S’afegirà automàticament com a fitxer adjunt. Quin xulo??

Codi de mostra (DnD nadiu)

document.addEventListener (‘dragstart’, funció (esdeveniment) {
event.dataTransfer.setData (‘text’, ‘Text personalitzat’);
event.dataTransfer.effectAllowed = ‘còpia’;
}, fals);

Un altre gran exemple: http://www.html5rocks.com/ca/tutorials/dnd/basics/

10. Gràfic de dades CSS pur en HTML5

Tutories, guia i mostres HTML 5

Abans de HTML5, també era impossible crear un gràfic presentable només amb la codificació en HTML. A més, no és una tasca senzilla canviar el valor de les dades i reflectir-les en el gràfic. De nou, HTML5 al rescat. Juntament amb CSS, podeu crear un gràfic absolutament bonic que va desconcertar Microsoft Excel. Els codis són senzills, i només heu de passar el temps per personalitzar el color i l’efecte perfectes per al vostre gràfic.

Un altre gran exemple: http://cssglobe.com/pure-css-data-chart/

No en puc obtenir prou amb HTML 5?

I també! Aquí teniu més informació sobre el tema, visiteu-los.

* 30 excel·lents exemples de llocs web HTML 5
* Com començar amb HTML 5
* Cal llegir 5 tutorials HTML el 2012
* Apreneu HTML 5: 10 lliçons obligades de llegir

Consulteu també  aquest curs HTML-crash de Robin Nixon. Robin Nixon és l’autor de Learning PHP, MySQL i JavaScript; el curs abasta gairebé tot allò que un usuari necessita saber en HTML5, incloses la codificació HTML bàsica, el llenç HTML5 per a dibuixar, geolocalització, emmagatzematge local, així com àudio i vídeo HTML5..

L’article original es publica per primera vegada el Bloc WHSR; ara està gestionat i actualitzat per personal de BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map