Laura Bisbe Curs 15/16 Anexos Pàgina 1 -...

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


Menú Joc ............................................................................................. 16

6. PROGRAMACIÓ ................................................................................................ 17

Animació ............................................................................................. 17

General ............................................................................ 17

Especific animació ............................................................ 17

Resultat programació ....................................................... 18


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


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.


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.


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.


5.DISSENY

Personatge:

Fig.8 Procés creació

Mireia


Jardí

Tanca

Fig.9 Procés creació tanca

jardí


Pilota

Corda Fig.10 Procés creació pilota jardí

Fig.11 Procés creació corda jardí


Habitació

Terra

Fig.12 Procés creació terra habitació


Finestra

Cuadra

Fig.13 Procés creació

finestra habitació

Fig.14 Procés creació cuadra

habitació


Llit

Fig.15 Procés

creació llit habitaicó


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


Fig.17 Procés

creació hospital


Menú Joc

Fig.18 Procés

creació Menú Joc


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


Resultat programació

Cas 1

Cas 2

Cas 3

Laura Bisbe

Curs 15/16 Anexos Pàgina 19

Laura Bisbe Curs 15/16 Anexos Pàgina 1 -...

Documents

Transcript of Laura Bisbe Curs 15/16 Anexos Pàgina 1 -...