Home-theater-designers
Taula de continguts
§5 – Transformacions i animacions CSS3
§6 – Javascript amb prou feines
1. Introducció
N’heu sentit a parlar: HTML5. Tothom l’utilitza. S’anuncia com el salvador d’Internet, que permet a la gent crear pàgines web riques i atractives sense recórrer a Flash i Shockwave.
Però, què és realment?
Bé, no és una pregunta fàcil de respondre. En aquest tutorial HTML5, provarem de donar algunes respostes. HTML5 s’utilitza per descriure un grup de coses realment divers. És un estàndard d’escriure pàgines web. És una col·lecció d’APIs. És una nova manera d’afegir interactivitat a les pàgines web.
HTML5 és tot això i molt més. Llavors, de què tracta aquest llibre?
En aquest tutorial HTML5, suposo que en algun moment heu tocat HTML i CSS. Potser heu creat el vostre propi tema de Wordpress o heu editat un disseny de MySpace durant el dia. Potser heu llegit la pròpia guia XHTML de MakeUseOf. La qüestió és que suposo que coneixeu la vostra manera d’entornar una pàgina web i que allò que comentem en aquesta guia no us serà massa aliè.
L’objectiu d’aquesta guia no és ensenyar-vos la totalitat de l’HTML5. Això quedaria completament fora de l’abast d’aquest llibre. L’objectiu és proporcionar una introducció suau a aquestes noves tecnologies web increïbles i mostrar-vos algunes maneres interessants d’incorporar-les als vostres llocs web.
Per què voleu aprendre HTML5?
És una pregunta justa. En un món de telèfons intel·ligents i aplicacions, és realment important aprendre a programar pàgines web?
Bé, ho creieu o no, és realment habitual escriure aplicacions per a telèfons intel·ligents mitjançant tecnologies HTML5. Fins fa poc, l’aplicació Facebook per a Android s’escrivia amb HTML5, CSS i Javascript.
Blackberry és una altra de les principals empreses interessades en HTML5. Això és obvi en la darrera iteració del seu sistema operatiu mòbil, Blackberry OS 10, on estan animant activament els desenvolupadors a desenvolupar aplicacions per als seus telèfons mitjançant tecnologies web.
Els nous telèfons intel·ligents del sistema operatiu Firefox també funcionen completament en aplicacions HTML5. Un coneixement pràctic d’HTML5 és essencial en el clima actual dels telèfons intel·ligents.
A més, aprendre HTML5 és bo per a la vostra carrera professional. No em creguis? Segons Indeed.com , el salari mitjà anual per a un desenvolupador HTML5 és de 89.000 dòlars. Amb cada vegada més empreses que canvien els seus llocs web per utilitzar tecnologies HTML5, els desenvolupadors que coneixen la pila HTML5 són buscats, ara més que mai.
1.1 Requisits previs
Aquest tutorial HTML5 suposa un parell de coses. En primer lloc, pressuposa que sàpiga el funcionament del web i que sàpiga crear una pàgina web bàsica. Haureu de ser capaç d'aglutinar alguns elements HTML i de poder presentar informació en un navegador web. Veure i
Les etiquetes no són massa descoratjadores i no us fa por embrutar-vos les mans amb algun codi font.
En segon lloc, aquesta guia suposa que sabeu què és CSS i com funciona. No esperem que sigueu genis del disseny, ni tampoc no coneixeu tota l’especificació CSS de la mà. Tanmateix, hauríeu de poder aplicar l'estil a un element d'una pàgina web, poder enllaçar a un fitxer CSS i conèixer les diferències entre un identificador i una classe i com aplicar l'estil a cadascun d'ells.
Si us rasqueu el cap per l’anterior, no us preocupeu. Una de les millors coses sobre HTML i CSS és que és molt fàcil. De fet, MakeUseOf té una increïble guia XHTML que us permetrà posar-vos al dia molt ràpid.
Després de llegir aquesta guia, també us recomanem que consulteu els articles següents:
- 8 llocs web amb exemples de codificació de qualitat
- 6 blocs per seguir grans dissenyadors web
També necessitareu un editor i un navegador de text moderns. Qualsevol versió d’Internet Explorer anterior a IE 9 i algunes versions anteriors de Safari, Chrome i Firefox tindrà moltes funcions que formen part d’HTML5 i pot evitar que seguiu aquesta guia.
Com a resultat, us animem a descarregar un navegador modern. Recomano Google Chrome i ho faré servir en cada exemple.
Més enllà d’això, tot el que necessiteu és disposar a aprendre. Ah, i un editor de text.
1.2 Editors de text per al desenvolupament web
El vostre editor de text és el que utilitzeu per escriure el vostre codi. És possible que us pregunteu què és un editor de text.
Bé, en primer lloc no és un processador de textos. Programes com Microsoft Word i Apple's Pages no són adequats per al desenvolupament web. Això es deu al fet que adjunten informació addicional als fitxers HTML, CSS i Javascript que dificulta la lectura del navegador web.
Un editor de text dispara caràcters en un fitxer de text, i no gaire més. Això us permet crear fitxers que no tinguin cap format addicional i que es puguin desar amb qualsevol extensió que trieu.
El vostre equip ja inclou un. Si feu servir un PC amb Windows, el Bloc de notes és l’editor de text que probablement tingueu instal·lat.
En un Mac, la situació és lleugerament diferent. OS X ve amb quatre editors de text diferents. Es diuen Vim, Emacs, Pico i Nano. No obstant això, a diferència del Bloc de notes, tots funcionen al terminal.
Això és una mica intimidatori per a les persones que són noves en el desenvolupament web i no les haurien d’utilitzar aquelles que siguin noves en el desenvolupament de programari. No els utilitzarem en aquesta guia. No obstant això, quan tingueu una mica més de confiança amb el desenvolupament de programari i web, definitivament val la pena fer una ullada a Vim i Emacs. Tots dos són potents editors de text i, si els domineu, us poden estalviar molt de temps.
A Linux, l’editor de text per defecte varia entre distribucions. A Ubuntu, és probable que sigui Gedit, un editor de text força agradable que no és massa diferent del Bloc de notes.
No obstant això, en aquest curs escriureem el nostre codi mitjançant tres eines diferents.
El primer és Sublime Text 2. Sincerament, no ho puc recomanar prou. Inclou tot allò que facilita la vida d’un desenvolupador inicial. En primer lloc, us facilitarà la lectura del codi mitjançant la coloració de determinades parts. En segon lloc, us permet canviar fàcilment entre fitxers i gestionar projectes sencers de fitxers. Això és ideal per canviar entre fitxers i editar diversos bits de codi sobre la marxa.
La tercera és la consola Javascript integrada a Google Chrome. Això ens permet escriure Javascript i veure que s’executa immediatament i s’utilitzarà per explicar conceptes bàsics de programació.
El segon és un lloc web anomenat Codepen.io. Aquest notable lloc web us permetrà codificar HTML, CSS i Javascript al navegador i és d’ús gratuït. També us permetrà veure els canvis a l’instant.
2. Marcatge semàntic
En aquest capítol, aprendreu sobre el marcatge semàntic i sobre com organitzar el vostre codi en funció del seu contingut.
Fins fa poc, el codi HTML s’organitzava generalment amb etiquetes. Aquests us van permetre crear un grup d'elements i aplicar l'estil a aquests elements.
Això va funcionar, però hi havia marge de millora. El problema de les etiquetes era que no era semàntic. Div realment no vol dir res.
El marcatge semàntic és una nova característica d'HTML5. Inclou etiquetes noves, que funcionen de la mateixa manera que una etiqueta 'div', però que serveixen per etiquetar parts comunes d'una pàgina.
Llavors, com funcionen? Penseu en el codi següent.
En aquest fragment de codi, tenim una barra de navegació, un títol i una llista. Això no és massa diferent a la majoria de llocs web que és probable que pugueu accedir quan hi penseu.
el restabliment de la contrasenya de la xarxa de PlayStation no funciona
Vegem un article sobre MakeUseOf. Notareu que hi ha una part de la pàgina reservada completament per navegar a altres articles. També notareu que hi ha una altra part de la pàgina que conté les paraules que constitueixen un article. Cap a la part superior de la pàgina, veureu una capçalera que conté el logotip MakeUseOf i alguns altres enllaços.
Quan s’ho pensa, molts llocs web segueixen aquestes convencions. La majoria de llocs web tenen una part reservada a la navegació. Solen tenir un contingut. El més probable és que tinguin una capçalera.
Les etiquetes semàntiques són etiquetes que permeten definir parts d’un lloc web que es troben habitualment a la majoria de llocs web. No afegeixen res a la pàgina, però us permeten agrupar etiquetes en funció del seu contingut i aplicar estils a aquests grups.
Recordeu, doncs, el codi que teníem abans? Vegem-ho amb algun marcatge semàntic afegit.
Com podeu veure, el codi és molt més fàcil de llegir. Saps quines parts són quines i no hi ha cap ambigüitat. Això és important, ja que facilita l’escriptura d’un codi bo i net. Si mai decidiu convertir-vos en un dissenyador web professional, això esdevé fonamental: mai no sabreu qui llegirà l’obra que produïu.
Per tant, vegem algunes etiquetes de marcatge més semàntiques.
2.1 Secció
La secció és una etiqueta realment útil. S'utilitza per agafar grans extensions d'informació i contingut que estan marcats amb un encapçalament o un títol. Penseu en això com en un capítol d’un llibre. Un capítol té un títol i també pot contenir imatges, diagrames, gràfics i paraules. S'utilitzarà una etiqueta de secció per contenir tot això.
2.2 Article
L’etiqueta de l’article s’utilitza pel que sembla; Conté contingut com ara una publicació de bloc o una notícia. Aquest contingut s’ha de poder desvincular de la resta del bloc i, tot i així, tenir un sentit coherent.
2.3 A part
Aquesta etiqueta està reservada per a contingut relacionat amb la pàgina web, però que no forma part integrant de la pàgina web. Això podria ser un munt de fets relacionats amb una notícia o amb la biografia d’un usuari en un bloc.
2.4 Capçalera
Moltes pàgines web tenen una barra a la part superior de la pàgina que conté un logotip, algunes dades relatives al lloc i potser alguns enllaços. A l’etiquetatge semàntic, faríeu servir una etiqueta de capçalera per contenir tot això.
2,5 Navegació
Aquest element està reservat a la part de navegació del vostre lloc web. Això contindria enllaços a altres llocs web o a altres pàgines del lloc web. Dins del context de MakeUseOf, aquesta podria ser la part de la pàgina que hi ha a sota de la capçalera.
2.6 Peu de pàgina
Aquesta etiqueta està reservada a la part inferior de la pàgina. Aquí podeu posar algunes dades de contacte, informació sobre drets d'autor, un mapa o alguns enllaços a la vostra pàgina 'sobre mi'.
2.7 Posa't a prova
- Què és el marcatge semàntic i per a què serveix?
- Estic creant una pàgina web i vull utilitzar una etiqueta semàntica per contenir una biografia sobre mi. Quin faig servir?
3. Formularis
Si alguna vegada heu fet una mica de disseny web, probablement sabreu com crear un formulari senzill en HTML. Si sou realment intel·ligent, probablement sabreu com agafar la informació que obteniu del formulari i com fer-hi alguna cosa, tal com la poseu a una base de dades.
Les formes són massivament importants. Són la base de la majoria de les coses que fem a Internet. Cada vegada que creeu una actualització d'estat a la vostra xarxa social preferida, que compreu alguna cosa a Amazon o que envieu un correu electrònic, probablement hàgiu utilitzat un formulari HTML.
El que probablement no sabíeu és que la manera de crear formularis ha canviat radicalment a HTML5. També és significativament millor. En aquest capítol, analitzarem algunes de les coses interessants que podeu fer ara, només amb un marcat antic.
Per tant, què té de bo la nova manera d’escriure formularis en HTML5? En primer lloc, podeu assegurar-vos que cal omplir alguns camps per enviar-los, només canviant el marcatge del formulari. A més, ja no cal escriure muntanyes de JavaScript o PHP per fer-ho. És trivialment fàcil.
En segon lloc, podeu assegurar-vos que els vostres usuaris només puguin enviar certs tipus d’informació al vostre formulari. Per tant, suposem que teniu un lloc web per a la vostra llista de correu i només voleu que la gent pugui enviar adreces de correu electrònic reals? Podeu fer-ho només amb HTML5. Realment és increïblement potent.
En tercer lloc, podeu fer que els vostres formularis tinguin un aspecte millor donant a alguns camps un marcador de posició. Això els farà molt més intuïtius, ja que podeu mostrar als vostres usuaris un exemple del que espereu per a un formulari.
3.1 Millorar un formulari
Per tant, vegem un formulari i vegem com podem millorar-lo.
Aquest formulari és força bàsic. Agafa un nom, un correu electrònic i un color preferit i, a continuació, permet a l'usuari enviar-lo. No conté cap validació de la informació que s'hi col·loca i no hi ha res que impedeixi als usuaris enviar aquest formulari amb alguns camps buits. Canviem tot això.
Per tant, el primer que voldrem fer és assegurar-nos que el camp de correu electrònic només contingui un correu electrònic. Aquesta solia ser una tasca bastant dura, ja que hauríeu de crear tot tipus de codi Regex arcà. Bé, ja no. Només heu de canviar el tipus d’entrada de “text” a “correu electrònic”. Quan intenteu enviar aquest formulari amb ximpleries, es queixarà i us insistirà que envieu un correu electrònic.
3.2 Tipus d'entrada i patrons
Hi ha altres tipus d'entrada que podeu requerir. Inclouen números de telèfon, adreces web, formularis de cerca i fins i tot selectors de colors. Com que HTML5 evoluciona constantment, és lògic que aviat podrem especificar més tipus d’entrada en un futur proper.
A més, per a coses com els números de telèfon que varien en funció de la localitat, podeu especificar patrons per a les entrades. Aquests es creen utilitzant una cosa anomenada 'Expressions regulars' i són bastant complicats, però incommensurablement potents.
També voldrem proporcionar un exemple de correu electrònic al nostre camp, de manera que l’usuari no tingui cap ambigüitat del que ha d’enviar. Això és molt fàcil de fer. Simplement creeu un atribut nou de 'marcador de posició' amb una adreça de correu electrònic d'exemple.
Ens assegurarem que el nostre camp 'Color preferit' sigui obligatori. A l’últim parèntesi angular (>) de l’etiqueta d’entrada de correu electrònic, només cal que escriviu 'obligatori'. Això és. Ara, quan intenteu enviar el formulari sense valor, apareixerà un missatge d'error.
El realment increïble d’aquests missatges d’error és que l’usuari no els ha d’escriure ni escriure cap codi per crear-los. Simplement canvieu un camp perquè sigui obligatori i només funciona. Dit això, és possible personalitzar-los, si voleu.
Va ser una breu introducció al poder dels formularis en HTML5. Si voleu llegir-ne més, us recomano que visiteu aquests enllaços.
Per llegir més:
- Trucs CSS: escrivim marcatge semàntic
- Metge HTML5: parlem de semàntica
3.3 Posa't a prova
La setmana vinent és el vostre aniversari i voleu crear un formulari de registre per saber quina coca heu de crear. Obriu l’editor de text i creeu un formulari amb els camps següents.
- Nom
- Correu electrònic
- Número de telèfon
- Al·lèrgies
Assegureu-vos que els camps de nom, correu electrònic i número de telèfon siguin obligatoris i que els camps Correu electrònic i Número de telèfon s’estableixin amb els tipus d’entrada “correu electrònic” i “tel”. Creeu un marcador de posició per al camp de l'al·lèrgia amb el valor 'pol·len, ous, quiche'.
Juga amb el formulari. Proveu d’enviar els camps obligatoris com a buits i intenteu inserir caràcters no numèrics al camp del número de telèfon. Al camp de correu electrònic, inseriu alguna cosa que no sigui una adreça de correu electrònic. Què passa?
4. Mitjana
Abans hi havia un moment en què l’única manera d’inserir algun vídeo o àudio en una pàgina web era mitjançant Flash, Shockwave o SilverLight.
Això no era ideal. En primer lloc, cap d’aquests marcs funcionava tan bé als dispositius mòbils. Simplement no estaven equipats per al món modern dels telèfons intel·ligents i les tauletes.
com crear fitxers per lots a Windows
A més, eren formats propietaris. Com a resultat, els usuaris de Linux i OS X podrien tenir una experiència bastant alta o fins i tot se'ls va impedir consumir serveis multimèdia, ja que no estava disponible per a la seva plataforma.
Finalment, tenien la propensió a ser lents. Si teniu un equip amb poca potència o més antic, no tindríeu una bona experiència visualitzant el vídeo amb aquests marcs. Flash va ser particularment famós per això.
4.1 Com HTML5 fa que el vídeo i l’àudio siguin increïbles
HTML5 ho va canviar en permetre als desenvolupadors web incloure àudio i vídeo a les seves pàgines web amb només unes poques línies de codi. Funciona molt bé en dispositius mòbils i funciona en tots els navegadors web moderns.
Com a resultat, grans empreses com YouTube, Vimeo i Netflix aprofiten la revolució HTML5. Per què no us hi uniu?
4.2 Tot sobre codecs
En aquest capítol, aprendreu a utilitzar la potència de HTML5 per incloure àudio i vídeo a les vostres pàgines web.
En primer lloc, hauré de començar amb una advertència. Tot i que podeu utilitzar el vídeo HTML5 en tots els navegadors web moderns, no funciona igual en tots els navegadors web. Els còdecs que utilitza cada navegador varien. A Internet Explorer, es limita a utilitzar el vídeo MP4. Chrome és una mica més generós i us permet utilitzar vídeos de WebM, MP4 i Ogg Theora. Opera és una mica més restrictiu i només us permet fer servir vídeo Theora i WebM.
Com a resultat, haureu de ser una mica intel·ligent en la manera d’inserir el vídeo a la vostra pàgina web. Per tant, vegem com funciona.
4.3 Començar amb el vídeo
Per començar, haureu de crear algunes etiquetes d'obertura i tancament. És aquí on enllaçareu als vostres fitxers de vídeo. Però, primer, voldreu muntar un pòster. Què vol dir això?
Bé, quan espereu que es carregui el vostre vídeo, la persona que visiteu el vostre lloc pot veure una imatge relacionada amb el vídeo. Per fer-ho, només heu de donar a les etiquetes de vídeo un atribut de 'pòster' amb un valor de la imatge a la qual vulgueu enllaçar. Hauria de ser així.
El següent que voldrem fer és crear una alternativa. Què vol dir això? Per tant, suposem que utilitzeu un dels navegadors antics menys impressionants que hi ha. Molts d'aquests navegadors antics no admeten vídeo HTML5 i, per tant, no poden reproduir vídeo HTML5. Voldreu deixar-los un missatge que els informi que voldran actualitzar el navegador i que fins que no ho facin no podran veure el vostre vídeo.
Per fer-ho, només heu d’escriure el missatge dins de les etiquetes de vídeo. No es requereix res més. Un cop fet això, se us quedarà un codi que té aquest aspecte.
Ara, afegim un vídeo. Vaig a provar-ho a Google Chrome, així que vincularé a una pel·lícula MP4. Per fer-ho, creo una etiqueta Source i li dono un atribut de src que té un valor del vídeo que vull incloure.
La meva pàgina ja està preparada per obrir-se al navegador web. M’he enllaçat amb una pel·lícula que és realment molt gran i, en conseqüència, quan s’obre només es pot veure el pòster.
4.4 Afegir àudio
L’àudio es pot inserir a la vostra pàgina web d’una manera que recorda molt la manera com hem inserit el vídeo a la nostra pàgina.
En primer lloc, es creen algunes etiquetes d'àudio. Aquestes etiquetes d'àudio contenen un atribut de 'controls'. Això proporciona a l'usuari que visita la pàgina la possibilitat de posar en pausa, reproduir el rebobinat i avançar ràpidament l'àudio que s'està reproduint.
A continuació, incloeu una etiqueta font al fitxer MP3 al qual vulgueu enllaçar. Realment no us heu de preocupar tant quan es tracta de compatibilitat amb còdecs. La majoria dels navegadors web recents tenen la possibilitat de reproduir àudio MP3, tot i que és una bona pràctica incloure també un fitxer '.ogg' i '.wav', per si de cas.
Finalment, podeu crear una alternativa per a navegadors antics. Això es fa de la mateixa manera que heu creat la alternativa per al vostre vídeo.
El resultat final sembla una mica així.
En obrir-lo al navegador web, hauria de tenir un aspecte semblant.
4.5 Posa't a prova
- Quin és el propòsit de tenir un pòster a les vostres etiquetes de vídeo?
- Quins còdecs no podeu utilitzar a Internet Explorer?
- Si volgués posar en pausa una mica d'àudio, quin atribut afegiríeu a l'etiqueta 'àudio'?
Per llegir més:
5. Transformacions i animacions CSS3
CSS s'utilitzava tradicionalment per gestionar el disseny i el disseny d'una pàgina web. Això encara és cert, però en la seva última iteració ha guanyat la capacitat de manejar animacions i transformacions d’elements i imatges.
La gent ha fet coses increïbles amb CSS3, des de crear un rellotge digital fins a escriure un joc complet de Pong. Algú fins i tot l’ha utilitzat per recrear els crèdits introductoris de Mad Men. És una tecnologia realment potent i, quan es domina, es pot utilitzar per afegir un sorprenent nivell de funcionalitat a la vostra pàgina web.
En aquest capítol, us faré una breu introducció a CSS3 i us mostraré com afegir alguns efectes sorprenents a la vostra pàgina.
Primer, aneu a codepen.io i creeu un bolígraf nou. L’utilitzarem com a espai de treball durant la durada d’aquest capítol.
Començarem de manera senzilla i crearem una transformació d’imatge senzilla que giri una imatge 3 graus quan es passi el cursor. Primer de tot, creeu una etiqueta div i doneu-li un identificador. A l'exemple següent, li he proporcionat un identificador de 'muo'.
5.1 Efectes CSS Hover
En aquest div, incloeu una imatge que trieu. He inclòs una còpia del logotip de MakeUseOf.
Aleshores haureu d’escriure algunes regles del full d’estils. A l'exemple següent, he creat un marge superior i esquerre per donar espai a la imatge. També he inclòs una regla de full d’estil d’aspecte curiós que comença per '#muo: hover'. Què és això?
Quan adjunteu ': passeu el cursor' a una regla de full d'estil, ja sigui a un element, un identificador o una classe, efectivament esteu dient al navegador que apliqui aquest estil quan el ratolí governi l'element. Bastant xulo, oi?
Dins de la regla '#muo: hover', tenim una línia que diu '-webkit-transform: rotate (3deg)'. Com segur que heu endevinat, això indica al navegador que giri aquest element div en tres graus.
Tot i això, val la pena assenyalar que aquesta etiqueta només funciona a Chrome i Safari. Si voleu que el vostre codi funcioni a Firefox o Internet Explorer 9 i versions posteriors, voldreu canviar el fitxer CSS per incloure les línies següents.
Ara, quan passeu el cursor per sobre de la imatge, es veu així:
5.2 Ús de CSS3 per canviar la mida de les imatges
Llavors, per què aturar-se aquí? Sabíeu que també podeu utilitzar el mètode 'transformar' per ampliar o reduir una imatge. Canviem el nostre fitxer CSS per incloure les línies següents.
Com podeu veure, ara hem inclòs una nova regla de transformació, però aquesta vegada li estem dient que faci una cosa anomenada 'escala'. Aquesta és una manera molt bonica d’augmentar la mida d’una imatge. Es necessiten dos paràmetres (els números que veieu entre aquests parèntesis) i representen la quantitat en què augmenteu l'alçada i l'amplada de l'element.
Com podeu veure al codi, augmentaré la mida del logotip div MakeUseOf en un 50%. Podeu provar-ho si passeu el cursor per sobre. Veureu que ara el logotip 'MakeUseOf' ara està significativament més estès.
Aquesta va ser una introducció molt suau a les transformacions CSS3. Tot i que CSS3 és molt nou, ara podeu veure que podeu fer-hi moltes manipulacions molt interessants.
5.3 Posa't a prova
- Com apliquem un estil a un element quan es passa el cursor per sobre?
- Com gireu una imatge amb CSS3?
- Com s’escala una imatge mitjançant CSS3?
- Què passa si passa el mètode de transformació 'translate (50 px, 50 px)'?
Per llegir més:
6. Només cal que tingueu Javascript
Si voleu utilitzar script al vostre navegador web, heu d’utilitzar Javascript. Malauradament, no hi ha dues maneres. És un llenguatge que té molts fans i també molts detractors. A mesura que van els idiomes, té moltes berrugues. Hi ha una raó per la qual el llibre més notable sobre la llengua es diu 'Javascript: The Good Parts'.
Serà impossible ensenyar-vos a utilitzar Javascript en un sol capítol. Aquí no és aquest l’objectiu. L’objectiu és ensenyar-vos prou Javascript perquè pugueu entendre el següent capítol, que tracta d’utilitzar una tecnologia anomenada Canvas per fer dibuixos i animacions.
6.1 Accés a la consola
Per fer-ho, utilitzarem la consola Javascript integrada a totes les còpies de Google Chrome. Per accedir-hi, podeu fer clic dret a qualsevol pàgina web i, a continuació, prémer 'Inspecciona l'element'. A continuació, feu clic a 'Consola'. Hauríeu de veure això.
És tradicional que el primer programa que qualsevol desenvolupador incipient escrigui mai sigui el programa 'Hello World'. Aquest és un programa senzill que imprimeix la frase 'Hello World' i no gaire més. A la consola, escriviu 'console.log (' Hola món! ') ;.
6.2 El vostre primer programa
Llavors, què vam fer exactament? En primer lloc, anomenàvem una cosa anomenada 'console.log'. Es tracta d'una mica de codi integrat a l'ordinador que simplement imprimeix el que li digueu. Després hi hem adjuntat alguns parèntesis i hem inclòs les cometes dobles 'Hola món'. Això s'anomena 'passant arguments' i el tipus d'argument que hem passat es diu cadena. Sempre que vulgueu fer alguna cosa que impliqui lletres i caràcters especials, simplement heu d'utilitzar cometes simples. Tanmateix, si voleu fer alguna cosa amb números, normalment no cal que utilitzeu les cometes, com es veu a continuació.
6.3 Variables de JavaScript
També podeu passar variables a 'console.log'. Les variables semblen complicades, però tot el que realment són és un espai per posar trossos d'informació. Sovint són números o lletres. Per fer-ho, heu de declarar una variable mitjançant la paraula clau 'var', donar-li un nom i, a continuació, amb un signe igual, li assignareu un valor. Per tant, vaig a crear una variable anomenada 'hola' i després li donaré el valor de 'Hola món!'. Després ho passaré a console.log.
Tingueu en compte com no he passat 'hola' a console.log amb cometes. Això és perquè volia imprimir a la consola el contingut de 'hola' i no de 'hola' en si.
6.4 Què fan les funcions
Pot ser una mica tediós reescriure el mateix fragment de codi una vegada i una altra, de manera que per aquest motiu escrivim funcions. Les funcions són més fàcils del que es pensa. Tot el que són són trossos de codi que podem reutilitzar sense tornar a escriure el mateix codi. A continuació, hem creat una funció anomenada 'sup' i li passem un argument mitjançant parèntesis que després es registra a la pantalla. Anomenem 'sup' enviant a la consola 'sup (' Hola món! ');'.
6.5 Repetició d'una acció amb un bucle 'For'
Suposem que voleu fer la mateixa acció un nombre determinat de vegades. És per aquest motiu que faríem servir un bucle 'per'. Al principi semblen aterridors, però són tan fàcils de fer un cop els enteneu. Comenceu escrivint 'for ()'.
En aquests parèntesis, voldrem crear una variable que expliqui quantes vegades hem realitzat una acció. Per tant, obtenim una cosa que té aquest aspecte 'per a (var i = 0;)'.
Llavors volem comprovar que no he complert cap condició. Per tant, en aquest cas, volem veure que és inferior a 10. Per tant, després del punt i coma, escrivim 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Si i és inferior a 10, el volem afegir per un i després fer alguna cosa. Per tant, posem 'i = i + 1'. El nostre bucle està gairebé acabat: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Després d'això, voldrem fer una acció. Així doncs, després dels darrers parèntesis, escrivim uns claus arrissats i entre ells anem a console.log el valor d’i. Això crearà un comptador que pot comptar fins a nou.
Les dues darreres construccions de programació que examinarem són declaracions 'if' i bucles 'while'.
6.6 Enunciats If
Una sentència 'si' realitza una acció si es compleixen uns determinats criteris. Són similars als bucles 'for' en construcció i funcionen de la següent manera. Suposem que teniu una variable anomenada 'cheeseburgers' i voleu veure si té un valor de 'saborós'. Si ho fa, voleu registrar 'yum, cheeseburgers' a la pantalla. Per fer-ho, escriuria alguna cosa així.
Tingueu en compte com he escrit 'if (cheeseburgers ==' tasty ')'. Feu servir dobles o triples iguals per comprovar la igualtat i simples iguals per assignar un valor.
6.7 Mentre bucles
Finalment, un bucle 'while' executa una acció mentre es compleix un criteri. Per tant, imagineu-vos que voleu registrar 'yum, hamburgueses amb formatge' mentre que les hamburgueses amb formatge són igual de saboroses. Per fer-ho, escriviu el següent.
Val a dir que entraria en un bucle infinit i que heu d’evitar fer una acció sobre un valor que no és probable que canviï. Això pot fer que el navegador es bloquegi o el codi no funcioni.
Com he esmentat abans, es tractava d’una breu introducció a la programació de construccions a Javascript. Us animem a llegir més sobre aquest tema fascinant, tot i que enorme.
6.8 Posa't a prova
- Vull fer el compte enrere a partir del 30. Escriviu un bucle 'per' que ho faci.
- Vull crear una variable anomenada 'makeuseof' i donar-li un valor de 'impressionant'. Com es fa això?
- Vull crear una funció que imprimeixi 'MakeUseOf Is Awesome' quan em criden. Escriviu aquesta funció.
Per llegir més:
- Javascript: les bones parts de Douglas Crockford
- Guia Javascript MDN
7. Llenç creatiu
Canvas és una tecnologia interessant que permet dibuixar imatges i crear animacions sense haver de recórrer a Flash o Silverlight. La gent l'ha utilitzat per crear coses estranyes i meravelloses, inclosos un simulador d'assecador de cabells i diversos videojocs. És una meravellosa i insondable tecnologia, en aquest tutorial us faré una breu introducció.
Val a dir que Canvas només funciona en navegadors web moderns. Si utilitzeu una versió antiga de IE, Chrome o Firefox, és possible que no pugueu seguir aquest capítol. Si aquest és el cas, hauríeu de plantejar-vos la possibilitat de descarregar la versió més recent de Google Chrome, que era el navegador web en què he creat aquest tutorial.
7.1 Introducció a Canvas
Primer de tot, haureu d’obrir el navegador web i anar a codepen.io. Crea un bolígraf nou.
Ara haurem de declarar un element de llenç. Creeu dues etiquetes Canvas d'obertura i tancament. En ells, hauríeu de passar-li tres atributs. Aquests són l’amplada i l’alçada de l’element Canvas, juntament amb l’identificador que li doneu. Com abans, quan inseries algun vídeo, hauries d'incloure un missatge alternatiu.
Ara voldrem escriure algun codi Javascript que dibuixi alguna cosa a la pantalla. Començarem bàsicament i crearem un quadrat vermell senzill.
Crearem una variable (l’he anomenat 'demostració') i, a continuació, seleccionem l'element canvas i l'assignem a aquesta variable. Per fer-ho, utilitzeu document.getElementByID () i introduïu l'ID de l'element que vulgueu seleccionar.
La segona línia del nostre script crea una altra variable anomenada 'context' i després hi crida 'demo.getContext (' 2d ')'. Això li va dir al navegador que treballarem en una imatge en 2d i, a continuació, passem les funcions necessàries que necessitaríem per dibuixar a la pantalla.
La tercera i la quarta línia són les que realment fan el dibuix a la pantalla. La tercera línia omple un rectangle amb el color vermell, mentre que la quarta línia crida fillRect, que el situa i defineix la seva longitud i amplada.
Això no és impressionant. Fem alguna cosa més avançat i fem servir la màgia de Javascript i Canvas per crear MakeUseOf d’un logotip nou.
7.2 Formes i text
Eliminem la nostra quarta línia i substituïm-la per una que col·loqui el nostre rectangle a l'extrem superior esquerre i l'estengui per la longitud del llenç.
Els dos primers arguments defineixen on volem situar els eixos x i y de la forma. Establim aquests dos a '0' per ara. El tercer argument fa referència a l’amplada de la forma. Posem això a '200' i, a continuació, deixem el quart argument a '50'. Ara hauríeu de tenir alguna cosa que sembli una mica així.
Aquest és un bon començament, però no menciona en absolut MakeUseOf. Per tant, afegirem un text. Creem una variable que conté 'makeuseof' i anomenarem aquesta variable 'MakeUseOf'.
Llavors voldrem crear una altra variable de context. Anomeneu aquest context 'context2' i assegureu-vos que sigui 2d. En això farem servir per escriure el nostre text.
Voldrem que el nostre text tingui un color blau i que superposi el nostre quadrat vermell. Així, com abans, voldrem donar-li un estil de farciment de 'blau'. Ara, seleccionarem les característiques del nostre text. Volem que tingui un format gran de 20 píxels, en negreta i que faci servir un tipus de lletra Arial. Anomenem font a context2 i li assignem el valor 'bold 20px arial'.
Com que volem que aquest text superposi el nostre quadre vermell anterior, hem de cridar 'textBaseLine' a context2 i donar-li un valor superior. Un cop completat, anomenem 'fillText' a context2 i li passem la variable que conté el nostre text i les coordenades x i en les que pretenem col·locar el nostre text. El resultat final del nostre codi és una cosa així.
La imatge produïda pel codi té aquest aspecte.
7.3 Una paraula sobre llenç
Tot i que es tractava d’una introducció increïblement bàsica a Canvas, heu d’entendre que també és una tecnologia increïblement gran i increïblement potent per arrencar. Aquesta guia simplement va servir com a introducció per fer gràfics amb aquesta nova tecnologia.
convertir-se en un entrenador de gossos en línia gratuïtament
7.4 Posa't a prova
- Afegiu el següent eslògan a la imatge que heu creat: 'El millor lloc tecnològic de la història'.
- Creeu un bucle 'per a' que s'executi durant deu iteracions. Vegeu si podeu moure el dibuix cap avall sobre el llenç, un píxel alhora.
- Emboliqueu el dibuix amb una funció. Què passa si no en dieu?
Per llegir més:
8. On següent?
Gràcies per llegir la meva breu guia de les noves tecnologies que trobareu a HTML5. És innegable que HTML5 és la tecnologia del futur. La majoria de les tecnologies l’adopten, ja que és fàcil d’escriure i potent sense límits. La gent hi fa coses increïbles tot el temps i no dubto que en el futur seràs d’aquelles persones. Estic honrat d'haver format part del vostre viatge al meravellós i meravellós món de HTML5.
Us imploro que continueu aprenent. Seguiu codificant. Continueu pujant de nivell i millorant, i en un tres i no res utilitzaràs les tecnologies que s’han introduït en aquesta breu guia per crear productes meravellosos.
Compartir Compartir Tweet Correu electrònic Val la pena actualitzar-lo a Windows 11?Windows s’ha redissenyat. Però, n’hi ha prou per convèncer-vos de canviar de Windows 10 a Windows 11?
Llegiu a continuació Temes relacionats- Wordpress i desenvolupament web
- HTML5
- Forma llarga
- Guia de forma llarga
Matthew Hughes és un desenvolupador de programari i escriptor de Liverpool, Anglaterra. Poques vegades es troba sense una tassa de cafè negre fort a la mà i adora absolutament el seu Macbook Pro i la seva càmera. Podeu llegir el seu bloc a http://www.matthewhughes.co.uk i seguir-lo a twitter a @matthewhughes.
Més de Matthew HughesSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us