Laura Bisbe Curs 15/16 Anexos Pàgina 1 -...
Transcript of Laura Bisbe Curs 15/16 Anexos Pàgina 1 -...
Laura Bisbe Curs 15/16 Pàgina 2 Anexos
4
ÍNDEX
1. PROGRAMES ...................................................................................................... 4
Illustrator ............................................................................................... 4
Photoshop ............................................................................................ 4
Affinity Designer Trial .............................................................................. 4
Coda ...................................................................................................... 4
2 LLENGUATGES DE PROGRAMACIÓ ................................................................. 4
HTML ..................................................................................................... 4
CSS: ....................................................................................................... 5
Javascrip ............................................................................................... 5
3.HISTÒRIA.............................................................................................................. 5
3.1 Guió història ......................................................................................... 5
5.DISSENY ............................................................................................................... 8
Personatge ............................................................................................ 8
Jardí ....................................................................................................... 9
Tanca ............................................................................................ 9
Pilota ................................................................................ 10
Corda ............................................................................... 10
Habitació ............................................................................................. 11
Terra ............................................................................................ 11
Finestra ............................................................................ 12
Cuadra ............................................................................. 12
Llit ..................................................................................... 13
Hospital ............................................................................................... 14
Hospital finestre ................................................................ 14
Laura Bisbe Curs 15/16 Pàgina 3 Anexos
Menú Joc ............................................................................................. 16
6. PROGRAMACIÓ ................................................................................................ 17
Animació ............................................................................................. 17
General ............................................................................ 17
Especific animació ............................................................ 17
Resultat programació ....................................................... 18
Laura Bisbe Curs 15/16 Pàgina 4 Anexos
1. PROGRAMES
Illustrator
Illustrator és un programa del grup adobe System, que porta
funcionan des de 1987, la seva funció es el dibuix vectorial i
el disseny d’elements gràfics. Es pot utilitzar per moltes coses
des de dibuix professional, gràfics per a mòvils,
dissenycinematografic, disseny gràfic… Jo l’he utilitat com a
suport per poder fer els gràfics per a mòvil de l’aplicació.
Fig.1 Imatge Illustrator
Photoshop
Photoshop és un programa del grup Adobe System, que
porta en el seu funcionament des de 1990, s’utilitza pel
tractament d’imatge i avui en dia es el programa més potent
en aquest camp. Jo l’he utilitat per acabar de fer els últims
retocs pel disseny gràfic. Bàsicament col·locar tots els
objectes en una pantalla.
Affinity Designer Trial
És un altre programa de disseny vectorial, va sortir aquest
any, fa les mateixes funcions que l’Adobe Illustrator, però
d'una forma més directe, es creu que acabara substituir
Illustrator, pels diferents nivells que presente dins ell mateix
de principian a professional. Jo l’he utilitat per crear la major
part dels gràfics de l’aplicació.
Coda
Coda és un lector de codis de programació utilitat per
programació web generalment, ens permet veure el disseny
a mida que el vas modificant avantatge que no es troba a
tot arreu, també llegeix qualsevol tipus de codi i es capaç
de relacionar-los sense problema. L’he utilitzat per
programa l’aplicació
2 LLENGUATGES DE PROGRAMACIÓ
HTML:
HTML, o més ben dit HyperText Markup Language es
probablement el llenguatge de programació web més
utilitzat. Consta de un grup d’etiquetes que el navegador
interpreta donen uns resultats increïbles, domina'n-lo pots
aprofitar-lo per la programació de moltes altres coses com
Fig.5 Exemple codi html serien les aplicacions. La seva
funció principal és donar estructura, és a dir col·locar els
objectes en la pantalla.
Fig.1 Imatge Illustrator
Fig.2 Imatge Photoshop
Fig.3 Imatge Affinity Designer
Fig.4 Imatge Coda
Fig.5 Exemple codi html
Laura Bisbe Curs 15/16 Pàgina 5 Anexos
CSS:
O més ben dit CascadingStyle Sheets, va directament
enllaçat a l’HTML, serveix per a la presentació per donar
estil els documents HTML. Per exemple si tu tens un text
a dalt de tot que posa “Títol”, gràcies el css puc canviar-li
la font, el color, subratllar-lo, mural… Maquilla la serietat
del HTML.
Javascrip:
Javascript, serveix per donar animació, s’encarrega del que
es l’acció en si. Torna'n a l’exemple d’abans faria que quan
apretassis sobre de títol aparegués un paràgraf a sota.
Dona tota l’animació .
3.HISTÒRIA
Fig.6 Exemple css
Fig.7 Exemple javascript
Al començament del joc els nens visualitzaran una història on la Mireia els hi explicaré com li van
diagnosticar la diabetis i que és exactament aquesta malaltia que tenen. Hi intervindran 3
personatges. La Mireia, la seva mare i el doctor de l'hospital.
Durant la historia es sentiran les veus en off, però també estarà escrita, passaran de pantalla en
pantalla per una fletxa.
Guió història
(ens trobem a l'habitació de la Mireia)
Mireia: Hola! Em dic Mireia i tinc 8 anys. Fa tres anys que tinc una malaltia anomenada "diabetis".
Avui us explicaré què és la diabetis i com me la van detectar.
(apareixen les lletres "Fa tres anys")
(habitació)
Mare: Mireia, m'estàs començant a preocupar: últimament tens molta set, molta gana i estàs
extremadament cansada.
Mireia: No serà res, mama. Mare: Per si de cas anirem a l'hospita. Així em quedaré més tranquil·la.
(Hospital)
Doctor: Podria ser diabetis Tipus 1. Per assegurar-nos, farem una analítica i mirarem el sucre.
Laura Bisbe Curs 15/16 Pàgina 6 Anexos
Mireia: Mare, què em faran? Què és una analítica?
Mare: Una analítica és quan et treuen sang per mirar la quantitat de certes substàncies en el teu
cos.
(seguim a l'hospital)
Mare: Mira, el metge ja torna. Com ha anat? Què ha sortit? Doctor: Lamento comunicar-vos que els nivells de sucre de la Mireia són de 489.
(hospital)
Mare: Què significa? És diabètica!
doctor: No traiem conclusions precipitades. De moment es quedarà en observació però el més
probable és que pateixi diabetis ja que presenta tots els símptomes d'una hiperglucèmia.
(Text)
Veu Mireia: Bé, nois, us faré una petita explicació de què és aquesta paraula tan rara. La
hiperglucèmia és el moment en què el nostre nivell de glucosa (sucre) és superior a 160. I els
símptomes són:
- cansament,
-set,
-necessitat d'orinar.
I ara un cop feta aquesta parada, seguim amb la història.
(habitació hospital)
Mare: Doctor, però què és exactament la diabetis?
Doctor: Us ho explicaré perquè les dues o entengueu:
(imatges que acompanyen el text)
El nostre cos està format per cèl·lules que serien les cases del carrer. I la insulina és la clau per
entrar a casa. Però la fàbrica de claus, que seria el pàncrees, ha tancat i el sucre no pot entrar a
casa i col·lapsa el carrer (els vasos sanguinis). Nosaltres el que hem de fer és entrar les claus des
de fora.
Habitació
Mireia: Finalment em van diagnosticar diabetis. Oficialment la meva fàbrica s'ha posat de
vacances permanents. Ara us toca apendre què fer en cada situació del dia a dia. Creieu que
podreu? Jo sí, i estaré amb vosaltres durant tot el viatge.
Els audios de l’història es troben en el pendrive.
Laura Bisbe Curs 15/16 Pàgina 7 Anexos
4. GUIÓ MULTIMEDIA
El guió multimedia està adjuntat directament del que vaig utilizar, està fet a mà i les pàgines son escanejades
de la plantilla que hem van facilitar. El guió era per mi, per tenir un ordre a l’hora de programar.
Laura Bisbe Curs 15/16 Pàgina 10 Anexos
Pilota
Corda Fig.10 Procés creació pilota jardí
Fig.11 Procés creació corda jardí
Laura Bisbe Curs 15/16 Pàgina 12 Anexos
Finestra
Cuadra
Fig.13 Procés creació
finestra habitació
Fig.14 Procés creació cuadra
habitació
Laura Bisbe Curs 15/16 Pàgina 14 Anexos
Hospital
Hospital finestre
Aqui igual que en el cas del llit no es poden veure la totalitat dels pasos, això es perquè quan hem
vania una idea la feia sempre que tingues un ordinador a ma, en aquets casos l’ordinador no era
meu i em vaig haber d’enviar les imatges en format photoshop quedan ja com a imatges
compactes i no vaiensa el proses de la forma de l’Affiniti Designer.
Fig.16 Procés creació finestre hospital
Creem una habitació d’hospital
Laura Bisbe Curs 15/16 Pàgina 17 Anexos
6. PROGRAMACIÓ
Animació
General
Especific animació
Fig.22
Animació
CSS
Fig.23 Animació
CSS
Fig.24
Animació
Javascrip
Fig.19 Html
Fig.21 Javascrip Fig.20 CSS