DIA 2 (17.04.2023)<\/p>\n\n\n\n
Avui hem fet juntes l’exercici que vaig proposar per la sessi\u00f3 que no vaig poder fer: passar un disseny a HTML<\/p>\n\n\n\n
Quan rebem un disseny que ha de passar a HTML, el primer pas \u00e9s convertir aquest disseny (formes, colors, …) en un text. Aquest text ha de tenir sentit per ell mateix i ha de contenir les etiquetes que expliquin el sentit de tots els elements.<\/p>\n\n\n\n
Hem anat baixant per el disseny i hem anat posant les etiquetes que hem considerat necess\u00e0ries:<\/p>\n\n\n\n
Hem vist que quan maquetem prenem decisions basant-nos en el nostre propi criteri. Per exemple podem tractar una s\u00e8rie de punts com un conjunt de t\u00edtols i par\u00e0grafs, o com a llistat.<\/p>\n\n\n\n
Tamb\u00e9 podem considerar si les imatges s\u00f3n informatives o no. Si no ho s\u00f3n, podem no posar-les com imatge o posar-les sense l’atribut alt.<\/p>\n\n\n\n
\nRECORDEM: \u00c9s important que l’HTML sigui totalment sem\u00e0ntic, on cada element est\u00e0 etiquetat a partir de la seva funci\u00f3 al text. Hem d’oblidar qualsevol refer\u00e8ncia visual.<\/p>\n<\/blockquote>\n\n\n\n
A vegades el disseny ens enganya, perqu\u00e8 trobem coses com:<\/p>\n\n\n\n
\n
- t\u00edtols de diferent nivell a la mateixa mida<\/li>\n\n\n\n
- t\u00edtols d’un nivell inferior m\u00e9s grans que t\u00edtols d’un nivell superior <\/li>\n\n\n\n
- ordre dels elements canviat (video + t\u00edtol + descripci\u00f3)<\/li>\n<\/ul>\n\n\n\n
Hem de poder detectar aquestes coses i mantenir-nos fermes en la creaci\u00f3 d’un HTML purament sem\u00e0ntic. Aix\u00f2 pot fer que a vegades posem continguts que no estan realment al disseny (per exemple dos punts entre una paraula i la seva descripci\u00f3, text on hi ha icones,…).<\/p>\n\n\n\n
Seguint amb la nostra hist\u00f2ria de l’HTML, expliquem que mentre les cient\u00edfiques de la nostra fict\u00edcia universitat estan etiquetant el text, hem dedicat una part de l’equip a desenvolupar un programa que permeti llegir aquest text: el navegador<\/strong>.<\/p>\n\n\n\n
\nRECORDA: S\u00f3n navegadors Firefox<\/em>, Safari<\/em>, Chrome<\/em>, Opera<\/em> o Edge<\/em>. Google no \u00e9s un navegador, \u00e9s una empresa que t\u00e9 una web on podem fer cerques (tamb\u00e9 t\u00e9 altres serveis com correu web, programari d’ofim\u00e0tica online, allotjament d’arxius,…). La p\u00e0gina web de google (google.es) la podem veure en qualsevol navegador, podem fer cerques a google des de diferents navegadors, no nom\u00e9s a Google Chrome<\/em>.<\/p>\n<\/blockquote>\n\n\n\n
Quan es va crear el primer navegador es van prendre una s\u00e8rie de decisions que han durat fins avui:<\/p>\n\n\n\n
\n
- els navegadors llegiran text etiquetat i l’interpretaran visualment<\/li>\n\n\n\n
- l’HTML nom\u00e9s contindr\u00e0 text i aquest estar\u00e0 etiquetat sem\u00e0nticament<\/li>\n<\/ul>\n\n\n\n
El fet de deixar la visualitzaci\u00f3 en mans del navegador, permet que qui produeix el contingut nom\u00e9s es centri en la informaci\u00f3 que ha de transmetre. Aquesta separaci\u00f3 de forma i fons permet:<\/p>\n\n\n\n
\n
- Reduir el pes dels documents HTML (nom\u00e9s hi ha text i amb un conjunt limitat d’etiquetes – principi de simplicitat<\/strong>)<\/li>\n\n\n\n
- Poder fer HTML amb qualsevol dispositiu, ja que la m\u00e0quina m\u00e9s simple \u00e9s capa\u00e7 de generar i llegir text (principi d’universalitat<\/strong>)<\/li>\n\n\n\n
- Poder fer i llegir HTML amb qualsevol sistema operatiu (no caldr\u00e0 crear versions diferents segons la plataforma) (principi d’universalitat<\/strong>)<\/li>\n\n\n\n
- Permetre que una m\u00e0quina llegeixi el text i valori la import\u00e0ncia que una paraula t\u00e9 en el text, segons si la troba en un h1, un h2, un par\u00e0graf, una llista, en l’alt d’una imatge o altres llocs (hem parlat d’aix\u00f2 i el ranking<\/em> de Google<\/em>)<\/li>\n<\/ul>\n\n\n\n
Al principi, van sortir algunes empreses que van entrar en una lluita per fer el navegador millor, el que permet\u00e9s fer p\u00e0gines web m\u00e9s vistoses. Aix\u00f2 va fer que cada navegador propos\u00e9s fer servir un conjunt d’etiquetes pr\u00f2pies.. i es va posar en perill el principi d’universalitat. Per aix\u00f2 es va decidir crear el W3C<\/strong>, un consorci mundial que vetlla per mantenir un llistat de les etiquetes que els navegadors han de poder llegir. De tant en tant, es revisa aquesta llista i es proposa una nova versi\u00f3 de l’HTML: HTML 1, HTML 2,… fins arribar a l’actual HTML 5<\/strong>.<\/p>\n\n\n\n
Cada versi\u00f3 d’HTML evoluciona el codi, per\u00f2 sempre mantenint una m\u00e0xima: els navegadors m\u00e9s antics han de poder llegir l’HTML m\u00e9s nou (principi de degradabilitat<\/strong>) Les etiquetes noves no han de generar un error en els navegadors que no les entenen.<\/p>\n\n\n\n
A l’\u00faltima revisi\u00f3 de l’HTML es van afegir una s\u00e8rie d’etiquetes per fer agrupacions de contingut. Aquestes etiquetes s\u00f3n tamb\u00e9 sem\u00e0ntiques:<\/p>\n\n\n\n
\n
- header<\/li>\n\n\n\n
- footer<\/li>\n\n\n\n
- section<\/li>\n\n\n\n
- article<\/li>\n\n\n\n
- main<\/li>\n\n\n\n
- aside<\/li>\n\n\n\n
- nav<\/li>\n\n\n\n
- …<\/li>\n<\/ul>\n\n\n\n
A classe, hem completat el nostre HTML amb aquestes etiquetes.<\/p>\n\n\n\n
L’arxiu que obrir\u00e0 el navegador t\u00e9 l’extensi\u00f3 .html (.htm tamb\u00e9 serveix). Aquest arxiu de text tindr\u00e0 una estructura molt simple:<\/p>\n\n\n\n
<!DOCTYPE><\/p>\n\n\n\n
<html><\/p>\n\n\n\n
<head> .. <\/head><\/p>\n\n\n\n
<body> …. <\/body><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
\u00c9s important:<\/p>\n\n\n\n
\n
- posar noms descriptius als fitxers<\/li>\n\n\n\n
- no fer servir ni espais en blanc ni car\u00e0cters que no siguin a l’alfabet angl\u00e8s (si volem fer espais, farem servir guions)<\/li>\n<\/ul>\n\n\n\n
un exemple de nom d’arxiu seria: plantilla-arxiu-web.html<\/p>\n\n\n\n
Pot ser que l’editor de codi us suggereixi escriure la primera l\u00ednia de la seg\u00fcent manera:<\/p>\n\n\n\n
<!doctype html><\/p>\n\n\n\n
Tamb\u00e9 pot ser que, al fer un arxiu HTML, ja us cre\u00ef l’estructura b\u00e0sica.<\/p>\n\n\n\n
A dins de l’etiqueta <head> posarem ordres per al navegador, informaci\u00f3 que volem que el navegador tingui en compte a l’hora de visualitzar el nostre document.<\/p>\n\n\n\n
A dins de l’etiqueta <body> posarem el contingut que volem que es pugui veure \/ escoltar.<\/p>\n\n\n\n
Hem copiat i enganxat el text de l’exercici del primer dia (sobre les pioneres inform\u00e0tiques) a dins del body. Ens hem assegurat de guardar els canvis i hem obert l’arxiu html en un navegdor.<\/p>\n\n\n\n
Qu\u00e8 passa quan mirem un arxiu html en un navegador?<\/strong><\/h2>\n\n\n\n
Quan obrir un document html a un navegador podem visualitzar-lo.<\/p>\n\n\n\n
El navegador llegeix les etiquetes i les representa visualment:<\/p>\n\n\n\n
\n
- Els h1 s\u00f3n m\u00e9s grans que els h2; els h2 s\u00f3n m\u00e9s grans que els h3;…<\/li>\n\n\n\n
- Els enlla\u00e7os els mostra de color blau i subratllats<\/li>\n\n\n\n
- Els \u00edtems de les llistes tipus ul, comencen amb un puntet negre i estan tabulades cap a dins<\/li>\n\n\n\n
- La zona del body t\u00e9 el fons blanc<\/li>\n\n\n\n
- La zona del body t\u00e9 un espai interior, el contingut no va a sang<\/li>\n\n\n\n
- El text \u00e9s de color negre i fa servir una tipografia amb serifa que hi hagi instal\u00b7lada a l’ordinador.<\/li>\n<\/ul>\n\n\n\n
Hem pres nosaltres aquetes decisions? No, ho ha fet el navegador. Nosaltres hem posat la informaci\u00f3, el navegador la representaci\u00f3.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Els documents HTML s\u00f3n responsive per naturalesa, \u00e9s a dir: s’adapten a la mida de la pantalla sense que es perdi informaci\u00f3. Els par\u00e0grafs es divideixen en diferents l\u00ednies de forma autom\u00e0tica, ocupant tota la pantalla d’esquerra a dret<\/p>\n\n\n\n
En alguns navegadors veureu car\u00e0cters extranys on s’han de veure accents i altres car\u00e0cters no anglesos. No us ha de preocupar, veurem aviat qu\u00e8 podem afegir dins de la zona etiquetada como a head per a que es visualitzin correctament. <\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
DIA 2 (17.04.2023) Avui hem fet juntes l’exercici que vaig proposar per la sessi\u00f3 que no vaig poder fer: passar un disseny a HTML Quan rebem un disseny que ha de passar a HTML, el primer pas \u00e9s convertir aquest disseny (formes, colors, …) en un text. Aquest text ha de tenir sentit per ell… Continueu llegint HTML sem\u00e0ntic II<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":8,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/10\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}