Elements bàsics HTML

per

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:

  1. 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.
  2. 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.

Treballe a l’IES JB Porcar.

Enguany done classe als següents grups:

  • 1ESO
  • 2ESO
  • 3ESO
  • 4ESO
  • 2BAT

M’agrada:

  1. Llegir
  2. Practicar esport

AppInventor. Disseny i implementació d’un joc

per

En aquesta pràctica ficaràs en pràctica tot aprés fins ara dissenyant i implementant joc propi.

Com comencem? Has de pensar en el funcionament del joc, quin serà l’objectiu, com es jugarà( si haurà puntuació, vides, etc.) i com finalitzarà.

Com seguim? Una vegada has pensat el joc, has de fer els passos per a convertir la teua idea en la realitat.

  1. Amb una eina de disseny ràpid
    1. Realitza un arbre de decisió de les pantalles (a l’estil dels arbres de decisió que has vist en les pràctiques anteriors).
    2. Disenya l’esbós de les pantalles.
  2. Busca i baixa els recursos necessaris per al teu joc (imatges, música, etc).
  3. En AppInventor
    1. Realitza el disseny gràfic del joc (recorda omplir el camp About indicant l’autoria del joc, així com canvia l’etiqueta del nom de les diferents pantalles)
    2. Implementa la funcionalitat del joc.
    3. Exporta el joc en .apk i prova’l en el teu dispositiu.

I ara què? En aquesta pràctica has de fer dos tipus de lliurament:

  1. Has de lliurar en la tasca de l’aula virtal els següents recursos: la imatge de l’arbre de decisió, les imatges dels esbossos de les pantalles, el projecte d’AppInventor (.aia, descarrega’l desde menú Project–>Export selected project (aia) to my computer), així com el vídeo de com executes el joc en el teu mòbil.
  2. Has de reflexionar sobre els següents preguntes:
    • Què has fet especialment bé en aquesta pràctica?
    • Quins són els prinipals problemes que has tingut i com els has solventat?
    • Què es podria millorar?

Logo. Variables

per

En aquesta pràctica aprendràs a treballar amb les variables en Logo.

Com comencem? En un llenguatge de programació, una variable és un espai de memòria on es pot emmagatzemar un valor. El programar pot crear i esborrar una variable (la utilització d’eixe espai en memòria), així com consultar i actualitzar el valor que s’emmagatzema en eixe espai de memòria.

En la següent llista d’imatges es pot veure una representació simplificada de la memòria i la interacció bàsica de les variables entre el programa i la memòria.

En la imatge es pot observar que en el programa s’han declarat dues variables (edat i nom).

Cada variable realment apunta a una adreça de memòria.

Quan en el programa, s’assigna un valor a la variable, aquest valor es grava en la corresponent posició de memòria.

Quan s’utilitza la variable, es consulta el seu valor.

En este cas, per pantalla eixiria el valor que emmagatzema la posició de memòria apuntada per nom, és a dir Sanja.

Quan es fan operacions sobre les variables, al final del procés s’actualitza la posició de la memòria amb el nou valor

En aquest vídeo pots veure una explicació sobre tipus de variable i la seua utilitat aplicada en la programació d’un joc.

Com seguim? Accedeix a la lliçó guiada de Logo i realitza les activitats.

I ara què?

Defineix aquestes dues variables. Després realitza les figures emprant les variables en lloc de nombres

variable costat ha de tindre el valor 100
varibale costatXicotet ha de tindre com a valor la meitat del costat 
(Solució --> hacer "costatXicotet :costat/2 )

Aspectes que has de tindre en compte:

  1. Has de donar tota la seqüència d’ordres per a fer la figura completa.
  2. L’espai entre cada figura és de 20 unitats
  3. Recorda utilitzar les ordres de puja llapis i baixar llapis.
  4. Recorda emprar bucles per a fer el quadrat i el rectanlge
  5. Pots dibuixar cada figura d’un color diferent

A contiunuació tens la seqüència de com pots fer les ordres per a fer la composició demanada.

Scratch. Moviment

per

En aquesta pràctica aprendràs les opcions bàsiques de moviment que ofereix Scratch.

Com comencem? En la programació de qualsevol joc és molt important conéixer com funciona l’escenari i els personatges. Això només és possible si es comprenen els conceptes matemàtics associats.

En qualsevol joc 2D l’escenari és un planol cartesià.

Ací es pot l’escenari de Scratch. L’alçada completa de la pantalla és 360 punts, mentres que l’amplària és 480 punts.

En el moment que es fica un personatge a l’escenari, és necessari ficar les coordenades del planol per a situar-lo.

Fixa’t en la imatge. En cada cas el gat s’ha posicionat en un lloc diferent del planol i per tant té unes coordenades diferents.

Moltes vegades necessitarem accedir a aquesta informació durant la programació del joc.

Fes li una ullada a aquest vídeo on es repassen aquest conceptes de matemàtiques.

Com seguim? Visualitza aquest vídeo i realitza la tasca plantejada (moure al gat d’esquerra a dreta, amb les fletxes del teclat).

Millora la pràctica amb les següents indicacions. Ací tens un vídeo de com quedaria el comportament del gat.

  1. Fica un fons de l’escenari.
  2. A l’inici del joc, fica al gat al racó inferior esquerre.
  3. Inclou la instrucció que permeta canviar de disfresa, de forma que done sensació de moviment en les dues direccions.
  4. Intenta aconseguir que el gat salte i torne al lloc quan es prem la tecla de l’espai. Fixa’t que has de tindre en compte la posició del gat (posicioY i posicioX), canviar només la posició vertical i després tornar a la posició inicial (desfent el canvi en la posició vertical). A continuació tens totes les ordres que necessites.

I ara què? Has de baixar el teu joc, reanomenar-lo com movimentBasic_elteuNom.sb3 i pujar-lo a la tasca de l’aula virtual.

Scratch. Hola món

per

En aquesta pràctica faràs el primer programa emprant Scratch

Com comencem? Scratch ens permeten fer aplicacions senzilles utilitzant programació visual, blocs.

Com seguim? Mira aquest vídeo que explica la interfície de Scratch.

Accedeiex a la pàgina de Scratch i després clica damunt del botó de Crear.

S’obrirà la interfície de la qual parla el vídeo.

Per a canviar l’idioma emprat s’ha d’obrir el menú de la bola i elegir una opció.

Per a guardar el programa s’ha de fer servir l’opció Fitxer–> Desa en l’ordinador

I ara què? Realitza aquest xicotet programa. En el missatge has de ficar el teu nom. Per a provar-lo has de clicar damunt de la bandereta verda. Descarrega-te’l i puja’l a la corresponent tasca d’AULES.

Executa el programa 3 o 4 vegades. Què fa l’ordre “go to random position“?

Primera pàgina web

per

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:

  1. Què és la web?
  2. Quin nom rep la màquina on s’emmagatzema una pàgina web?
  3. Quin nom rep el dispositiu on es visualitza una pàgina web?
  4. Quin programa fa falta per a visualitzar una pàgina web?
  5. 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…..

Programació. Donar instruccions

per

En aquesta pràctica farem una primera aproximació al món de la programació.

Com comenecem? Accedeix a aquest enllaç i gaudeix amb el Google Doodle dedicat a programació que es va publicar 4 de desembre de 2017. Contesta les següents preguntes al fòrum de l’aula virtual.

  1. Què és el que rememorava el Doodle eixe dia?
  2. Quants tipus diferents d’instrucció has trobat?

Com seguim? Visualitza aquest video on s’explica el concepte d’algorisme. A més, visualitza aquest on es mostra la importància de donar instruccions clares.

I ara què? Escriu les instruccions de com fer un suc de taronja en la tasca de l’aula virtual. Anomena quins seran els paràmetres d’entrada (què necessites), les instruccions clares i concretes (imagina que li estàs donant ordres a un robot) i quin serà el paràmetre d’eixida (el resultat).

Seguretat perimetral

per

En aquesta pràctica farem una ullada a seguretat perimetral.

Per on comencem? Quan es fa la pregunta sobre la seguretat d’un sistema informàtic, la gran majoria pensa en programes d’antivirus. Llig aquesta pàgina i recorda les diferents amenaces que existeixen i aquesta on s’expliquen els aspectes més importants al voltant dels virus informàtics. Reflexiona sobre quantes mesures de protecció apliques?

Per on seguim? Una de les mesures que parla l’enllaç anterior és la configuració del firewall (tallafocs). En realitat saps què és i quina potència de protecció té? Mira aquest vídeo i descobreix la seua utilitat. Reflexiona i contesta, raonant la resposta, en el fòrum del curs d’aules:

  1. Sempre és aconsellable tindre DMZ?
  2. Quan un tallafocs no és útil?
  3. Anomena els avantatges i desavantantges de fer servir un proxy. Quan és útil?

I ara què? Realitza una taula comparativa on pugues reflectir quines amenaces pot tindre el teu portàtil o tauleta a nivell de dispositiu, a nivell de xarxa de casa o a nivell de xarxa de la uni. A més indica per a cada ocasió quins són els mecanismes de seguretat que es poden implementar. Lliura el document, en PDF, a la corresponent tasca de l’aula virtual.

Identitat digital en Internet

per

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.

  1. Obrir el document en un programa visor de PDF que tinga habilitada l’opció de verificació de signatures
  2. Obrir l’enllaç de verificació del document en el navegador.

I ara què?

  1. 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
  2. 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.

"edutictac.es

Canviar la contrasenya