1. Introducció al currículum d'estàndards web/continguts

Chris Mills. 8 de juliol del 2008. Publicat a: currículum, principiant, web, estàndards, curs

Des de fa temps que tinc un somni. Els darrers 8 o 9 anys, la meva feina s'ha centrat molt en l'ensenyament, ja sigui encarregant i editant publicacions tècniques per tal d'ajudar els altres a crear coses interessants amb la tecnologia, formant nous empleats a les diferents empreses per les quals he treballat o editant i redactant articles de seminaris per ajudar els altres a utilitzar el software Opera. També m'entusiasma el web i crec fermament en els estàndards web oberts. Volia contribuir a fer que el web fos un lloc millor i crec que això torna a tenir a veure amb l'ensenyament, ja sigui ensenyant els altres com col·laborar i tenir més respecte mutu o ensenyant-los com fer que els seus llocs web funcionin en totes les plataformes i dispositius, i siguin accessibles per a persones discapacitades. Els estàndards web són la clau per al darrer objectiu, així que vaig decidir invertir el meu temps i energia en alguna cosa que els ajudés a millorar l'adopció d'estàndards al web actualment i en el futur. Li he estat donant voltes al cap durant un temps, però finalment ha donat els seus fruits amb Opera: agraeixo molt als meus estupends caps que m'hagin pagat per fer-ho. Un dels meus somnis s'ha fet realitat finalment.

Així, doncs, en aquest article us presentaré el resultat d'una gran quantitat de feina en els darrers mesos (meva i de moltes altres persones): el currículum d'estàndards web, un curs dissenyat per donar a tothom una bona base en disseny/desenvolupament web, sigui quin sigui el destinatari, l'ús del qual és completament gratuït, accessible i no requereix coneixements previs. Com a destinataris penso fonamentalment en les universitats, perquè crec que d'alguna manera els estàndards d'ensenyament dels estàndards web són molt deficients a moltes universitats. He sentit rumors d'alumnes als qui se'ls ha baixat la nota per utilitzar estàndards web en els seus treballs, perquè els esquemes de puntuació són molt antiquats; també he sentit a dir d'empresaris que es desesperen perquè quan entrevisten graduats universitaris per a llocs relacionats amb el web, troben que els graduats realment no tenen ni idea sobre desenvolupament web en el món real. Si esteu en una universitat progressista que sí que ensenya estàndards web de manera raonable, em trec el barret: poseu-vos en contacte amb mi!

En aquest aparta tractaré el següent:

• Per què calen estàndards web? En aquest apartat tractaré breument els avantatges d'utilitzar estàndards web, per què no s'adopten com s'hauria de fer i com el meu curs pretén abordar aquests temes.

• Com està estructurat el curs. El que el seu nom indica. Aquesta secció també parla sobre com haurien de pensar els educadors a l'hora de presentar el material per utilitzar-lo de manera eficaç als cursos.

• Qui hauria de fer aquest curs? Quan dic "tothom", què vull dir exactament?

• Continguts. Passeu directament a aquest subapartat si us canseu de la meva xerrameca i voleu anar directament a l'aprenentatge.

• Agraïments

1.1. Per què calen estàndards web?

Els principals motius pels quals l'adopció d'estàndards web en la seva tasca de disseny/desenvolupament web és una idea tan bona s'amplien a l'article 4, però els tractaré breument aquí com a presentació. L'ús d'estàndards web ofereix els següents avantatges:

1. Eficiència del codi: Tal com aprendreu al llarg del curs, gran part de les millors pràctiques en l'ús d'estàndards web es basen en la reutilització del codi: el fet que es pugui separar el contingut HTML de la informació d'estil (CSS) i de comportament (JavaScript), la qual cosa permet mantenir una mida reduïda dels fitxers i escriure el codi només una vegada i, a més tard, reutilitzar-lo sempre que faci falta.

2. Facilitat de manteniment: Això està estretament relacionat amb el darrer punt: si es pot escriure el codi HTML només una vegada i després aplicar els estils i el comportament sempre que calgui utilitzant classes i funcions, si es necessita canviar alguna cosa més endavant pot fer-se el canvi només a un lloc i que es traslladi a tot el lloc web, i no haver d'especificar aquest canvi cada vegada que calgui.

3. Accessibilitat: Els dos punts següents estan molt relacionats: un dels grans problemes del web és fer que els llocs web siguin accessibles per a tothom, independentment de qui sigui, independentment de la circumstància. Això inclou fer que els llocs web siguin utilitzables per persones amb discapacitats com ara ceguesa o problemes de visió i problemes motors (és a dir, persones amb limitació de moviments i que és possible que no puguin usar adequadament les mans, o gens ni mica). Mitjançant l'ús d'estàndards web i bones pràctiques, es pot aconseguir que els llocs web siguin utilitzables per a aquest grup de públic del web tan important sense que calgui fer cap esforç addicional.

4. Compatibilitat de dispositius: amb això em refereixo al fet de garantir que els seus llocs web funcionaran no només a diferents plataformes —és a dir, Windows, Mac, Linux— sinó també amb dispositius de navegació alternatius, com els que avui dia poden incloure els telèfons mòbils, televisors i consoles de jocs. Aquests dispositius tenen limitacions com ara la mida de pantalla, la potència de processament, els mecanismes de control disponibles i d'altres, però una vegada més la bona noticia és que, utilitzant estàndards web i les millors pràctiques, està garantit que els llocs web funcionaran a la major part d'aquests dispositius. Hi ha més telèfons mòbils al món que ordinadors, molts dels quals són compatibles amb Internet, de manera que ¿us podeu permetre vosaltres o els vostres clients perdre-us aquest mercat? Per a més informació sobre desenvolupament web per a mòbils podeu consultar alguns dels articles relacionats a dev.opera.com.

5. Aranyes web i motors de cerca: Amb això em refereixo a allò que s'anomena "optimització de motors de cerca", la pràctica de fer que els llocs web siguin tan visibles com sigui possible per als anomenats cercadors web que rastregen el web i indexen llocs web, i, per tant, ofereixen millors posicions de cerca a llocs com ara Google. Hi ha tota una ciència al darrere (vegeu els articles sobre l'optimització de motors de cerca com ara Intelligent site structure for better SEO! i Semantic HTML and Search Engine Optimization) però, una vegada més, només utilitzant els estàndards web ja aconseguireu que el vostre lloc sigui més visible a Google, Yahoo!, etc., la qual cosa és bona per als negocis.

No obstant això, tot i aquests avantatges, la major part de llocs no segueixen els estàndards web i molts desenvolupadors web actualment encara utilitzen pràctiques incorrectes i obsoletes. "Per què?", us preguntareu. Hi ha una sèrie de motius per a això: alguns diran que és per manca de formació, per polítiques d'empresa, perquè no cal aprendre estàndards si se'ls paga de tota manera, que són molt difícils d'aprendre, que hi ha poca compatibilitat dels estàndards als navegadors web... Examinem amb més detall alguns d'aquests conceptes i, a continuació, vegem els arguments contraris per a desfer-nos de qualsevol excusa que ens impedeixi adoptar o aprendre els estàndards.

1. Manca de formació: Això és un problema, però és un dels motius principals pels quals s'ha creat aquest curs. Moltes universitats no ensenyen els estàndards web als seus cursos relacionats amb el web, i molts plans d'estudis tendeixen a incloure pràctiques obsoletes, molt difícils de canviar a causa de la burocràcia. Els llibres i cursos de formació tendeixen a ser cars. Però un moment. Ara hem ofert un curs que és gratuït i estem anant per les universitats, etc., per ajudar-los a fer aquests canvis, de manera que realment no hi ha excusa possible en aquest cas.

2. Polítiques d'empresa: No hi ha dubte que algunes empreses/institucions encara tenen llocs web realment antiquats i obsolets. Pot ser que tinguin polítiques que obliguin els seus empleats a utilitzar navegadors obsolets, però la situació està millorant i ara que hi ha un curs gratuït disponible per a saber fàcilment com fer canvis, les coses haurien de millorar encara més. L'actualització d'un lloc web als estàndards moderns anima les empreses a actualitzar els navegadors que utilitzen perquè els llocs no es veuran bé en navegadors obsolets (tot i que encara haurien de funcionar en navegadors antics). Les empreses també haurien d'animar els seus clients a actualitzar-se. També hi ha un raonament empresarial sòlid: els llocs que utilitzen estàndards web, com s'ha explicat anteriorment, obtindran millors resultats als motors de cerca i seran accessibles per a persones amb discapacitats i usuaris de dispositius alternatius. Es poden permetre les empreses d'ignorar aquest públic?

3. "No necessito aprendre'ls": Sé que alguns desenvolupadors encara diuen: "però si estic utilitzant pràctiques obsoletes i encara em paguen, per què m'haig de preocupar amb aquestes coses noves?" Com s'ha dit abans, fa que el codi sigui més eficient, més fàcil d'escriure i més fàcil de mantenir. A més, permet escriure un codi modern que és accessible i utilitzable en dispositius alternatius. És o no interessant? També farà que el vostre conjunt d'habilitats sigui a prova de contingències futures i el farà capaç de guanyar més. Avui en dia, hi ha moltes empreses que demanen saber fer servir els estàndards web.

4. "Costa massa d'aprendre": Ximpleries. Després de digerir part d'aquest curs, veureu com n'és de fàcil agafar els conceptes bàsics de l'ús d'estàndards web, tant si li sou nous en el desenvolupament/disseny web com si ja coneixeu el tema i esteu actualitzant el vostre conjunt de capacitats. És tan difícil com utilitzar els mètodes antiquats i desfasats, la qual cosa no és gens difícil, i, malgrat tot, aporta molts avantatges en comparació amb els mètodes antics.

5. Compatibilitat dels estàndards als navegadors: Abans, la compatibilitat dels estàndards als navegadors web solia diferir molt i això feia que aconseguir que un lloc web funcionés en diferents navegadors fos tot un mal de cap. Però actualment això ja ha passat i els navegadors actuals tenen tots una compatibilitat correcta amb els estàndards web. De vegades encara cal compatibilitat amb navegadors antics que no disposen d'una compatibilitat tan bona, però mitjançant l'ús de les millors pràctiques actuals podeu garantir que els usuaris d'aquests navegadors segueixin tenint una experiència d'usuari raonable.

Així, doncs, com es pot veure, realment no hi ha excusa per no adoptar els estàndards web en la seva tasca de desenvolupament web. Com a mínim si feu aquest curs des del punt de vista d'un principiant, començareu amb bon peu i aprendreu les millors pràctiques des del començament en comptes d'haver après pràctiques incorrectes.

1.2. Estructura del curs

El curs es compon de diversos articles, dels quals n'hi haurà més de 50 quan s'hagi acabat el curs bàsic, cadascun dels quals amb milers de paraules. Cada article tracta sobre un microtema específic i, en cas necessari, inclou antecedents sobre el tema, teoria essencial, exemples pràctics i guies pas per pas, a més de preguntes de repàs per comprovar els seus coneixements adquirits.

A més, en el futur oferirem un programa d'aprenentatge sencer pas per pas, que repassarà tot el procés de construcció d'un lloc web de principi a fi.

Una manera lògica d'impartir el curs és calcular en quantes lliçons es pot ensenyar i dividir-les pel nombre d'articles. Per a cada lliçó, feu que els alumnes llegeixin els articles relacionats amb la lliçó esmentada abans que s'imparteixi. A continuació, repasseu exemples pràctics durant la lliçó i feu que els alumnes responguin les preguntes de repàs després de cada lliçó. Lògicament, crec que una hora hauria de ser temps suficient per a repassar els conceptes continguts a cada article, sempre que els alumnes llegeixin cada article abans d'impartir les lliçons. En aquest curs hi ha unes 50 hores de temps de classe i 50 hores de lectura preliminar.

Naturalment, cal tenir en compte la quantitat de temps que es triga a impartir el curs i què s'ha de cobrir exactament a cada lliçó, però l'experiència n'és la clau.

1.3. Qui hauria de seguir aquest curs?

Es tracta d'un curs d'estàndards web que consta de diversos articles, dirigit a pràcticament tothom que vulgui aprendre disseny web basat en estàndards des de zero. La finalitat és que el lector passi de tenir una mera familiaritat bàsica amb la navegació al web a ser competent en CSS i HTML i a tenir coneixements bàsics de JavaScript i com encaixa en el trencaclosques. Haureu de donar prou coneixements perquè es pugui començar a pensar a entrar al mercat laboral amb confiança (naturalment, l'experiència no es pot ensenyar).

A qui va dirigit? Vull que el pugui fer qualsevol persona que desitgi aprendre disseny web "de la manera correcta":

1. Estudiants i professors universitaris: Ja ho he dit anteriorment: es tracta d'un conjunt ideal d'articles a partir del qual es pot crear un curs propi per impartir-lo als estudiants o bé utilitzar part dels articles per a completar un altre curs. Si sou alumnes que ja esteu estudiant algun curs relacionat amb el web, hauríeu de fer servir aquest material per a completar els vostres coneixements i pressionar els vostres professors perquè també el puguin tenir en compte. Recomanaria també a tots els professors i conferenciants que facin una ullada a aquest material per tal d'assegurar-se que les tècniques cobertes als seus cursos són bones pràctiques actuals.

2. Alumnes en edat preuniversitària o universitària: Encara que aquest curs s'ha concebut principalment per a adults, també es podria impartir perfectament a alumnes més joves; és qüestió de provar-ho i veure com funciona.

3. Dissenyadors i desenvolupadors web existents: Hi ha molts desenvolupadors i dissenyadors web al mercat que no estan utilitzant els estàndards web i millors pràctiques, o que podrien utilitzar una referència fàcilment accessible per a consultar dubtes o utilitzar-los per repassar els seus coneixements. Als primers els recomano que li donin una oportunitat a aquest curs i vegin com és de fàcil i el valuós que resulta adoptar els estàndards web. Per als darrers, estic segur que trobaran aquest curs d'utilitat per a ajudar els altres, per a repassar els seus coneixements, consultar fets difícils de recordar i trobar arguments per a intentar convèncer a caps i clients que coses com l'accessibilitat són molt útils.

4. Educadors a empreses: Es tracta d'una forma ideal de proporcionar una formació gens cara als empleats.

5. Altres persones: Si sou persones a qui simplement els ve de gust aprendre alguna cosa sobre disseny i desenvolupament web, aleshores, una vegada més, aquesta és una forma gens cara de comptar amb una mica d'ajuda per al vostre objectiu.

No espero que la gent pagui per a utilitzar aquest curs. Es publica amb una llicència de Creative Commons, de manera que està disponible lliurement per a qualsevol que vulgui fer-ne ús mentre ens doni el reconeixement adequat.

1.4. Continguts

Cal tenir en compte que s'han publicat els primers 39 articles del currículum i que se'n publicaran aproximadament 10 més tan aviat com sigui possible per a completar el curs.

Inici

• 1. Material d'introducció, per Chris Mills (és el que heu llegit fins ara). [versió original en anglès]

HI HA TRADUCCIONS DISPONIBLES. Hi ha traduccions disponibles del currículum d'estàndards web.

Introducció al món dels estàndards web

• 2. La història d'Internet i el web i l'evolució dels estàndards web
• 3. Com funciona Internet?
• 4. El model d'estàndards web: HTML, CSS i JavaScript
• 5. Estàndards web: un bonic somni, però quina és la realitat?

Conceptes de disseny web

Aquesta secció no entrarà en detalls de codis o etiquetatge, i servirà d'introducció al procés de disseny per més tard passar a començar a crear gràfics, codi i presentarà conceptes d'AI, navegació, usabilitat, etc.

• 6. Arquitectura de la informació: planificació d'un web
• 7. Què necessita una bona pàgina web?
• 8. Teoria del color
• 9. Construcció de l'esquelet d'una pàgina web
• 10. Combinacions de color i models de disseny
• 11. La tipografia al web

Fonaments d'HTML

• 12. Conceptes bàsics d'HTML
• 13. L'element <head> de l'HTML
• 14. Escollir el doctype correcte per als documents HTML

El text central d'HTML

• 15. Etiquetar contingut textual en HTML
• 16. Llistes HTML
• 17. Imatges en HTML
• 18. Enllaços HTML: construïm un web!
• 19. Taules HTML
• 20. Formularis HTML: conceptes bàsics
• 21. Elements semàntics menys coneguts
• 22. Contenidors genèrics: els elements div i span
• 23. Creació de múltiples pàgines amb menús de navegació
• 24. Validar l'HTML

Accessibilitat

• 25. Conceptes bàsics d'accessibilitat
• 26. Proves d'accessibilitat

CSS

• 27. Conceptes bàsics de CSS
• 28. Herència i cascada
• 29. Creació d'estils de text amb CSS
• 30. El model de composició de CSS: caixes, vores, marges, farcit
• 31. Imatges de fons en CSS
• 32. Estils de llistes i enllaços
• 33. Estils de les taules
• 34. Disseny, composició i presentació de formularis amb CSS
• 35. Elements flotants i "clearing"
• 36. Posicionament estàtic i relatiu en CSS
• 37. Posicionament absolut i fix amb CSS

Encapçalaments, peus, columnes i plantilles

• 38. Encapçalaments, peus, columnes i plantilles

Agraïments

La quantitat de persones que m'han ajudat a crear aquest curs són massa nombroses per a esmentar-les amb detall, però crec no haver-me oblidat de ningú. Totes són grans persones, de manera que no les perdeu de vista, aneu a les seves xerrades, compreu els seus llibres, llegiu els seus blocs o feu qualsevol altra cosa per a fer-los costat. Us dono a tots les gràcies i us expresso la meva admiració.

1. Els autors: moltes gràcies a Ben Buchanan, Tom Hughes–Croucher, Mark Norman "Norm" Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes–Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter–Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan i Mike West. Sense vosaltres, aquest curs no seria res, literalment.

2. L'equip d'Opera: agraeixo molt a Jan Standal, David Storey, la resta del meu equip i tota la gent d'Opera que creguessin en aquesta idea i m'ajudessin a desenvolupar el pla.

3. Les organitzacions: gràcies a tots els de Yahoo (als autors, i a Sophie Major per la seva ajuda en l'organització i promoció), a WaSP (especialment a Gareth Rushgrove, Stephanie Troeth i Aarron Walter), a Britpack, a la gent de Geekup i a totes les universitats que van mostrar interès a mirar-se aquest curs i contribuir en el seu desenvolupament.

4. Les persones: moltes gràcies a aquestes persones meravelloses: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. Les meves disculpes si m'he deixat algú.

5. Els lectors: agraeixo especialment tots els lectors el seu interès en la creació de pàgines web de la manera correcta i també el fet de prendre's la molèstia de llegir aquest curs.

Sobre els autors...

Ben Buchanan

Mark Norman Francis

Linda Goin

Paul Haine

Jenifer Hanen

Benjamin Hawkes-Lewis

Ben Henick

Christian Heilmann

Tom Hughes-Croucher

Roger Johansson

Jonathan Lane

Chris Mills

Tommy Olsson

Nicole Sullivan

Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.

: :