- El primer treball que hem fet aquest quatrimestre ha sigut la creació d'una web, aquesta web habia d'estar formada per:
- Com a mímim tres seccions principals, amb un titol cada secció
- Insereix al menys 3 imatges
- Insereix, com a mínim, dues llistes: una de números i una altre amb puntets
- En alguna secció hi ha d'haver, com a mínim dos paràgrafs
- Utilitzar diferents tidus de lletra, color, diverents variacions de negreta, subrallada, cursiba... text central, a la dreta i a l'esquerra
- Insereix uun enllaç com a mínim
- Insereix un vídeo
La meva web ( Web de Carla) ha sortit gràcies a la plantilla de la meva profesora ( Profesora de robòtica Laura Rey)
La meva pàgina web té de tema els esprts "Todos los deportes del mundo" que consta principalment de dos apratats, el primer es trata dels eports aquatics, i el segun tracta dels eports terrestres.
La part més extensa de la web es tracta de:
- El nom de l'esport enllaçat a la seva descripció de Wikipedia
- Una descripció corta de cada esport
- Un enllaç a els personatjes més importants de cada esport
Al final de cada apartat podem observar tres imatges dels esports més mportants i coneguts i un video en forma d'explicació dels esperts aquàtics i terrestres en concordància.
L'estructura de la web:
- El segon treball que hem fet aquest quatrimestre ha sigut la creació d'un mapper (poster), aquest mapper habia d'estar formada per:
- Com a mínim 10 parts diferenciedes per a seleccionar
- Que cada secció, al posar el ratolí sobre, surti una etiqueta amb el nom
- Que cada part (selecció), tingui algún color diferent - com a mínim 3 colors diferents -
- Enllaçar cada secció a alguna web
El meu mapper té de tema Les Kardashian, que consta d'un titol i d'una fotografia amb totes les seves parts diferenciades (23 seccions), per a les 13 persones que son a la foto.
- Les aplicacions GIMP i JavaScript m'han ajudat a fer aquest mapper
Els passos que he fet servir per crear aquest mapper:
- Buscar una imatge que t'agradi i tingui diferents items per poder seleccionar
- Descarregar la imatge i guardar-la a l'ordinador
- Obre el programa GIMP i obre la imatge que has descargat
- Dintre de GIMP i amb la imatge oberta ves a FILTRES > WEB > MAPA D'IMATGE, i s'obrirà una subpantalla, que serà on treballem
- En la subpantalla imatge map, a dalt a l'esquerra hi ha uns botons per definit regions (quadrat, circular o poligonal). Depenent el dibuix que volem seleccionar agafem una de les tres opcions.
- Definim 10 regions com a mínim a la nostra imatge - Un cop definida una secció hem de determinar el nom d'aquesta regió i al lloc web que conduirà (que serà on anirem a parar quan cliquem sobre aquella regió) -
- Guardem aquest arxiu i obrim el VISUAL ESTUDIO CODE
- Del codi que ens surtirà haurem de modificar el codi, i canviar tots els target per title. Aixó ho fem clicant EDIT > REPLACE i canviat-ho
- Afegim manualment class=<< mapper >> dins de la instrucció de la imatge. També canviem manualment el color de cada àrea.JA TENIM EL CODI!! ARA HO HEM DE PUJAR AL NEOCITES.
- Anem al classroom i copim el codi que hi ha, aquest el peguem dins d'una carpeta nova dins d'una arxiu, i l'anomenem mapper.js.
- Pujem a la carpeta l'imatgeque hem estat untilitzant des d'un princpi.
- Creem un altre arxiu amb el nom de index.html i introduim el codi que hem obtingut del VISUAL ESTUDIO CODE i al head d'aquest index adjuntem el mapper.js
Estructura de l'index.html del mapper:
.png)
- El tercer treball que hem fet aques quatrimestre ha sigut
la creació d'un crazy emoji
, aquest emoji reacciona segons l'intensitat (volum) que captarà el microfon.
El meu treball te de tema un os que s'enprenya amb el soroll
- Les aplicacions JavaScript i l'editor p5js. m'han ajudat a fer aquest crazy emoji
Els passos que he fet servir per crear aquest emoji:
- Primer de tot obrim l'editor p5js. i creem una forma base (arc, elipse, circle, line, point, quad, rect, square, triangle). A partir d'aquesta forma anem incorporant-ne més per a formar una cara
- Un cop feta la nostra cara, introduim variants i set ups (conectem el microfon), i amb aquestes variavles modifiquem la posició de les formes de la cara i el color d'aquests.
- Anem al nostre compte de neocites i creem una nova carpeta anomenada crazy.emoji i dins hi creem una arxiu anomenat p5.js , on ficarem tot el codi que hem estat crean a l'editor p5js.
- A la mateixa carpeta creem un arxiu anomenat index.html on adjuntarem el p5.js i a més li posarem title, body...
Estructura de l'index.html del crazy emoji:
.png)
- El quart treball que hem fet aquest quatrimestre ha sigut la creació d'un robot digitalment, aquest robot habia d'estar format per:
- moviment random per el microfon
- color random per el microfon
- senos i cosenos
- canvi de color al clicar una tecla
- Les aplicacions GIMP i p5.js m'han ajudat a fer aquest robot
Els passos que he fet servir per crear aquest robot:
- Primer de tot busquem a internet una imatge d'un robor que ens agradi.
- Un cop escollida i descargada l'obrim a el GIMP i ens anem a FILTRES > WEB > MAPA D'IMATGE, i s'obrirà una subpantalla, que serà on treballem.
- Ja fet això agafem l'eina d'espais poligonals i anem reseguint el robot, el guardem i descarguem al acabar.
- Obrim el codi i insertem - vertex(#,#); - cada dues cordenades.
- Ara obrim el p5.js i insertem el codi que hem fet al GIMP
- Amb el p5.js determinem el color del robot, el del fons...
- Ara anyadim variables de microfon, senos i cosenos i de canvi per la pressió a una tecla
- Copiem tot aquest codi i creem una nova carpeta anomenada robot i dins un arrxiu anomenat sketch.js , a quest arxiu fiquem el codi copiat.
- A més creem un altre arxiu anomenat index.html on adjuntarem el sketch.js i a més li posarem title, body...
Estructura de l'index.html del robot:
.png)
