Float

Per a la posició dels elements de la pàgina HTML, és necessari fer servir els "Floats". Ara veurem les diferentes opcions d'aquesta eina:

LEFT: traduït al català, esquerra. Serveix perquè l'element seleccionat es traslladi a l'esquerre.

RIGHT: traduït al català, dreta. Serveix perquè l'element seleccionat es mogui a la dreta.

NONE: és a dir, que no volem que es mogui

Div

El div és un codi que fem servir per aplicar-li un estil a la part que nosaltres desitjem. Per crear un div hem d'anar a la fulla d'estils, i dir "Nuevo estilo", i hi possem les dades que nosaltres veiem adients.

Exemple:
En aquest cas crearem un div ID, ja que només l'aplicarem a una part del document.

Aleshores, al obrir la pàgina CSS, hi podrem apreciar el següent:

Els divs són molt útils, ja que amb ells la organització i el disseny del document és molt més sencilla i bàsica.

Maquetació Filemón

Per fer una maquwtació similar a la del PDF hem d'agafar el mateix PDF i insertar-lo a InDesign per tenir-lo com a plantilla. Acte seguit, bloquejem la capa perquè no ens molesti i pugui ser-nos molt útil.

Aleshores, tenint el document imprés, amb el tipómetre, medim les tipografíes i els marges per aconseguir fer el document tal i com ens l'han demanat.

Crear botó per a formulari desde InDesign CS6

1- Creem un rectangle i hi col·loquem dins seu el text

2- Anem a botones y formularios

A "Tipo" li diem que sigui un Botó

A "Apariencia" li donem el color que volem que tingui en els següents estats del botó: 

"Normal", "Al pasar sobre él" i "Clic"

3- Si volem donar-li alguna funció al botó anem a "Acciones" i cliquem a  "+" i li asignem la funció que desitjem

Formulari

1- Agafem l'imatge que vulguem aplicar-hi el formulari

2- Aclarem l'imatge amb Photoshop ("Imagen", "Ajustes", "Brillo contraste")

  (anem tocant fins que es vegi clar perquè Adobe PDF pugui identificar les paraules)

3- Retallem l'imatge fins que no surti cap zona que no sigui blanca (com la taula)

4- L'obrim amb l'Acrobat

5- Anem a "Formularios" i cliquem a "Iniciar Asistente de formularios"

Al obrir-lo ens sortiran aquestes opcions: 

Esperem una estona a que es faci el procés i al obrir-lo haurá identificat les zones que considera com a part óptima per a escriure

6- Com no és un programa 100% exacte, haurem de marcar els llocs que no hagi marcat nosaltres manualment. Per fer-ho anem a "Agregar nuevo campo", a la part superior esquerra.

Segons el que volguem fer seleccionem el que creiem convenient.

En aquest cas seleccionarem "Campo de texto".

7- Per fer-ho és molt fàcil: sencillament seleccionem la grandària de la caixa de text i la posem on vulguem

Li posem el nom de l'element al que faci referéncia (en aquest cas, Interiores)

8- Si la zona que vulguem marcar és un lloc on s'ha de possar un "tic", hem d'anar a "Agregar nuevo campo" i seleccionem "Casilla de verificación"

Anem a la part que vulguem aplicar-hi la casilla de verificació i la posem

9- Si el camp de text que hàgim de possar té més d'una línea, fem doble clic i se'ns obrirà un cuadre d'opcions

Anem a opciones

Marquem la casella de "Multilínea"

Amb paciéncia (molta paciéncia...), anem fent el que s'ha indicat als pasos anteriors i anem col·locant-hi els camps fins haber-ne possat tots...

Hype

Hype és un programa d'animació vectorial que recorda molt a Flash. Ara explicaré com fer una animació, amb diferentes escenes.

1. Obrim el programa

2. Creem una forma (pulsem a botó i li treiem el text)

3. Si volem canviar-li el tamany a la forma que hem fet, anem a la paleta d'eines que tenim a la dreta ("Inspector") i li donem a medidas. Allà li podem canviar l'amplada, l'alçada i la posició.

4. Per fer que la forma sigui un cercle anem a "Elemento", de la mateixa paleta d'eines "Inspector". On posa "Radio" li posem la meitat del tamany de la nostra forma (en aquest cas, 100 px).

5. Per canviar-li el color anem a "Elemento" i posem el color desitjat

6. Per posar-li sombra, a "Elemento", on posa "Sombra", podem apreciar una forma circular, pulsem a la part on vulguem la sombra i anem jugant amb les altres opcions per trobar la sombra desitjada.

7. Per fer que aquesta forma es mogui, hem d'anar a la part inferior, "Control principal temporal" i seleccionem el temps que volem que duri l'animació. Acte seguit, pulsem al botó vermell que surt a la part dreta de "Control temporal principal". Ara movem la forma fins al lloc on volem que es mogui

(acte seguit veiem la seqüéncia...)

8. Si volem fer que el moviment no sigui recte, sinó que tingui alguna curva o algún altre tipus d'acció, hem de pulsar a la línia de moviment que hem creat i ho movem fins on volguem que vagi.

9. Per fer un text hem d'anar a "Elementos" a la part superior esquerra i pulsem "Texto"

10. Per canviar-li el tamany o tipografia, anem a la paleta "Inspector" i seleccionem "Texto"

11. Per fer que es mogui el text, hem de fer el mateix procediment que amb la pilota: seleccionem la caixa de text, anem a la part inferior, "Control principal temporal" i seleccionem el temps que volem que duri l'animació. Acte seguit, pulsem al botó vermell que surt a la part dreta de "Control temporal principal". Ara movem la caixa de text fins al lloc on volem que es mogui