En aquesta pràctica aprendràs com fer una taula senzilla en HTML.
Per on comencem? A l’inici d’aquesta pàgina hi ha una explicació de les parts d’una taula. Fes-li una ullada.
Per on seguim? Accedeix a aquesta pàgina i juga amb les activitats exemple: efegeix files, columnes, vores, defeneix estils, etc.
I ara què? Fes un document HTML en el qual aparega la teua organització setmanal. Pot ser l’horari de classe, o pot ser horari de gestió de temps durant COVID-19. Recorda fusionar cel·les horitzontalment o verticalment, així com defineix els diferents colors per a diferents ítems en el full CSS associat. En la imatge inferior es mostra un exemple. En aquest enllaç podeu veure com està codificat.
En aquesta pràctica aprendràs a donar format bàsic a una pàgina web.
Per on comencem? En les dues pràctiques anteriors hem estat definint l’estructura d’una pàgina web utilitzant els elements bàsics de HTML. Hem aprés què són les etiquetes i què són els atributs dels diferents elements. Així, hem emprat els elements bàsic com: títols de seccions, imatges, enllaços a altres pàgines web, paràgrafs i llistes.
En cap moment hem canviat l’aparença dels elements, és a dir: la gràndària, estil de font, tipus vinyeta, els colors de fons/primer pla. Tot això correspon a la definició dels estils.
El HTML es complementa amb CSS per a definir l’aparença de la pàgina web. Entra en aquesta pàgina web i comprova com canvia l’aparença depenent dels estils definits.
Com seguim? Els fulls d’estil s’apliquen en cascada. Això vol dir que primer s’aplica el que està definit a nivel general i després es pot anar especificant. Per exemple:
A nivell d’element. Tots els paràgrafs tenen el mateix estil el definit per a l’etiqueta <p>
A nivell de classe. Tots els paràgrafs que són el subtítol de la notícia <p class="subtitol>
A nivell d’identificador. El paràgraf que s’identifica amb un identificador. Només hi haurà un únic element en tot el document amb aquest identificador. <p id=»especial»>
Una regla CSS té l’estructura mostrada en la imatge de l’esquerra.
Primer s’especifica la jerarquia de selectors, i dins de les claus les declaracions separades per punt i coma. Cada declaració especifica una propietat i un valor separats per dos punts.
Pots trobar la documentació de referència per a CSS en aquesta pàgina: les diferents propietats dels diferents elements.
Accedeix a aquesta pàgina i realitza els exercicis guiats. Ficaràs en pràctica els conceptes explicats anteriorment.
Un dels elements més interessants a l’hora d’organitzar i donar aparença una web és l’element <div>. L’altre important és <span>. En aquest enllaç tens una explicació i un parell d’exercicis a realitzar per a veure la diferència. Quan els acabes, realitza aquests 4 exercicis que apliquen a l’element <div>.
I ara què? Aplicant els consells d’aquest vídeo, intenta fer el teu curriculum en una pàgina web.
En la capçalera estarà el teu nom, centrat vertical i horitzontalment.
Els menú tindrà enllaços a les seccions del contingut.
En la part principal de contingut especificaràs la informació important de cada etapa.
A la banda de la dreta estarà una foto o avatar teu i un enllaç a una pàgina externa.
En aquesta pràctica aprendràs un poquet més sobre els elements bàsics de HTML.
Com comencem? En HTML tenim dos grans conceptes:
Etiqueta. Té estructura <nom_etiqueta> contingut .... </nom_etiqueta>. Per exemple <h1> Hola món </h1>. Fixa’t en la diferència de l’etiqueta d’obertura i etiqueta de tancament.
Atribut. Un atribut dóna informació addicional a l’etiqueta i s’especifica sempre en l’etiqueta d’obertura. Té estructura nom_atribut = "valor". Per exemple <a href="https://edutictac.es/sanja/> Enllaç al meu blog</a>. L’etiqueta és <a> (enllaç) i href és l’atribut que especifica quina pàgina web s’ha d’obrir. Completa la informació de l’etiqueta.
Com seguim? Accedeix a la pàgina web i prova els exercicis del bloc Bàsic.
I ara què? Fes una pàgina web senzilla utilitzant tots els elements practicats i puja el fitxer .html a la tasca de l’aula virtual. Fixa’t bé en el resultat.
Sanja Dabic
Aquesta és una xicoteta plana web on intente utilitzar els elements bàsics de HTML.
Enguany m’he fet un blog on estic publicant les pràctiques per al meu alumnat.
En aquesta pràctica tindrem el primer contacte amb HTML
Per on comencem? Mira aquest vídeo que fa una xicoteta explicació sobre llocs web. Contesta aquestes preguntes:
Què és la web?
Quin nom rep la màquina on s’emmagatzema una pàgina web?
Quin nom rep el dispositiu on es visualitza una pàgina web?
Quin programa fa falta per a visualitzar una pàgina web?
Quins llenguatges fa falta utilitzar per a fer pàgines web?
Per on seguim? Llig el contingut d’aquesta pàgina on s’explica què és HTML i l’estructura d’una pàgina HTML. En aquesta pàgina descriu les diferentes formes d’utilitzar editors HTML. Escull la que millor s’adapte a tu.
I ara què? Realitza la teua primera pàgina web i puja el fitxer .html a la tasca de l’aula virtual. Fixa’t bé en el resultat. Es veu correctament? Què has de fer perquè les lletres accentuades es visualitzen correctament?
La meua primera pagina web
HOLA MÓN
Aquesta és la primera pàgina web realitzada per ….. El que més m’ha agradat és …. El que més m’ha costat és…..
En aquesta pràctica coneixeràs alguns mecanismes que asseguren la identitat en Internet.
Per on comencem? Compara les imatges dels dos documents. Fixa’t en la signatura. Reflexiona i contesta, raontant la resposta, aquestes dos preguntes en el fòrum de l’aula virtual:
Es pot assegurar que la signatura manuscrita està feta per la persona que diu ser si el document ha arribat de forma electrònica?
Es pot assegurar que la signatura electrònica està feta per la persona que diu ser si el document ha arribat de forma presencial (te’l donen en mà)?
Document signat electrònicament
Document signat manualment
Per on seguim? Visualitza aquest vídeo on s’explica el certificat digital i la signatura digital de documents. Després de visualitzar el vídeo has d’intentar definir els següents conceptes:
Certificat digital
Signatura electrònica
Clau privada
Integritat d’un document
No repudi
Funció resum (hash)
Autoritats de certificació
A l’hora d’obrir un document signat electrònicament i comprovar la seua validesa es poden fer servir els següents passos.
Obrir el document en un programa visor de PDF que tinga habilitada l’opció de verificació de signatures
Obrir l’enllaç de verificació del document en el navegador.
I ara què?
Realitza un mapa conceptual relacionant els conceptes que has definit en l’apartat anterior. Si ho trobes convenient, pots ampliar-lo. El mapa conceptual el pots fer en programes de dibuix com LibreOffice (inserint formes) o en línia (utilitzant l’opció d’exportar a imatge). En aquest vídeo he fer una xicoteta explicació de com fer el mapa conceptual
Busca en Internet les diferents formes d’obtindre un certificat digital en Espanya i quins són els requisits legals per obtindre’l. Fes una infografia, explicant-lo. En aquesta pàgina pots fer una infografia i descarregar-te la imatge resultant SENSE registrar-te.
En aquesta pràctica reflexionarem sobre la impremta digital.
Com comencem? Compara els següents avisos sobre les cookies i reflexiona:
Et fixes en els avisos de cookies?
Ets conscient de les dades que «autoritzes» a manejar a la persona propietària del lloc web que visites?
Què fan amb eixes dades?
Com seguim? Mira aquest vídeo on s’explica el concepte d’imprenta digital i quatre raons per a protegir-la. En aquest enllaç, en la part de baix, hi ha 9 tutorials molt interessants sobre la gestió de nostra impremta digital.
Molts de vosaltres teniu la sessió iniciada en Google quan navegueu per Internet. En aquest enllaç s’explica com gestionar les dades i activitat que s’emmagatzema.
Llig aquest enllaç on s’explica quin tipus d’informació guarden els navegadors. També dona alguns consells per a gestionar-la.
I ara què? Fes un llistat de les diferents ocasions en les quals has donat informació i has incementat la teua imprenta digital, tant de forma explícita com de forma implícita. També indica com podríes evitar-lo. Aquest llistat l’has de lliurar a la corresponent tasca de l’aula virtual.
En aquesta pràctica anem a conèixer una sèrie de bones pràctiques per tal d’identificar les notícies falses a Internet.
Per on comencem? Fes una ullada a les següents imatges. Fes-te una llista d’indicis presents en les fotos que et fan pensar que es tracta de notícies falses.
Per on seguim? Llig la informació que apareix en aquest enllaç i en aquest, fixa’t bé en els consells que és convenient seguir per identificar les notícies falses.
Torna a revisar les fotos i completa el teu llistat d’indicis amb la nova informació que has pogut traure dels enllaços anteriors.
I ara què? Realitza una infografia o composició gràfica on pugues fer un decàleg dels consells per a identificar les notícies falses.
En aquesta pràctica anem a reflexionar sobre les dades que oferim a Internet.
Per on començem? Visualitza aquest vídeo. És molt curtet. Reflexiona sobre les següents preguntes:
Quines són les preguntes que t’has de fer a l’hora de donar les teues dades?
En quines ocasions t’has donat d’alta en algun servei sense parar compte en aquests aspectes?
Quin és el fi últim de tota aquesta ingenieria?
Per on seguim? Llig la informació que apareix en aquest enllaç. Reflexiona sobre les següents aspectes:
Les contrasenyes que fas servir compleixen amb els consells?
Revisa una mica el navegador, així com les xarxes socials que estas utilitzant, estàs d’acord amb la inforamció que guarden sobre tu? Pots canviar-lo?
Què és Llista Robinson? S’inscriuriria algun membre de la família? Per què?
I per últim? Visualitza aquest vídeo sobre dret a l’oblit i llig aquest article sobre esborra l’imprenta digital. Reflexiona sobre les dades teues que has pujat en algun moment i que ara t’agradaria esborrar definitivament. Són poques o moltes?
Prepara un document amb una taula de 3 columnes. En la primera fica l’aspecte que has de millorar; en la segona quin perill representa tindre aquest aspecte de la forma que ho tens; i en la tercera les accions concretes per a solventar l’aspecte mencionat. La informació la pujaràs a l’aula virtual quan estiga disponible
