pregunta sobre como convalidar

Hola, como convalido los URL de los enlances en la web del W3C ? Un saludo da Mariano .Ciao Alex .

Manquen cartells

Encara no s'han entregat tots els cartells. Ja he començat a fer els feedbacks.

Cartell Ludovic

Anidament de símbols

Anidar vól dir ficar. Anidar símbols vól dir ficar uns a dintre dels altres.
MÈTODE A _ Des de lo global fins a lo local.

1. Crear un nou símbol. Diguem-li GLOBAL.
2. A dins del símbol GLOBAL, editant(o sigui ficant-nos a dins de GLOBAL), crear un altre símbol, diguem-li LOCAL. (o sigui que dintre de GLOBAL fabriqueu el LOCAL).

[NOTA: Aquest mètode seria l'equivalent a crear una carpeta A i dintre de la carpeta A crear una altra carpeta B]

MÈTODE B _ Des de lo local fins a lo global _ embolcallant

1. Crear un nou símbol.
2. [Opcional] Dibuixar i/o afegir altres símbols.
3. Ho sel·leccionem tot i ho convertim en símbol.

[NOTA: A Windows no tenim equivalent. Seria com crear una carpeta i embolcallar-la amb una altra].
MÈTODE C _ Crear per separat i ficar un a dintre de l'altre.

1. Crear dos símbols per separat.
2. Extreure(cortar) un dels dos símbols i enganxar(pegar) a l'interior de l'altre.

[NOTA: A Windows seria com crear dos carpetes per separat i després ficar arrossegant la carpeta B dins de la A].

UTILITAT DE L'ANIDAMENT DE SÍMBOLS

• Empaquetar símbols junts de tal manera que quedin lligats i que poguem otorgar-li un moviment al paquet sencer(com per exemple traslacions d'un cotxe).
• Anidar instàncies per programar amb Action Script.
• Composar moviments.

Anidament de símbols

Els símbols tenen la seva pròpia línia de temps. Gràcies a això podem composar moviments. Fins i tot d'aquesta manera és possible combinar interpol·lació de forma i de moviment cosa que abans no podiem.

Però per a això cal que domineu l'anidament de símbols uns a dintre dels altres. Amb els diferents exemples que veieu aquests dies amb els exercicis de composició de moviment esteu començant a entendre a on animar les coses. Recordeu que anidar és sinònim de ficar(= en castellano meter). Veieu l'article que explica com anidar per tant.

Per composar moviment cal anidar símbols uns a dintre dels altres. D'aquesta manera estem ficant línies de temps unes a dintre de les altres.

Anidament de símbols

Anidar vól dir ficar. Anidar símbols vól dir ficar uns a dintre dels altres.
MÈTODE A _ Des de lo global fins a lo local.

1. Crear un nou símbol. Diguem-li GLOBAL.
2. A dins del símbol GLOBAL, editant(o sigui ficant-nos a dins de GLOBAL), crear un altre símbol, diguem-li LOCAL. (o sigui que dintre de GLOBAL fabriqueu el LOCAL).

[NOTA: Aquest mètode seria l'equivalent a crear una carpeta A i dintre de la carpeta A crear una altra carpeta B]

MÈTODE B _ Des de lo local fins a lo global _ embolcallant

1. Crear un nou símbol.
2. [Opcional] Dibuixar i/o afegir altres símbols.
3. Ho sel·leccionem tot i ho convertim en símbol.

[NOTA: A Windows no tenim equivalent. Seria com crear una carpeta i embolcallar-la amb una altra].
MÈTODE C _ Crear per separat i ficar un a dintre de l'altre.

1. Crear dos símbols per separat.
2. Extreure(cortar) un dels dos símbols i enganxar(pegar) a l'interior de l'altre.

[NOTA: A Windows seria com crear dos carpetes per separat i després ficar arrossegant la carpeta B dins de la A].

UTILITAT DE L'ANIDAMENT DE SÍMBOLS

• Empaquetar símbols junts de tal manera que quedin lligats i que poguem otorgar-li un moviment al paquet sencer(com per exemple traslacions d'un cotxe).
• Anidar instàncies per programar amb Action Script.
• Composar moviments.

Editar Símbols

Podem accedir a la línia de temps de cada símbol i editar-lo per dins i us en indico 5 formes possibles per accedir-hi a l'interior:

• Doble click sobre el símbol a l'àrea de treball(que podria ser l'escenari si estigués allà mateix).
• Botó dret sobre el símbol a l'àrea de treball > Edició a l'àrea de treball.
• Botó dret > sobre el símbol a l'àrea de treball Edició en context a l'àrea de treball.
• Botó dret sobre el símbol a la biblioteca > Edició a la biblioteca.
• Doble click sobre el símbol a la biblioteca.

Per què cal accedir-hi a l'interior dels símbols per editar-lo?
Doncs per que, entre d'altres coses, els símbols estàn agrupats i no ens permeten deformar-los.

Observacions i consideracions:

Si estem a dins de la línia de temps d'un símbol i volem tornar a l'escenari o a un símbol més global cliquem a on posa el nom de l'escena o al símbol que englobava a aquest. En el cas de l'exemple si volguèssim sortir del clip "quadres" cap al clip "CAP DE PLOMA" hauria de clickar a "CAP DE PLOMA".

Creació de símbols

MÈTODE A (A partir d'un objecte dibuixat)

1. Dibuixem l'objecte i el sel·leccionem.
2. INSERTAR > CONVERTIR EN SÍMBOLO.
3. Escollim el tipus de símbol i el nomeneu.
4. Col·loquem l'objecte respecte de la creu en cas que volguem que pivoti respecte a on està la creu.
5. Si s'ha d'animar la línia del símbol l'editem i l'animem per dins.

MÈTODE B (Des de zero)

1. INSERTAR > Nuevo Símbolo
2. Escollim el tipus de símbol
3. Dibuixem per dins del símbol
4. Col·loquem l'objecte respecte de la creu per que faci de pivot més tard.

Interpol·lació de forma

Per fer interpol·lacions de forma es pot fer, de forma similar al que passava amb les interpol·lacions de moviment, mitjançant dos mètodes.

---

MÈTODE A:

1. Dibuixar un objecte a un fotograma.
2. Sel·leccionar el fotograma clau on està el dibuix
3. Anar a la finestra Propietats, desplegar la persiana Animar i escollir la opció "forma".
   
4. Més a la dreta insertar un fotograma clau.

---

MÈTODE B:

1. Dibuixar un objecte a un fotograma clau.
2. Insertar un fotograma clau més a la dreta.
3. Sel·leccionar tots els fotogrames des del primer fotograma clau fins el darrer.
4. Anar a la finestra propietats, desplegar la persiana Animar i escollir la opció "forma".

---

Què es pot fer amb interpol·lacions de forma:

1. Canviar de forma
2. Canviar de posició
3. Redimensionar
4. Girar
5. Canviar de color
6. Animar degradats

---

Què no es pot fer amb interpol·lacions de forma:

1. No es pot agrupar el farcit. Quan es fa això es trenca la interpol·lació de forma i no funciona correctament.
   

   

Màscares

Les màscares en Flash serveixen per deixar veure a través d'elles. Fan la funció de "forats".



Quan hi ha màscares al Flash han d'haver-hi també coses enmascarades, és a dir: coses que es vegin a través d'elles. Dit d'una altra manera, hi haurà capes màscares i capes enmascarades.




Per fer una màscara:

1. Es dibuixa a una capa un farcit amb la forma del forat desitjat. Aquesta forma serà la que farà de màscara. Li posarem com a nom "MASQUI"
2. Creem una capa buida i la posem a sota d'aquesta capa. L'anomenarem "enmascarada".
3. La capa de la màscara, "MASQUI" la convertirem en màscara fent: botó dret i a continuació sel·leccionant la opció "màscara".
4. [Observar que la capa "enmascarada s'ha subordinat a la capa MASQUI i les dues s'han bloquejat amb candaus."]

[ADVERTÈNCIES]

• Les màscares s'han de fer de "farcits". Si hi ha traçats a les capes màscara no s'enmascararà res.
• Les màscares, a diferència de les guies, sí es poden agrupar. Fins i tot es poden animar.

GUIES DE MOVIMENT: INTERPOL·LACIÓ DE MOVIMENT SEGUINT UNA TRAJECTÒRIA DEFINIDA

1. A una capa dibuixar un objecte.
2. Afegir una capa guia i dibuixar un traçat en aquesta capa
3. A la capa de l'objecte "Crear interpol·lació de moviment", crear fotogrames clau i col·locar l'objecte allà on volguem per a cada fotograma clau.
4. Si voleu que l'objecte s'orienti segons traçat sel·leccioneu els fotogrames clau i a PROPIETATS sel·leccioneu la casella ORIENTAR SEGONS TRAÇAT

[ADVERTÈNCIES]

• A la capa guia que només hi hagi traçat. Que no hi hagi cap farcit.
• No agrupeu el traçat a la capa guia.
• No feu cap interpol·lació de moviment a la capa guia(que no deixa de ser una forma d'agrupar).

Exemple:

Canvis que es poden fer amb interpol·lació de moviment

Haviem dit el que no podiem fer en l'article anterior. Ara diguem el podem fer.

CANVIS QUE ES PODEN FER A INTERPOL·LACIONS DE MOVIMENT. (Recordeu que heu d'estar a fotogrames clau per a poder efectuar aquests tipus de canvis)

Tocant l'objecte [Modificant paràmetres de la finestra propietats]

1. Canvis de posició
2. Redimensions [Eina transformació lliure]
3. Canvis d'orientació [Eina transformació lliure]
4. Canvis d'opacitat(alpha)
5. Canvis de brillantor.
6. Canvi de "tint"

Tocant el fotograma [Modificant paràmetres de la finestra propietats]

1. Acceleracions
2. Rotacions
3. Orientar segons traçat[Sempre i quan hagueu fet una capa guia amb un traçat que fes de trajectòria]

ADVERTÈNCIES SOBRE INTERPOL·LACIÓ DE MOVIMENT

1. Quan fem una interpol·lació de moviment els objectes, si és que no ho estaven, s'AGRUPEN. Per tant:
• No es poden colorejar
• No podem editar els nodes, "usea" no podem deformar els objectes.
• Un cop fet un objecte, en principi, ja no el podem canviar. L'heu de dibuixar bé abans de crear la interpol·lació.
2. Si intentem fer canvis a un objecte en un "fotograma no clau" accidentalment se'ns pot crear un fotograma clau. Per tant. NOMÉS FEU CANVIS ALS FOTOGRAMES CLAU.
3. Si desagrupem un objecte que estigui a una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.
4. Si afegim un objecte a un fotograma clau d'una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.

Els fotogrames clau serveixen per

INDICAR(ESPECIFICAR) CANVIS

HABILITATS i PROCEDIMENTS D'ANIMACIÓ EN FLASH FETS FINS ARA

Repaseu lo que hem fet i xequejeu:

1. Introducció sobre l'animació en Flash. Hem explicat que, a l'igual que Flash redueix pes dels gràfics vectorials gràcies a que defineix matemàticament les corves, també pot reduir pes a la pel·lícula al definir matemàticament les animacions.
2. Heu vist un exemple d'interpol·lació de moviment on amb dos fotogrames clau l'objecte es deslplaça d'un punt a un altre. Aquí lo que esteu fent vosaltres és indicar la posició on han d'estar els objectes en diferents fotogrames clau i el reproductor de l'usuari interpol·larà les possicions intermitjes entre diferents posicions. És a dir que només amb la informació dels fotogrames clau ja definim el moviment. Ho farem amb més detall més endavantj, només ha sigut una introducció per veure què és una interpol·lació en Flash.
3. Manipulació de fotogrames:
• Insertar fotogrames generant així intervals de fotogrames o "blocs de fotogrames".
• Allargar i/o escurçar intervals de fotogrames.
• Insertar fotogrames clau. I fotogrames clau buits.
• Sel·lecció de fotogrames
• Doble click sobre un interval de fotogrames
• 1 click en el primer fotograma que desitjem sel·leccionar i (1 Click + MAYS) en el darrer fotograma que volguem sel·leccionar. Això es pot fer inclús amb fotogrames que estiguin en diferents capes
• Arrossegant el cursor.
• ...
• Desplaçament de fotogrames
• Fent doble click i arrossegant cap a la dreta o l'esquerra en la mateixa capa.
• Fent doble click i arrossegant cap amunt i cap avall canviant de capa.
• Copiant fotogrames i enganxant-los en una altre lloc.
• Copiar fotogrames
• Extreure fotogrames
• Tallar fotogrames
• Eliminar fotogrames
• Esborrar fotogrames(una mala traducció, hauria de dir: esborrar continguts de fotogrames)
• EXERCICI D'ANIMACIÓ FOTOGRAMA A FOTOGRAMA. Un bitxo caminant. Us recomenava fer servir referències per que les potetes seguissin un moviment més natural fixant-se als punts on trepitjéssin.

REGLA NEMOTÈCNICA

MOVIMENTS INDEPENDENTS EN CAPES DIFERENTS.

Interpol·lació de moviment

Si el grafisme vectorial en flash ha suposat una revolució en els gràfics vectorials a internet, per la seva estandarització per una banda i la reducció de pes per l'altre, l'animació streaming que permet flash ha permés afegir al web la component de moviment i de temps; o sigui: ha permés desenvolupar animacions per les pàgines web.

Abans els banners publicitaris de les pàgines web es feien en format de gifs animats que eren seqüències de mapes de bits. Us ensenyaré a fer-ne gifs animats. Ara els banners publicitaris gràcies a les possibilitats multimèdia i a la reducció de pes que permet flash es fan sobretot en flash.

Ara, amb les animacions en Flash, es pot arribar a complicar una mica més. En tot cas és un recurs més per poder realitzar la funció principal del Disseny de pàgines web que és la de comunicar.

Comunicar amb imatges estàtiques ja té la seva dificultat i el seu "intringulis". No és pas banal i el disseny gràfic tradicional ha tractat de desenvolupar la comunicació visual durants segles mitjançant tot el que se sabia de psicologia de la percepció per una banda i de les expressions culturals i artístiques per l'altra.

Amb l'aportació de les animacions de Flash podem arrissar encara més el rínxol. Podem aportar-li moviment al missatge visual. Per fer això convindrà aquí desenvolupar quasi quasi, habilitats "cinematogràfiques". Si heu fet alguna cosa d'edició de vídeo i teniu coneixements de cinema, animació, etc... les podeu integrar aquí.

En aquest capítol desenvoluparem aquestes i més habilitats. Convé que tingueu
present que sovint a la gent li costa una mica animar. Així que estigueu amb els
ulls, les orelles i la ment ben oberts quan expliqui. Lo que farem no s'hi
sembla gaire a res que hagueu fet abans. Torna a ser començar de zero. Les
primeres operacions que veurem fan referència al control dels
fotogrames.

[continuaré aquest article...]

Interpol·lació de moviment

PROCEDIMENTS PER FER INTERPOL·LACIÓ DE MOVIMENT

MÈTODE A:

1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
2. Sobre l'únic fotograma clau(el primer) fer botó dret -> Crear Interpol·lació de moviment.
3. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
4. Amb el dial (aquella agulla de color vermell) col·locat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

MÈTODE B:

1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
2. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
3. Sel·leccionar tots els fotogrames inclosos els fotogrames clau i fer botó dret -> Crear Interpol·lació de moviment.
4. Amb el dial (aquella agulla de color vermell) col·locat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

NOTA: Hi ha hagut alguns errors d'estils de cascada en el blog

Hola

Us informo que el tutorial de RollOvers directes i indirectes fallava degut a que uns estils de cascada generat pel propi motor del Blogger feien que algunes parts del text no es veiessin. En el tutorial de Rollovers l'he corretgit. Aniré mirant si la resta està bé.

Dispenseu les molèsties.

Modelatge Ferrari

Calca i converteix en vectorial aquest Ferrari. Més endavant l'animarem.



http://www.new-dream.de/image/wallpaper/auto/ferrari/ferrari-02.jpg

Farem un exercici amb aquesta foto.

Més Exercicis per practicar dibuix vectorial en Flash

1. CONTROL DE LA GEOMETRIA NUMÈRICAMENT. POLIGONS, TRIANGLES,...
2. COMPOSICIÓ DE PUNTS DE LLUM I OMBRES. L'exercici de la bola.
3. CONTROL DE LES CAPES: Exercici de la broxeta i de les anelles olímpiques.
4. CONTROL DE L'ALINIAMENT I LA DISTRIBUCIÓ: Exercicis de foradaments concentrics d'objectes geomètrics. Exercici de construcció del monestir de Ripoll. Exercicis de logotips.
5. TEXTURITZACIÓ. Fabricació d'una textura matxembrada per aplicar al Monestir de Ripoll.
6. MODELATGE D'OBJECTES PER CALC. Exercici de modelatge de Ferrari. [Tècniques de contacte, tall i de ploma]
7. SIMULACIÓ DE VOLUMS: Exercici de composició de degradats al Ferrari.
8. [Continuarà amb lo que farem d'elements de biblioteca].

Exercicis per practicar dibuix vectorial en Flash

Dos tipus d'objectes vectorials a Flash

A flash hi ha dos tipus d'objectes vectorials:

1. Els farcits.
2. Els traçats.

---

1. Eines exclusives dels farcits:

2. Eines exclusives dels traçats:

TÈCNIQUES PURES DE MODELATGE VECTORIAL EN FLASH ( *)

En aquesta primera part cal que aprengueu a dibuixar en Flash. Tant si ja coneixieu altres programes de dibuix vectorial com si no bàsicament és un començar de zero ja que la manera de modelar en Flash és lleugerament diferent dels altres programes. Resulta que Flash té menys botons i està concebut amb una altra filosofia diferent de les altres aplicacions. El modelatge en Flash és molt directe i les estratègies són diferents.

Jo mateix m'he acostumant tant a dibuixar en Flash que m'estimo més fer servir aquest programa per dibuixar vectorialment que no pas els altres com poden ser Freehand, Ilustrator o CorelDraw. Ho faig sempre i quan no em sigui necesari l'ús d'algún efecte especial d'aquests altres programes.

Si controleu força aquests altres programes sempre podreu importar a Flash (Amb Arxiu > Importar) en formats compatibles com *.ai d'adobe ilustrator, etc... I a l'inrevés. Si apreneu a dibuixar en Flash i us resulta còmode total o parcialment sempre podeu començar en Flash i continuar en aquests altres programes exportant des de Flash amb Arxiu > Exportar i escollint el format de sortida compatible amb aquests altres programes.

Cal però que siguin objectes vectorials lo més simples possible que pogueu els que exporteu o importeu ja que moltes vegades els programes de destí no són completament compatibles degut a efectes especials o altres. De tota manera heu de saber que efectes especials com lents, ombres i coses per l'estil d'aquests altres programes de dibuix vectorial moltes vegades són incompatibles. Per la qual cosa sovint per poder fer servir el grafisme generat en aquests altres programes és possible que us calgui passar a mapa de bits.

Tant si en sabeu de dibuixar en altres eines com no és "obligatori" saber dibuixar en Flash. No us faci mandra que serà contraproduent si no ho feu així.

---

Aquestes tècniques pures cal que quedin ben clares:

1. Tècnica de dibuixar. Amb la ploma de bèzier, amb el llapis i amb el pincell.
   
2. Tècnica de connectar(gràcies al magnetisme amb flash). Tant podem connectar nodes d'un objecte vectorial com els mateixos objectes vectorials.
   
3. Tècnica de tallar.
4. Tècnica de foradar. Superposant dos farcits de diferent color, desel·leccionant.
   
5. Tècnica de fussionar. Superposant dos farcits del mateix color.
   
6. Tècnica de deformar. Principalment amb fletxa negra(eina de sel·lecció) i fletxa blanca(eina de subsel·lecció). També podem deformar amb panell de Transformar, per una banda, i amb la eina Transformació Lliure on podem escalar, rotar, sesgar, distorsionar i fer una envoltura.
   
7. Tècnica del pivot extern. Requereix de l'ús del panell "aliniament".
   

La resta de recursos de modelatge depenen d'aquestes.

TUTO - MARQUES D'AIGUA AMB PHOTOSHOP

Per posar una marca d'aigua a una foto ho podem fer de la següent manera:

1. Col·loquem el logo en una capa per sobre de la imatge i li donem un estil de capa bisel y relieve.
2. 
   A la capa amb el logo, o marca d'aigüa, li treiem el relleno.

Es veu que el paràmetre relleno de la paleta capas afecta a la opacitat de la imatge però no pas a la opacitat dels estils o efectes de capa.

TUTO - ROLLOVERS DIRECTES - PHOTOSHOP I IMAGE READY

Alex, perquè quan faig l'exercici de les fotos superposades amb 2 parts de la imatge únicament, no se m'obre la imatge del damunt dues vegades com quan ho faig amb 4 parts, que se m'obre quatre vegades?. Sinó m'he explicat bé ho tornaré a repetir.
Mercès

Intro
A classe hem fet dos exercicis de Rollovers. El segon que vam fer del quadrat amb els quatre sectors us el poso en aquest post i us afegiré la part que queda de rollovers indirectes que a versions anteriors de Image Ready ja es podia fer.

Recordeu que la paraula Rollover vól dir en anglés "lliscar per sobre"("deslizar por encima"). És una de les formes de generar interactivitat en funció de on posa el ratolí l'usuari i què fa amb ell.

---

ROLLOVERS DIRECTES

1. Creem un document nou[Archivo > Nuevo] de 700x350 amb fons transparent. [És una bona mida per que càpigue en el forat estàndard dels navegadors, ja sabeu que és millor que no sobrepassi les mides: 780x430]. Podem començar al photoshop i passar-lo després a l'ImageReady o començar directament amb ImageReady.
   
   
2. Pintem la única capa que tenim amb el bot de pintura a fí que s'ompli d'un color de fons i que tota la capa sigui plena de píxels.
3. Posem guies als centres vertical i horitzontal i als costats aprofitant que aquesta capa està ocupada ja que hi ha magnetisme.
   
4. Amb la calculadora trobarem la tercera part de l'amplada, o sigui que fem 700/3 i obtenim: 233.
   
5. Creem una altra capa per sobre de la que teniem inicialment.
6. Fem una sel·lecció quadrada de 233px per 233px
   
   i l'arroseguem fins que s'enganxin els seus centres vertical i horitzontal amb les guies aprofitant-nos del magnetisme que hi ha a photoshop. I també aprofitant-nos del magnetisme de les guies amb les sel·leccions posarem una guia horitzontal amb l'extrem superior del quadrat i una guia inferior amb l'extrem inferior.
   
7. Aquesta sel·lecció la guardarem per si la necessitem més endavant. La podem guardar com a quadret. [Sel·lecció > Guardar Sel·lecció].
   
8. A continuació obro dues fotos que siguin més grans de 233px tant d'ample com d'alçada.
   
9. Amb la eina de sel·lecció quadrada farem una sel·lecció quadrada tot mantenint les proporcions i enquadrem la zona que volem.
   
   Quan ja sabem quin troç de la imatge volem fem Imagen > Recortar.
   
   
   
10. Amb la eina "mover" arroseguem les dues imatges fins al llençol de la imatge en la que estem treballant, la de les guies.
    
11. Anirem a la capa d'una de les dues imatges i farem Edición > Transformación libre. Col·locarem cada imatge enganxada a les guies i redimensionarem fins que encaixin dins les guies. (En el cas d'aquest exemple poseu a la Marilyn en una capa damunt d'Einstein).
12. Un cop col·locades les imatges passarem a dividir la imatge de la Marilyn en 4 peces, que col·locarem en capes diferents. Per poder separar aquests 4 troçets haurem de fer sel·leccions aprofitant-nos del magnetisme. Fixa't a la figura següent com faig la sel·lecció.
    
    Fixeu-vos que ho faig començo a sel·leccionar des de fora i m'aprofito del magnetisme amb les guies.
    
13. Anant tota la estona a la capa de la Marilyn farem la operació de sel·leccionar i extreure cada quart de la següent manera: Capa > Nueva > Capa Vía Cortar. Observeu que cada cop que feu això es crea una capa nova que contindrà un quart de la Marilyn. Si ho feu 3 cops ja es suficient ja que la quedarà ja tindrà precísament un 4t de Marilyn.
14. A continuació amb la eina sectors aprofitant-nos de nou del magnetisme de les guies farem 4 sectors, un per cada quart.
    [Assegureu-vos que els sectors estàn ben alineats amb les guies. Us recomano que us apropeu amb la lupa i si no encaixen perfectament amb la eina de sel·leccionar sectors sel·leccioneu sectors i amb els agafadors acabeu de posar ben alineats tots els sectors i que no s'hagin creat "mini-sectors" que de llun no es veuen.]
    
15. Si no estiguessim encara treballant amb ImageReady li donem al botó de passar a Image Ready, que és on farem lo dels Rollovers.
    
16. A continuació heu de tenir a mà els panells Capes i Contenido de web.
    
    Fixeu-vos que jo he canviat els noms a les capes i als sectors de la paleta contenido de web per aclarar-me millor, per una banda i per a que ImageReady no generi arxius d'imatge amb accents, cosa que faria que ens surtíssim de ASCII.
    
17. Amb el botó de la finestra Contenido de web afegirem un estat de rollover per cada sector fins a obtenir
    
    [Apretar per veure millor els detalls]
    Observeu que se'ns han creat estats "Sobre" a cada sector.
    
18. A continuació anirem per cada un dels estats "sobre" de cada sector i ocultarem o mostrarem la capa del quart que li correspón al sector on estem.
19. Un cop fet això ja podem fer Guardar Optimizada Como i generarem així l'HTML i les imatges. Us recomano fer-ho en una carpeta nova.
20. Guardeu també l'axiu de projecte PSD d'aquesta imatge des de ImageReady.
    

NOTA: A l'ImageReady del Photoshop 7 es podia també mostrar i ocultar capes que no fossin del mateix sector sense haver de fer res. A la versió CS2 això ho han canviat. A continuació aprofitant aquest exercici explicarem com fer per aconseguir a la versió CS2 "ROLLOVERS INDIRECTES", és a dir, de sectors que no són els que l'usuari estigui passat per sobre amb el ratolí, sinó uns altres.
És a dir: lo que posaré a continuació no es va arribar a fer a classe el divendres passat. És nou a partir d'aquest punt.

ROLLOVERS INDIRECTES
(Rollovers que afecten a sectors que no són els que l'usuari activa).
Si volem activar altres sectors al mateix temps que el que estem tocant hem de fer lo següent.

21. Ens posem a l'estat "Sobre" de la finestra Contenido de Web. I ens fixem en una petita espiraleta que hi ha
    
    Fixeu-vos que si us poseu uns segons a sobre us surt un cartellet que diu...
    
22. Doncs feu lo que diu. Convertirem en sectors remots els altres sectors, o els desitjats, arrosegant aquesta espiraleta a cada un d'aquests sectors, com si fós un "metre enrotllable".
23. Un cop hem convertit els altres sectors, o els que hem volgut, en sectors remots podem mostrar u ocultar capes que afectin a aquests sectors. De tal manera que podriem fer que si l'usuari passa per sobre de la cantonada dreta inferior de la Marilyn podriem ocultar les 4 capes de la Marilyn deixant veure sencer a l'Einstein.
24. Per últim per evitar que ImageReady ens fabriqui les imatges de les cel·les-sectors, de la part del fons anirem al panell sector i direm sense imatge i a l'apartat Fondo posarem el color frontal si és que és del mateix color que el que tenim com a fons de la imatge o si no ho averiguem i ho posem nosaltres manualment, sabent el valor hexadecimal del color. Això ho farem sector per sector.
    

Aquesta seria una entre d'altres possibles utilitats dels Rollovers indirectes amb Image Ready. Veureu que en Dreamweaver també ho podrem fer. Aquí ha intervingut lo que en ImageReady es coneix com a sectors remots que són aquests que hem associat a un estat "sobre" d'un dels sectors tot estirant de la espiraleta.


Baixeu-vos els arxius de l'exemple aquí.

TUTO - BARRA DE NAVEGACIÓ (IMAGE READY)

Bon dia. Estic treballant en l'exercici de les tres pestanyes posant concepctes diferents, el que vàrem fer quan l'escola nàutica. He fet els tres index de colors diferents, però no ser com fer per agrupar-los i que canvii el color. Bé, el cert és que estic mig clavat a les capes, no sé si el text i la pestanaya han d'anar en una mateixa capa ni com posar-les juntes. Es possible d'explicar aquí al blog el procès?

Mercès.

Josep

---

[Dintre de les pràctiques més avençades estem desenvolupant ja les anomenades "meta-habilitats" en les que combineu totes les tècniques més bàsiques que heu estat fent fins ara.]

La dificultat d'aquest tutorial és de nivell mitjà. Per poder fer-lo cal controlar molt bé:

1. Sel·lecció


2. Guies


3. Capes


4. URL


5. HTML


6. ...

L'altre dia vàreu fer una barra de navegació horitzontal de dos nivells. Aquest cop en contes d'utilitzant sectors ho vau fer amb "hotspots" que traduït vól dir "manchas calientes", nosaltres li podem dir "zones interactives". A continuació us posaré els passos per si no us enrecordeu de com ho vam fer per intentar-ho de nou.

1. Crearem un document nou. Les seves dimensions han de estar inscrites en aquell rectangle límit que vam comentar. No hem de sobrepassar els 780x430px (que com ja sabeu és la mida de la finestra que queda al navegador si l'usuari està fent servir una resolució de pantalla 800x600). Per altra banda la barra de navegació. Posem per exemple una mida de: 650x40px.
   
   
2. A continuació posarem guies per marcar referències. Una horitzontal a y=20px i les altres verticals distribuïdes de tal manera que ens serviràn de referència per fer les tres pestanyes, les quals han d'estar separades entre sí igual distància. L'amplada de les pestanyes no té per que ser igual en totes. Depenent del text que tinguin poden ser més amples o menys. Però el que sí ha de ser igual és la distància que les separa. Hem fet servir el recurs de fer sel·leccions quadrades amb "Tamaño fijo" aprofitant que les guies es peguen magnèticament per aconseguir posar les guies amb més precisió.
3. Amb la eina "rectángulo redondeado" amb un radi de curvatura, posem, de 10px i la paleta "Trazos" a la vista anirem creant 4 traços: un per fer la forma de la barreta i els altres per fer les pestanyes. Cada cop que facis un traç posa-li nom i desel·lecciona'l a la paleta "Trazos" fins que no estigui assenyalat de blau(pica fora de qualsevol traçat que tinguis en aquesta paleta). Així aconseguim que no es faci només un sol traçat. Ens interessa que siguin traçats diferents.
   
4. Amb Ctrol sobre el traçat barreta convertint així aquest traçat en sel·lecció. A continuació fes Ctrol+MAYS(SHIFT) sobre el traçat d'una de les pestanyes i obtindràs una sel·lecció que serà la suma de la barreta i la pestanya. Un cop tens aquesta sel·lecció amb aquesta forma pinta sobre una capa nova. Repeteix aquesta operació obtenint com a resultat 3 capes, les quals estàn pintades amb la suma de barreta i cada pestanya.
5. En capes per sobre Col·loca el text que va a cada pestanya i també els textos de les subseccions de cada pestanya.
   

Animació del procés fins aquí:
Clicka aquí per veure l'animació del procés.

Vista de la finestra capes just abans d'escriure els textos:


I havent escrit els textos de les pestanyes.



Fixeu-vos a continuació que he afegit els textos de les seccions en capes diferents i les he empaquetades amb carpetes. [Cliqueu sobre la imatge per ampliar]. Us recordo que les carpetes també tenen un ull cosa que ens permet fer visibles o ocultar de cop totes les capes que estiguin a dins.

Fixeu-vos que en

6. Si haguèssim treballat en photoshop fins ara i no estiguèssim a ImageReady encara pasem a aquest programa apretant al botó inferior de la barra d'eines.
   
7. Si estàs al ImageReadyCS2 tingues a mà les finestres Contenido de Web i Mapa de Imágenes.
   
8. Posa zones calentes (o "HotSpots") sobre les pestanyes amb la eina "Mapa de imágenes".
   
   [Cliqueu a la imatge per ampliar i veure l'animació del procés].
   
   
   Mireu a continuació quin aspecte té la finestra Contenido de Web un cop hem creat aquestes "zones calentes". [Convindria que canvièssim de nom a aquestes zones per identificar-les més ràpidament i per treure l'accent de la paraula "Mapa de imágenes" que no és convenient de cara al pas que fa cap a pàgina web el ImageReady ja que posaria caràcters en el HTML que se surten de ASCII, que com ja sabeu no és recomenable que sigui al codi font d'una pàgina segons W3C encara que tinguem la sort de tenir nosaltres un navegador tolerant. No sabem mai si el navegador que tingui l'usuari serà tant tolerant.]
   
   
   
   
9. A continuació anirem a la finestra capes i posarem l'ull a la carpeta de la primera secció que hem fet, en aquest cas la categoria "cursos". Tanmateix tancarem els ulls de les altres carpetes: la de sortides i la de botiga.
10. Un cop només veiem la carpeta de la categoria principal cursos posarem més "hotspots" a cada una de les subseccions d'aquesta categoria.
    
    Observeu què li passa a la finestra Contenido de Web.
    
    Han aparegut més "hotspots"(que he resaltat en blau).
    
    
    
    
    
    
11. A continuació a la finestra Contenido de Web tancarem els ulls de les hotspots assenyalades en blau a la figura anterior. Per altra banda a la finestra capes tancarem l'ull de la categoria general cursos i obrirem l'ull de la categoria general sortides.
    
    
12. Repetirem el procés des del punt 10 fins el punt 11, i creant hotspots, però aquest cop amb les subseccions de la categoria sortides. Tornarem a tancar els ulls d'aquestes hotspots a la finestra contenido de web, tancarem l'ull de la carpeta sortides, obrirem l'ull de la carpeta botiga i repteriem el procés des del punt 10 fins el punt 11 però aquest cop amb la categoria general botiga.
    
    
    
    
13. Un cop ja hem creat totes les hotspots amb la eina que les crea () sel·leccionarem amb la eina de sel·leccionar hotspots () una per una i a la finestra Mapa de Imagen:
    
    anirem omplint els camps per que aquestes hotspots facin de link. [Recordeu que les hotspots són zones d'una imatge en les que podem posar links. El camp Destino és l'atribut "target" de les etiquetes A, les dels links. En aquest cap definim on volem(en quina finestra, frame o iframe nomenada prèviament) que es representi el URL. Aquí és on intervindrà el que sabeu de HTML. Si encara no ho enteneu no us amoineu per que al Dreamweaver ho acabareu de veure.] Podem posar a les pestanyes principals les seguents URL per exemple: cursos.html, sortdies.html i botiga.html.
14. Tanmateix a les altres hotspots que hem creat i que corresponen a les subseccions hem de posar les URL en aquesta finestra. Amb això ja us espavilareu vosaltres amb el que sabeu de HTML ja que si feu servir URLs relatives en cada document aquestes URL podràn variar. [No us hi "mateu" amb això encara ja que amb Dreamweaver això serà molt més fàcil de fer ja que també permet crear "hotspots" de mapes d'imatge. Simplement que sapigueu que a ImageReady i lo que sabeu d'HTML ho podeu fer].
    
1. Un cop hem posat totes les URL a totes les hotspots ens dispoem a guardar optimizada como per obtenir tres imatges amb mapes d'imatge, o sigui amb Hotspots. Però per poder fer això abans hem de fer cada cop el següent:
   1. Intercanviar l'ordre de les capes pastibarra1, pastibarra2, pastibarra3
      per a obtenir colors diferents per cada categoria principal. I també deixarem cada cop un ull per carpeta a la finestra capas a fí que només es vegin els textos de les subseccions.
      
   
   
   
   
   [Cliqueu aquí per veure l'animació]
   
   
   2. I a la finestra Contenido de Web cada cop posarem els ulls de les hotspots que volguem que es vegin en funció de la categoria principal que estem.


15. Al final fent Guardar Optimizado como hem hagut d'exportar tres documents per les categories principals almenys que els haurem anomenat respectivament: cursos.html, sortides.html i botiga.html