Tot el que necessites saber sobre HTML
i mai t'has atrevit a preguntar
Castellano | Català
Les bases d'una comunicació eficaç són les paraules.
La base d'un espai web són, també, les paraules.
Per tant, hem de cuidar el llenguatge que hi farem servir i hem de processar les paraules utilitzant els recursos que ens permet HTML, que són molts i molt potents.
L'aspecte visual d'un espai web ve determinat per la plantilla CSS (vegeu Mòdul 2: "Con Salsa y Salero") que haguem instal.lat. Com ja hem vist, independentment de la plantilla utilitzada, les etiquetes que farem servir són gairebé les mateixes. Tot i així sempre hi haurà particularitats que ens caldrà conèixer si volem tenir un web que ens representi de forma digna.
En aquest mòdul veurem com processar text, amb exemples simples i clars.
Comencem amb el mòdul 10.
Una novetat extraordinària: el nou editor de WordPress.
Treballar amb un Editor de text extern
Una novetat extraordinària: el nou editor de WordPress.WordPress ha renovat completament l'editor de text a partir de la recent actualització del CMS.
És una interfície molt més pràctica i resol alguns inconvenients de les versions anteriors. Ens ajudarà molt en el moment de crear Noves Entrades al blog.
Però, com que no hi ha res perfecte en aquest món, ens serà una mica més complicat en el moment que vulguem corregir o modificar les Antigues Entrades ja existents.
Malgrat això, no seria correcte no actualitzar WordPress per tal d'estalviar-nos aquest petit escull, ja que val molt la pena enfrontar l'inconvenient perquè les millores en l'edició dels futurs Posts seran immenses.
En tots els exercicis que veurem a partir d'ara farem servir el nou Editor de blocs.
Sí, però compte!Quan comencem a utilitzar el nou editor de WordPress ens adonarem que no tot és tant fàcil com semblava. De cop i volta, les coses no rutllen, l'aparença pública del nostre Post a la web és molt pitjor del que pensàvem obtenir, la cosa cau, una imatge no surt, un video queda massa prim i estirat, etc.
Tot i les millores en l'editor de blocs que WordPress ha incorporat a partir de la versió 5.0 del CMS, continua essent molt ferragós mantenir un blog sense conèixer -encara que sigui de manera superficial- el llenguatge HTML.
Conèixer HTML ens donarà la solució a molts maldecaps!
Hi ha una tendència no justificada a tenir por del codi i voler-ho deixar tot a la responsabilitat de les interfícies, com si les màquines ho fessin tot.
Però si volem mantenir un blog de manera elegant i suficient (sense dependre de terceres persones ni de màquines sempre descerebrades :-) ens cal aprendre allò més bàsic de l'HTML.
Per més invents que es facin, HTML continua -i continuarà- essent el llenguatge d'Internet.
És el mateix escenari que el d'un persona que no ha volgut estudiar ortografia i confia 100% en els correctors de Word.
O qui no estudia un idioma i fa servir sempre el google traductor.
Ai ai ai!
Treballar amb un Editor de text externNormalment quan treballem amb el nou editor de WordPress (disponible a partir de la versió 5.0) les coses ens funcionaran. És un editor molt potent. Però -molt més sovint d'allò que ens agradaria- les coses no acabaran de quadrar.
Per això, haurem de treballar en un editor de text extern.
L'opció més professional és el Sublime Text. Ja ho hem vist en altres mòduls i no dedicarem gaire temps aquí.
Val a dir que és un editor Multiplataforma (es pot fer servir tant en Windows, com en MacOs o Unix). Té molts Plug-ins i complements disponibles per a llenguatges de programació específics i, en definitiva, permet treballar sense distraccions i optimitzant el treball.
Sublime Text té moltes altres funcions i, per alguna raó és l'editor preferit dels desenvolupadors web i programadors, per diverses raons que ara no vindrien al cas. La seva potència no el fa incecessible per a principiants. Al contrari: és molt senzill de treballar-hi i la corba d'aprenentatge és molt plana.
N'hi ha d'altres.
L'alternativa més interessant és ATOM. És un bon editor. Fa el gairebé el mateix que Sublime i, a més, és un programa gratuit :-).
Algú l'ha anomenat l'editor de text per al segle 21. Cada dia guanya més usuaris i seguidors, sobretot en joves desenvolupadors, perquè està construït per l'equip de GitHub, una plataforma de desenvolupament col·laboratiu.
Incorpora l'experiència d'un enorme equip que ha après amb la gestió de molt codi durant molt anys. És flexible i personalitzable, té un munt de plugins. Funciona com una aplicació nativa i, a més, el paquet d'aplicacions és adaptable.
També podem fer servir un altre editor, segons els gustos de cadascú. Veiem-ne alguns dels més utilitzats.
Brackets és un editor de text per a desenvolupadors web i també de fàcil us per a principiants. És Open source i és un producte desenvolupat per l'empresa Adobe, el gran gegant de l'autoedició i els programes d'edició visual. També es pot utilitzar en plataformes Windows, Mac OS i Linux.
Notepad ++ combina la senzilla interfície del Bloc de notes o de Wordpad, amb funcions avançades que ajuden molt a escriptors i desenvolupadors. Algunes de les seves característiques inclouen una interfície personalitzable, entre d'altres.
Notepad ++ és gratuït i, a més, també pot ser portable, perquè l'executi des de la USB o a través d'algun servei d'emmagatzematge en el núvol com Dropbox.
Es molt important l'elecció del ThemeL'element principal d'un programa editor de text, a més de les eines de l'editor en sí, és el Tema que farem servir. El Tema és el responsable per la visualització del codi. Cada programa editor té la possibilitat d'activar diferents temes visuals.
Una bona visualització ens ajudarà a entendre el que estem fent, mentre que una visualització confusa ens portarà a l'error i, per tant, ens farà perdre més temps del que caldria.
Al meu entendre, tant els Themes de l'ATOM com el tema Monokai -que és el que ve per defecte al Sublime- són confusos i no ens ajudaran.
Això és especialment relevant per qui estigui començant a treballar amb un editor de text.
De tota manera, fa molts anys que treballo amb codi i, per mi, continua essent molt important una visualització clara del codi per treballar més segur i de manera més eficient.
El principal inconvenient -no només de l'ATOM sinó també dels Themes que venen per defecte amb el Sublime Text- és que el nom de l'etiqueta és d'un color però tant el signe < que obre l'etiqueta com el signe > que tanca tenen un altre color, i això és confús.
Allò que ajuda a complicar és que el color que tenen aquests senyals d'inici i de final de l'etiqueta HTML és el mateix blanc del text.
Això també passa amb les cometes " dels atributs.
Tot plegat, un embolic semàntic.
El tema Pastels on Dark -que es pot instalar al Sublime Text (com veurem en un altre mòdul)- és més clar perquè tant l'etiqueta com els signes que l'obren i la tanquen tenen el mateix color -és el lila, però podria ser un altre-. No és una qüestió estètica o de gust del color en sí mateix -que, dit de passada, destaca amb elegància en el fons negre del Sublime- però és evident que podria ser un altre. L'interessant és que el color de l'etiqueta i els signes que l'envolten sigui el mateix. Aquest és l'encert.
De la mateixa manera, cada nom del paràmetre (id, class, etc.), també compleix la mateixa norma: tant el nom del paràmetre com l'igual = que el segueix obligatòriament, tenen el mateix color (en aquest cas aquest burdeus).
Semblantment, el valor de cada paràmetre (juntament amb les respectives cometes que obligatòriament l'obren i el tanquen), tenen el mateix color, el marró.
Veiem a continuació com es veu en el navegador el codi de les imatges de sobre. Evidentment el navegador mostrarà exactament igual els dos codis. El Theme és només per a facilitar-nos la feina quan estem treballant.
Aquí un subtítol h4
El text del paràgraf, amb algun identificador que posa el text de color verd: text verd.
Més text amb un identificador més general, que en diem classe.
Llavors, d'aquesta manera molt intuitiva i clara, tot el text que és de color blanc a l'editor és el text que el navegador mostrarà a la pàgina web.
Tot el text que és de color blanc a l'editor és el text que es veurà a la pàgina web.
Inversament, tot el text que és de color a l'editor (sigui lila, burdeus o marró) són les ordres de l'HTML que actuen de forma potent en el resultat final, però que estan amagades, tal com els pertoca per la seva funció.
Tot el text que, a l'editor, es veu en color (sigui lila, burdeus o marró) és invisible a la pàgina web.
Aclareixo això, simplement, perquè en aquest Curs hem optat per aquesta opció i crec que et serà d'utilitat tenir-ho clar.
Al marge d'això, cadascú ha de buscar l'editor i el Theme que més li convingui.
Un nou post des de cero.Quan anem a crear una nova Entrada en el nostre blog hem de tenir en compte l'origen del text.
Enumerem els tres principals orígens:
L'escenari més simple, encara que ens pugui semblar que no, és aquest. Pot tractar-se de WhatsApp o Telegram, és el mateix.
Veiem com fer-ho en el video següent.
Verifiquem el codi del post.Podem fer servir qualsevol dels principals editors de text (com ja hem vist en l'apartat 3 d'aquest mateix Mòdul) segons els gustos de cadascú.
Jo reitero la meva preferència pel Sublime Text i, concretament, aquest tema, Pastels on Dark, pels avantatges que ja he dit.
Aquest tema ve instal.lable molt fàcilment amb la versió 2 del Sublime Text, però -no sé per quina raó- ja no ve amb la versió 3 :-(. Per tant, t'aconsello que et descarreguis la versió 2. Pots fer-ho des d'aquest link: Sublime Text 2.
Partint del mateix text que ens han enviat per WhatsApp del video anterior, modificarem el text en l'editor.
Veiem com fer-ho al video següent.
Resum i exercicis pràctics.Seguim!
El curs té 21 mòduls, estructurats en 3 nivells:
- Nivell bàsic: Els 7 primers mòduls.
- Nivell mitjà: Els 7 mòduls següents.
- Nivell avançat: Els 7 mòduls finals.
També pots comentar a:
Aquest article l'ha escrit Josep Massó i Carreras (de petit, a casa i a l'escola, en deien Pep).
Em dedico al disseny i al desenvolupament web. Treballo per millorar la presència a internet d'empreses, federacions, fundacions i professionals. Hi ha tres àmbits que m'apassionen:
“Cuida la teva presència a Internet.”
Sigues ètic i generós
(allò que plantem avui és el que, tard o d'hora, acabarem recollint).
© 2019 Cros i Massó