Hype ( per ser que no anava a explicar gaire cosa...)

Hype ès un programa per fer diapositives, com el Adobe flash, però en aquest programa podem exportar la diapositiva per posar-lo en una web.

Tampoc puc explicar gaire ja que lo poc que el vaig treballar ho vaig fer malament.

Doncs bè, treballem amb una linia del temps, on posant diferents fotogrames clau, podem indicar un canvi sobre l'objecte, com ara desplaçament, desapariciò (baixant l'opacitat d'aquest) o qualsevol altre canvi.
Amb l'indicador de temps que es troba just amun de les diferents linies del temps podem triar amb exactitud a quin segon volem situa-nos. A mès, tambè podem triar el tipus de canvi entre un estat i un altre, si volem que sigui proguessiu, o bè sobtat. A mès en cas de les imatges les hem de redimensionar a la mida original.

I això es tot el que puc explicar aixì en general, ara explicarè com vaig fer la diapositiva de la web.

La diapositiva de la web de l'Àrtic no la puc pujar perquè em va quedar molt mal feta per culpa d'una sobreposiciò d'escenes sense possible soluciò. (T,T amb lo que em va costar). Doncs ès una simple diapositiva que mostar els imatges dels diferents temes dels quals parla la web de salvem l'Àrtic, amb un text cadascuna, i una durada d'uns 4 segons per cada fase, entre el 3r i el 4t segon coemça a fer una transiciò de reducciò d'opacitat deixant entreveure la següent foto amb el seu respectiu text.
Em sembla que eren 5 fotos amb els seus 5 textos, aixì doncs creem 5 capes per a les imatges i altres 5 per als textos.

De fet penjo un link de la pàgina oficial perque es vegi com ha de quedar. (ès la oficial, no pas la meva barata imitaciò) Bè, diria que han canviat la diapositiva, juraria que quan vaig fer-la, la transiciò entre imatges era de baixada d'opacitat, ara ès de deplaçament.

http://www.savethearctic.org/es

-Col·loquem la primera a la capa superior i la ùltima a la mès baixa, i entrre aquestes les altres amb el seu   respectiu ordre.

-Ara en totes les capes creem un fotograma clau en el primer segon amb opacitat 100%.

-Bloquejem totes les capes excepte les de la primera foto i text.

-Ara anem al segon 00:03 apliquem un fotograma clau i indiquem una mès baixa opacitat (50% per exemple).

-Ens situem al segon 00:04, fotgrama clau i opacitat 0.

-Ara em sembla que hi havia una opciò en la linia de temps (no recordo si era clickant sobre un fotograma clau o com era) on podiem indicar quin tipus de transiciò posar-hi, en tot cas hem de psar una transiciò sobtada ja que si no, desde el primer segon i durant els 3 següents segons la opacitat anirà baixant fins a 50% al tercer segon, i el que volem ès mantenir 100% d'opacitat fins al tercer segon. Podem aplicar aquest pas a la transiciò 3r -4t segon.

- Repetim pasos amb el text de la primera capa.

-Ara comencem a treballar am la següent fase que comença al segon 00:04, apliquem el primer canvi  a 00:07 i desapareix a 00:08, apliquem això al seu respectiu tetx.

-I seguim amb les altres fases aplicant-ho al seu temps 3 segons 1 segon, 3 segons, 1 segon, etc

Estil CSS compost

Ès un quart tipus d'estil, mès o menys fàcil d'entendre, per explicar-ho agafarè com exemple la web de l'Àrtic, que de fet allà vaig aprendre a aplicar-lo.

Jo tinc diferents Divs amb un text etiquetat com a paràgraf dintre de cadascún, però es clar, cada Div tè per naturalesa una ID diferent, o sigui que per definir l'estil del Div tindirem que crear un estil  ID però per aplicar un estil al paràgraf tindriem que crear un estil d'etiqueta p.  Doncs bè, si vull, puc tenir un estil que nomès funcioni en el paràgraf de determinat Div o element amb ID. Com ara els Divs de la web de l'Àrtic,


#petroli
#pesca
#conflicte

Un simple estil p, s'aplicaria sobre tots els paràgrafs existents, però jo, si vull, puc fer un estil de paràgraf que nomès afecti al paràgraf de petroli, per exemple.

#petroli.p

Ès tan simple com anar a la finestra d'estils i cear-ne un tal i com l'he escrit jo, separant els estils amb punts, en l'exemple de dalt jo simplement estic indicant que afecti tot paràgraf que a la vegada tingui ID petroli.

Mès simple no pot ser.

Les dues entrades de retìcules

Aqui pujo auqests links per accedir de manera ràpida a les dues entrades sobre retìcules que s'havien de pujar:
 (Bè jo tinc tres entrades je je :p )

http://rtirado-crn.blogspot.com.es/2013/04/c5-crear-una-reticula.html
http://rtirado-crn.blogspot.com.es/2013/04/c5-aplicar-una-reticula-lindesign.html
http://rtirado-crn.blogspot.com.es/2013/04/c5-esbossos-de-la-revista.html



Una parla de com fer una retìcula pas a pas (ès una molt bona guìa feta per mi) i l'altra de com aplicar-la en l'InDesign i un altre sobre com utilitzar la retìcula per  fer uns esbossos sobre paper amb experiència personal inclosa.

Pràctica Web de l'Àrtic

Tralarì tralarà ès dilluns de vacanceees. Encara aixì no em lliuro del bloc, bè, que hi farem... tampoc li tinc alergia al bloc, si de fet quan em poso a escriure una entrada m'hi motivo i em costa deixar d'escriure.

Avui parlarè de la ùltima pràctica web, una pàgina web de l'Àrtic, que de fet ha quedat feta a mitges però no calia ni de bon tros completar-la com l'original. Simplement entendre alguns conceptes bàsics sobre divs i posicionament, que, resulta que aquest dos temes ja els explico en alñtres entrades. Ai, tambè hi surt el tema d'estils compostos. Tambè s'hi havia de posar una diapositiva feta amb Hype, pero la cosa no em va sortir gaire bè. La diapositiva havia d'ocupar l'espai aquest en blanc a sota de la capçalera, darrere de l'òs polar.

http://content.wuala.com/contents/rtirado.crn/web/m2c507_rtirado/index.html?sort=size&id=1,84299,11-1175,1924085,18

Em surten les imatges desvinculades, no se perque, si ho obro desde el wuala tot va genial , pero el link....

Bueno, ara he d'explicar com vaig fer aquesta pàgina, doncs primer vaig intentar fer la diapositva amb Hype, que en si desprès de molts intents estava bè, pero tenia un petit gran defecte, i es que per damunt de l'escena de la diapositiva, n'hi havia una altra, la principal, que sembla ser que ès impossible d'esborrar,  i llavors al intentar visualitzar la meva obra... surtia un xurro de diapositiva, es clar, alñ principi vaig estar experimentant amb el programa i recordo perfectament, haver creat una segona escena, no sabia que em portaria tants problemes. Bueno, un cop feta la diapositiva, nomès calia exportar-la per HTML, obrir l'arxiu web, copiar un part del codi inidicada i enganxar-la dins el Div o la zona on volem que hi vagi la diapositiva en la página web. Ah, i tots els arxius referents a la composiciò de la diapositiva han d'estar disonibles, al igual que les imatges de la carpeta img d'una web, o sigui, que abans de copiar el link, s'ha de posar la carpeta oroginada al exportar el treball per a HTML i posar-la a l'arrel de la carpeta web, junt amb index.html i la carpeta img.

Aqui explico com vaig fer la diapositiva amb Hype:

http://rtirado-crn.blogspot.com.es/2013/04/hype-per-ser-que-no-anava-explicar.html

Ara ve la part del fons, però això ho explico molt ben explicat (tan bè com he sabut, com a mìnim) a:

Div in Div
http://rtirado-crn.blogspot.com.es/2013/03/fons-de-pagina-web-professional-per.html

I desprès els elements DivPA, simplement són Divs amb posicionament Absolute incorporat, tan sols calia aplicar a cadascún dels DivsPA les dimensions de cadascuna de les imatges, col·locar imatges, i arrastrar  els DivsPA allà on em sortìs de... o sigui, allà on vulgui.

Per mès informaciò sobre posicionament d'elements web:

http://rtirado-crn.blogspot.com.es/2013/04/posicionament-dels-elements-web.html

Tambè he hagut d'aplicar estils CSS compostos, en parlo aqui:

http://rtirado-crn.blogspot.com.es/2013/04/estil-css-compost.html

En una altra entrada explicarè i una miqueta de Hype.

Posicionament dels elements Web

Existeixen 4 tipus de posicionament:

-Static
-Relative
-Fixed
-Absolute

-Static: És el posicionament que ve donat per defecte, amb el qual els elements es posicionaràn in block (un a sota de l'altre), encara aixì podem col·locar tres elements en una mateixa linia posant la caracterìstca float a aquests, que se situarán al costat d'un element que es trobi en aquella lnia per la simple raò de static, nomès cal anomenar a l'altre element float right o float left per que s'ens col·loqui al costat del element original.

-Relative: En comptes de col·locar-se in block, es posiciona a una determinada distància respecte al seu posicinament d'origen, o sigui partint del seu posicionament static.

-Fixed: És col·loca en un punt fix de la pantalla i d'alla no ès desplça, basicament s'utilitza per spam, si, és aquell molest spam, que per molt que facis scrolling segueix allà. Agh, quin fàstic!

-Absolute: En opiniò meva, ès el que mès m'agrada, és lliure, sense normes, pot arrastrar l'ement on vulguis i allà es queda.

I fins aqui la xuleta de l'exàm... vull dir, els apunts sobre posicinament d'elements web.

C5: Aplicar una retìcula a l'InDesign

És molt fàcil, la majoria de pasos s'executen esde la finestra de Crear nou document, tan sols hem de donar format de pàgina, indicar numero de columnes amb el seu medianil, i establir els marges.

Ara hem d'anar a l'apartat Cuadriculas de Preferencias crear una reixeta, indicant l'interliniat, i on comença la reixeta. La reixeta s'activa en el menú Ver, en Preferencias lo ùnic que fem és configurar-la.

Ara només cal crear un recuadre, que d'alt  ocupi el nombre de linies per bloc que ens van donar els càlculs,  i que ocupi l'ample de la columna, ara copiem el recuadre i el co·loquem a la següent columna, i l'altra. Ara copiem tots de cop i els enganxem a sota, amb una linia de separaciò, copiem les dues fileres i seguim enganxant fins aixì ocupar tota la caixa.

Normes generals de maquetaciò

Aqui pujo un arxiu escanejat del correcte tractament tipogràfic y d'imatges:

C5: Esbossos de la revista

Aqui pujo els esbossos inicials de la revista de l'Àrrtic, que al final van ser modificats de manera radical:

Aquesta és la retìcula base dels esbossos

A la pàgina esquerra hi ha l'esbós
 de la portada de la revista,
un dels pocs esbossos que s'ha acabat realitzant sense variar.

Taula de continguts

La taula de continguts és una funció d'InDesign que ens permet fer un ìndex de manera fàcil , ràpida i neta, això si, s'ha d'entendre com funciona, o del contrari es converteix en una maldecap.

Doncs bè, en la finestra de taula de contingut primer de tot col·locarem un tìtol per a l'Ìndex (ÌNDEX ja està bè), i al costat ens demanarà per un estil, aquest estil s'aplicarà sobre el t`tol de la taula de contingut, en aquest cas ÌNDEX.

Ara, a sota ens trobem amb un recuadre on s'hi poden portar uns estils, aquesta és la part important, això NO són estils que s'hagin d'aplicar a cap part de l'îndex, el que fem ès indicar que tot el text que estigui aplicat sota aquell estil, sigui el text que aparegui a l'ìndex. Ho explicarè amb un exemple:



CAPÌTOL1

Qwertyuiopasdfghjklñzxcvbnm1234567890'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;

1

CAPÌTOL2

Qwertyuiopasdfghjklñzxcvbnm1234567890'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;

3

CAPÌTOL3

Qwertyuiopasdfghjklñzxcvbnm1234567890'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;

5

 Com és normal en una maquetació professional, tinc 1 estil aplicat per al nom de capìtol i una altre per a text normal, per exemple, els anomenarem"Capìtol" i "Text normal" respectivament.

Doncs ara simplement he de portar l'estil "Capìtol" al recuadre de la finestra de taula de contingut, i de moment li donem a "Fet".

Hem de clicar per introduïr la taula de contingut, LLavors el que ens trobarem serà el següent

ÌNDEX

CAPÌTOL1 ...1
CAPÌTOL2...3
CAPÌTOL3...5

Si, aplica automàticament el número de la pàgina on es troba cada text, és una de les grans utilitats.

Ara hem d'aplicar un estil a la paraula capìtol i al nùmero de pàgina, hem de desplegar totes les opcions de la finestra de taula de contingut, i desde allà podrem seleccionar un estil, "estilo de entrada" per aplicar un estil a CAPÌTOL 1.. CAPÌTOL 2..., i mès avall trobarem la opciò de foliaciò on podrem aplicar-hi un estil.

Aixì de senzill.

La Revista, ùltim treball de C5, experiència

Aquest ùltim treball, com ja indica el tìtol, es basa en maquetar una revista a lo profesional.

Tot i que no m'ha donat temps d'acabar-la em sembla que compleixo les bases, excepte en el tema de tractament d'imatges, que mentre s'explicava aquest, jo em dedicava a dibuixar dracs en comptes de prendre apunts i atendre.

En altres aspectes, jo diria que està força bè, he creat i utilitzat bastants estils de paràgraf, tinc un 1 ó 2 estils enniuats, un el vaug utilitzar per fer el nom de capìtol i poder aplicar uns estils diferents per a nùmero de capìtol i nom de capìtol. Per al text normal vaig utilitzar dos estils, un general, i un altre igual que el general amb la diferència que aquest te sangria de primera linia i la primera lletra capitular, aquest estil només era per al primer paràgraf de cada capìtol. Tambè vaig fer estil per a la foliaciò i algun altre per a la taula de contingut.

En principi vaig fer uns esbossos en paper de com havia de quedar la revista, pero la falta de temps i experiència van fer que els esbossos quedesin nuls, ja vaig modificar-los una mica abans d'obrir l'InDesign, però a mida que anava treballant ja en el programa de maquetaciò van anar evoluconant de tal manera que ja no tenien res a veure amb la primera idea. Els esbossos els anava aplicant en pàgina mestra, em sembla que algún es va quedar sense aplicar, i vaig tenir uns quants maldecaps per aconseguir que m'hi cabès el text en les pàgines lìmit que em donaven, si, perquè cada apartat o capìtol de la revista, tenia un nombre exacte de pàgines i s'havia de respectar, en cas de sobrar una pàgina, com em va passar amb el capìtol 2, em sembla que era, sempre i puc aplicar tan sols imatge, o bè varies imatges col·locades amb una mica de gràcia i estil, o bè una sola a sang com vaig fer jo.

Altres experiències per explicar d'aquest treball, doncs que havia de fer una taula de contingut per a fer l'ìndex de la revista, era obligatori, doncs resulta que els apunts sobre com utilitzar la taula de contingut els tenia en una altra llibreta que tenia a casa, pero tenia massa pressa per a preocupacions, aixì que em vaig posar a intentar crear l'ìndex i desprès d'uns quants intents, vaig comprendre la lògica de la taula de continguts. Encara aixì, l'ìndex em va sortir força curtet perquè nomès tenia fets tres capìtols.

C5: Crear una retìcula

Tot i que ja vaig fer una entrada sobre aquest tema l'any passat, ho torno a explicar d'una manera mès explìcita que l'ùltim cop.

Una retìcula es pot fer de dues formes:

-A ull ( no recomanable)
- Amb una sèrie de càlculs i passos. (D'això tracta le'entrada)

Resum dels pasos per fer una retìcula.

1.Buscar proporciò.
2.Distribuir bloc de text i marges.
3.Distribuciò o reiculaciò de la caixa de text.


Ara com a exercici, farem una retìcula amb les següents caracter`sitiques inicials:

 -Format de paper: UNE (5:7)
 -24 camps reticulars (3 columnes, 8 camps)
 -Costat petit del paper: 20 cm. (el gran l'hem d'averiguar)
 -Marges: Tots 20 mm (el marge modificable és l'inferiror.)
 -Medianil: 5 mm
 -Interliniat: 11pt
 -Pàgines oposades

Amb tot això ja podem començar a treballar:

1. AVERIGUAR EL TAMANY DE PÀGINA

Necesitem saber quant mesuren els costats de la pàgina, pero nomès tenim el costat petit, a partir d'això podrem averiguar el costat gran.

   -Necessitem:  Fromat de paper + la mida d'un costat (en aquest cas el petit)

Ara farem una regla de tres amb la mida que tenim y la proporciò (5:7), suposant que 5 equival a 200mm, 7 equivaldrà a X, el costat gran de la pàgina, el resultat ens dona 280mm.


Soluciò del pas 1: Mida de la pàgina: 200x280mm





2. AVERIGUAR EL TAMANY INICIAL DE LA CAIXA

Ara que ja tenim les mides de la pàgina podem mesurar la caixa, o sigui la part on hi anirà tot el contingut.

  -Necessitem: Marges + Mida de la pàgina (tosts dos costats)

Per averiguar:

 Ample de la caixa: Restem a l'ample de pàgina la suma dels marges laterals: 200-(20+20), el resultat ens dona 180 mm

Alt de la ciaxa: Restem a l'alt de la pàgina la suma dels marges inferior i superior: 280-(20+20), el resultat ens dona 240 mm.

Soluciò del pas 2: Tamany inicial de la caixa: 180x240mm

I dic tamany inicial, peruqe després l'alt de la caixa disminurà, o sigui, encara no es definitiu, pero ho necesitem per fer els següents càlculs.




3. AVERIGUAR QUANTES LINIES HI CABEN A LA CAIXA


    -Necessitem: Tamany de la caixa (alt) + Interliniat

Primer de tot ens cal trobar una unitat de mesura comuna entre entre els dos factors per aixì poder calcular, per tant passarem els pt de l'interliniat a mm.

1pt = 0,353 mm

11pt = 3'883 mm

Amb això sabem que una linia ens mesura 3,883 mm,ara la pregunta és:

Quantes linies d'aquestes hi caben en una caixa de 240 mm d'alt?

       240:3,883= 61,808 linies. 

Sempre hem d'arrodonir el resultat de lin ies a la unitat, menjant-nos uns decimals. Per tant ens quedem amb 61 linies.

Soluciò del pas 3: Linies que hi caben a la caixa inicial: 61 linies


4. AVERIGUAR NOU ALT  DE LA CAIXA I NOU MARGE INFERIOR

Ara si multpliquem les 61 linies per la mida de cada 1 d'elles (3,883mm), per tal de invertir l'ùltim càlcul i tornar a aconseguir l'alt de caixa, veurem que l'alt ja ha canviat, lògicament, això es deu a l'arrodoniment que hem fet a l'anterior càlcul, on hem trets decimals.

          61 x 3,883= 236' 863mm

Ara mesurem el nou marge inferior, per això restem l'alt de pàgin menys el nou alt de caixa, i el resultat d'això li restem el marge superior:

280-236'863= 43,137mm  => 43,137-20= 23,137mm

Soluciò del pas 4: Nou alt de caixa=236,863 mm   Nou marge infeior= 23,137mm

Encara no tenim l'alt de caixa definitiu i llavors tampoc tenim el marge inferior .

5. CALCULAR MÒDULS

Ara averigüarem el repartiment de linies per bloc, o sigui cuantes linies per bloc.
HEM DE TENIR EN COMPTE ELS ESPAIS ENTRE BLOCS!!!

-Necessitem: nº linies + nº blocs (alt) + nº d'espais entre blocs (alt)

Si tenim 8 blocs d'alt, llavors els espais que hi han entre aquests són 7.

Quantes lnies hi caben en cada bloc?

Restem el nombre d'espais al nombre linies:

61 linies -7 espais = 54 lnies

Tenim 54 lnies per repartir entre els blocs.

54 lnies : 8 blocs= 6,75

Recordem que hem de restar els decimals, llavors ens queden 6 lnies per bloc.

Solució del pas 5: 6 linies per bloc

Aquesta última acció altera de nou l'alt de la caixa.

6. MARGE INFERIOR I ALT DE CAIXA DEFINITIUS

Aquest és ja l'ùltim pas, simplement hem de multiplicar el nº de linies que tenim en cada bloc per el nombre de blocs per alt que tenim i sumar els espais restants.

6*8= 48    48+7=55   

Tenim un total de 55 lnies.

Ara ho multipliquem per l'internliniat per tal d'obtenir el nou alt de caixa.

55*3,883=213'565

Nou alt de caixa= 213,565 mm

Ara, calculem el nou marge inferior:

280-20-213,565= 46, 435 mm

Solució del pas 6:

Alt de caixa definitiu: 213,565 mm
Marge inferior definitiu: 46, 435 mm