L'ìndex ès simple de fer, amb la taula de continguts que explico aqui:
http://rtirado-crn.blogspot.com.es/2013/04/taula-de-continguts.html
16 de maig del 2013
Editar un llibre part 7: L'obra
Doncs bè, ara cal crear el que seria la obra, el text el tenim en documents .txt I tan sols cl obrir, seleccionar tot, copiar i enganxar, això sì, sempre recordant que l'inici de capìtol quedi a la dreta. i respectant els birlís, recordant que si quden molt poques linies al final del capìtol, bè, que ens hem d'espavilar, pero això no pasi, i en tot cas la pàgina que qued a l'esquerra de l'inici del capìtol quedi en blanc. igualement aquest text no l'ha donat el problema, i ara apliquem els estils com cal i au!, A fer l'ìndex
Llibre web "El misterio de la cripta embrujada"
El maleït Wuala no m'el deixa veure, sempre donant problemes aquest programa.
Doncs aqui, mès que mai és superimportant treballar amb el Site, i tenir la finestra d'Arxius oberta, ja que són molts arxius, i s'han d'enllçar entre ells.
Primer de tot crearem els estils CSS. Desprès agafarem els textos de continguts, i diferenciarem els diferents estils de capçalera, per a inici de capìtol, crec que tenia dos estils de capçalera, i ens assegurarem el text normal tingui classe paràgraf.
Desprès posarem altres elements del llibre, i hi col·locarem els estils CSS. Desprès crearem una taula de tres columnes i 1 fila, i hi col·locarem en el següent ordre, anterior ìndice siguiente, ho col·loquem a sota de tot de la primera pàgina, o copiem i ho enganxem a sota de tot de cada una de totes les pàgines i ara tocarà fer enllaços, de manera senzilla, per exemple, ens co·loquem a la pàgina 2, seleccionem anterior i en la finestra Propiedades, a l'apartat de links, estirem la fletxeta de target i la portem cap a la finestra Arxivos, a la pàgina 1, el mateix fem amb ìndice, però ho portem al arxiu índice (COMPTE, he dit arxiu índice, NO index). I lo mateix amb siguiente, però ho portem a la pàgina 3, Així amb totes les pàgines.
L' índex no recordo com s'editava...
Doncs aqui, mès que mai és superimportant treballar amb el Site, i tenir la finestra d'Arxius oberta, ja que són molts arxius, i s'han d'enllçar entre ells.
Primer de tot crearem els estils CSS. Desprès agafarem els textos de continguts, i diferenciarem els diferents estils de capçalera, per a inici de capìtol, crec que tenia dos estils de capçalera, i ens assegurarem el text normal tingui classe paràgraf.
Desprès posarem altres elements del llibre, i hi col·locarem els estils CSS. Desprès crearem una taula de tres columnes i 1 fila, i hi col·locarem en el següent ordre, anterior ìndice siguiente, ho col·loquem a sota de tot de la primera pàgina, o copiem i ho enganxem a sota de tot de cada una de totes les pàgines i ara tocarà fer enllaços, de manera senzilla, per exemple, ens co·loquem a la pàgina 2, seleccionem anterior i en la finestra Propiedades, a l'apartat de links, estirem la fletxeta de target i la portem cap a la finestra Arxivos, a la pàgina 1, el mateix fem amb ìndice, però ho portem al arxiu índice (COMPTE, he dit arxiu índice, NO index). I lo mateix amb siguiente, però ho portem a la pàgina 3, Així amb totes les pàgines.
L' índex no recordo com s'editava...
Alternative to ( l' entrada sembla que parli de Windows Movie Maker )
Em sembla que ja tinc entrada d'això pero per si de cas.
Ès una pàgina web superùtil que et troba una alternativa de programa, o sigui, tu hi escrius el nom d'un programa, i resulta que et mostra una llista amb tots el programes que fan la mateixa funciò.
Jo, per exemple, l'altre dia estava editant amb la major merda inventada per l'èsser humà (perdò per l'expressiò), estava editant video amb Windows Movie Maker, un programa que tè un 70% de possibilitats de penjar-se a cada acciò que facis, (per simple que sigui l'acciò). Vaig aconseguir editar un video, i no se com m'ho vaig fer, pero ja treia espuma per la boca, de tanta ràbia. De debò, recomano probar la mer... aquesta per saber de que parlo. De fet, buscant crìtiques a Internet (crìtiques, no solucions) vaig veure una comparaciò molt bona, deia aixì:
"Es como construir un castillo de naipes con un ventilador al lado"
I és cert, cap frase defineix millor lo fastigòs que és treballar amb aquest programa.
Bè, la qüestiò és que jo vull editar videos de videojocs, i ja que amb aquest programa no puc treballar, que vaig fer?
Vaig anar al Alternative to, i vaig buscar l'alternativa a Windows Movie Maker. Suposo que uitlitzarè el programa d'ediciò de video de Adobe, sembla fiable.
Vaja, el corrector ortogràfic no funciona.
Ès una pàgina web superùtil que et troba una alternativa de programa, o sigui, tu hi escrius el nom d'un programa, i resulta que et mostra una llista amb tots el programes que fan la mateixa funciò.
Jo, per exemple, l'altre dia estava editant amb la major merda inventada per l'èsser humà (perdò per l'expressiò), estava editant video amb Windows Movie Maker, un programa que tè un 70% de possibilitats de penjar-se a cada acciò que facis, (per simple que sigui l'acciò). Vaig aconseguir editar un video, i no se com m'ho vaig fer, pero ja treia espuma per la boca, de tanta ràbia. De debò, recomano probar la mer... aquesta per saber de que parlo. De fet, buscant crìtiques a Internet (crìtiques, no solucions) vaig veure una comparaciò molt bona, deia aixì:
"Es como construir un castillo de naipes con un ventilador al lado"
I és cert, cap frase defineix millor lo fastigòs que és treballar amb aquest programa.
Bè, la qüestiò és que jo vull editar videos de videojocs, i ja que amb aquest programa no puc treballar, que vaig fer?
Vaig anar al Alternative to, i vaig buscar l'alternativa a Windows Movie Maker. Suposo que uitlitzarè el programa d'ediciò de video de Adobe, sembla fiable.
Vaja, el corrector ortogràfic no funciona.
ePub Merge
Ès un petit "addon" per a calibre que permet fusionar dos o mès arxius epub, cosa que sembla ser que d'una altra manera no ès pot fer, o com a mìnim aquesta és la millor manera de fer-ho.
Una de dues, o se m'ha espatllat el corrector automàtic, o resulta que no tinc cap falta d'ortografia. Resulta que en la entrada anterior m'he fixat en les faltes d'ortografia que he comès, procurant que no es torni a repetir. Aquest últim text tampoc en te de faltes.
Una de dues, o se m'ha espatllat el corrector automàtic, o resulta que no tinc cap falta d'ortografia. Resulta que en la entrada anterior m'he fixat en les faltes d'ortografia que he comès, procurant que no es torni a repetir. Aquest últim text tampoc en te de faltes.
Sigil
SIGIL és un programa per editar un llibre electrònic, és bastant senzill i intuïtiu.
Te el seu menú superior (com la majoria de programes), la pantalla principal (com la majoria de programes), i in menú lateral esquerre en el que hi apareixen els arxius i pàgines, en diferents apartats. Igual que en una pàgina web tenim per una banda els arxius .html, en una altra els imatges en la carpeta img i en una altra altres arxius, i bla bla, aquí ens apareix un pràctic mapa de carpetes i arxius, molt pràctic.
Utilitzar-lo és senzill, la pràctica que vaig haver de fer es tracta de passar el llibre web "El misterio de la cripta embrujada" a format ePub amb aquest programet. És simple, tan sols vaig haver de crear un munt de pàgines des de el menú esquerre, cada pàgina representat un capítol, i desprès amb EL LLIBRE ACABAT EN DREAMWEAVER (no abans), anar en el mode de codi html de sigil i seleccionar tot el body, anar al Dreamweaver, seleccionar en el codi html tot el que hi hagi dintre del body,copiar, i enganxar en la part seleccionada del codi html de sigil. Ja tenim un capitolet fet. Doncs au!, Següent capítol.
Per fer l 'índex, primer hem de tenir acabat el contingut, llavors cal anar a Tabla de contenido (toc), per editar-lo.
I per últim, podem donar una naturalesa al una pàgina (portada, epíleg, contingut, etc) fent clic dret damunt d'aquesta i desprès "añadir concepto".
Te el seu menú superior (com la majoria de programes), la pantalla principal (com la majoria de programes), i in menú lateral esquerre en el que hi apareixen els arxius i pàgines, en diferents apartats. Igual que en una pàgina web tenim per una banda els arxius .html, en una altra els imatges en la carpeta img i en una altra altres arxius, i bla bla, aquí ens apareix un pràctic mapa de carpetes i arxius, molt pràctic.
Utilitzar-lo és senzill, la pràctica que vaig haver de fer es tracta de passar el llibre web "El misterio de la cripta embrujada" a format ePub amb aquest programet. És simple, tan sols vaig haver de crear un munt de pàgines des de el menú esquerre, cada pàgina representat un capítol, i desprès amb EL LLIBRE ACABAT EN DREAMWEAVER (no abans), anar en el mode de codi html de sigil i seleccionar tot el body, anar al Dreamweaver, seleccionar en el codi html tot el que hi hagi dintre del body,copiar, i enganxar en la part seleccionada del codi html de sigil. Ja tenim un capitolet fet. Doncs au!, Següent capítol.
Per fer l 'índex, primer hem de tenir acabat el contingut, llavors cal anar a Tabla de contenido (toc), per editar-lo.
I per últim, podem donar una naturalesa al una pàgina (portada, epíleg, contingut, etc) fent clic dret damunt d'aquesta i desprès "añadir concepto".
29 d’abril del 2013
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
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.
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.
(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.
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.
26 d’abril del 2013
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.
-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.
21 d’abril del 2013
C5: Aplicar una retìcula a l'InDesign
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.
20 d’abril del 2013
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'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;
Qwertyuiopasdfghjklñzxcvbnm1234567890'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;
Qwertyuiopasdfghjklñzxcvbnm1234567890'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;
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.
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ÌTOL2Qwertyuiopasdfghjklñzxcvbnm1234567890'¡!"·$%&/()=?¿`+´ç,.-<>^*¨Ç_:;
3
CAPÌTOL3Qwertyuiopasdfghjklñ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.
7 d’abril del 2013
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
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
15 de març del 2013
Editar un llibre part 6: Comencem a ficar-hi text
Primer de tot agafem l'estil de pàgina mestra per defecte, (el que ve totalment buit), i l'apliquem sobre les pàgines 1 i 2, que sòn les de cortesia i per tant van buides.
A la portadeta tambè hi afegim l'estil buit, hi posem una caixa de text que d'ample vagi de marge a marge i d'alt a 75 mm comptant desde avall. Just al centre i escribim EL MISTERIO DE LA CRIPTA EMBRUJADA en versaletes.
Insertem dues pàgines sense estil, en la de la dreta hi posem el nom de l'obra altre cop, però aquest cop hi afegim a sota d'aquest el nom de l'autor, això ès la portada.
Tornem a insertar dues pàgines mès i a la 6 hi enganexem el text Drets, que ens ve donat en la carpeta de materials. Ara toca crear els estils de paràgraf tal icom s'ens indica en un dels textos inclòs en la carpeta de materials. Ara hi afegim el txt pròleg a la pàgina 9, hi apliquem els estils de paràgraf als textos posats fins ara.
La firma de pròleg la ficarem a la part inferior de la pàgina a base de salt de carro.
A la portadeta tambè hi afegim l'estil buit, hi posem una caixa de text que d'ample vagi de marge a marge i d'alt a 75 mm comptant desde avall. Just al centre i escribim EL MISTERIO DE LA CRIPTA EMBRUJADA en versaletes.
Insertem dues pàgines sense estil, en la de la dreta hi posem el nom de l'obra altre cop, però aquest cop hi afegim a sota d'aquest el nom de l'autor, això ès la portada.
Tornem a insertar dues pàgines mès i a la 6 hi enganexem el text Drets, que ens ve donat en la carpeta de materials. Ara toca crear els estils de paràgraf tal icom s'ens indica en un dels textos inclòs en la carpeta de materials. Ara hi afegim el txt pròleg a la pàgina 9, hi apliquem els estils de paràgraf als textos posats fins ara.
La firma de pròleg la ficarem a la part inferior de la pàgina a base de salt de carro.
Editar un llibre part 5: Contingut i normes d'ediciò
Ara cal organitzar el contingut del llibre, sobre el qual s'hi aplicaràn uns estils de pàgina mestra i estils de paràgraf.
El contingut ès el següent:
p-1-2: Pàgines de cortesia
p- 3: Portadeta
p- 4: Contraportada
p- 5: Portada
p-6: Crèdits i drets
p-7 Index
p- 9 Pròleg
A partir de la pàgina 10 ja hi va l'obra.
Desprès de l'obra, un parell de pàgines de cortesia mès, com al prìncipi.
Normes d'ediciò:
Inicis de capitol: SEMPRE a la dreta.
En cas de faltar pàgines per al plec:
-Es pot prescindir de pàgines de cortesia.
-Es poden afegir pàgiens de cortesia.
-Es pot trencar la normar d'inici de capìtols.
El contingut ès el següent:
p-1-2: Pàgines de cortesia
p- 3: Portadeta
p- 4: Contraportada
p- 5: Portada
p-6: Crèdits i drets
p-7 Index
p- 9 Pròleg
A partir de la pàgina 10 ja hi va l'obra.
Desprès de l'obra, un parell de pàgines de cortesia mès, com al prìncipi.
Normes d'ediciò:
Inicis de capitol: SEMPRE a la dreta.
En cas de faltar pàgines per al plec:
-Es pot prescindir de pàgines de cortesia.
-Es poden afegir pàgiens de cortesia.
-Es pot trencar la normar d'inici de capìtols.
Editar un llibre part 4: Les linies de text
Si tinguesim menys de 10 paraules per linia ens costaria mès torbar sentit a les frases ja que el salt de linia ens tallaria masa freqüentment, si fossin mès ens perdriem en les frases.
Ara colocarem les linies de text basant-nos en el cos i l'interlineat de les lletres, que seràn 9 i 11 pt respectivament. Anem a Preferencias> cuadriculas i indiquem que comenci al marge superior, amb inici de 11pt i un increment 11 pt (l'interlineat). I ara per visualitzar aquestes guies que acabem de crear: Ver>Cuadrìculas y guias>Mostrar cuadrìcula base.
Ara colocarem les linies de text basant-nos en el cos i l'interlineat de les lletres, que seràn 9 i 11 pt respectivament. Anem a Preferencias> cuadriculas i indiquem que comenci al marge superior, amb inici de 11pt i un increment 11 pt (l'interlineat). I ara per visualitzar aquestes guies que acabem de crear: Ver>Cuadrìculas y guias>Mostrar cuadrìcula base.
 |
| Menèu de Preferèncias |
Editar un llibre part 3: Pàgines mestres
Primer de tot cal planificar l'espai, el tamany del document i marges ja ens venen donats del complex càlcul de la Part 1, Ara planificarem l'espai dede la Pàgina mestra de l'InDesign.
Quins elements hi van?
Nom d el'autor i de l'obra com a capçalera, un a la pàgina dreta i l'altre a l'esquerra. Aixì doncs ho fiquem a la capaçalera de la pàgina mestra.
Pero realment... totes les pàgines tindràn capçalera? No, la pagina d'nici de capitol MAI ha de portar capçalera, ni tampoc les pàgines de cortesia (bè es que aquestes ni porten res de res) Aixì podem deduir que com a mìnim tenim dos estils de pàgina, doncs hem de crear de moment dos estils de pàgina mestra. A la pàgina mestra de la capçalera (a partir d'ara l'anomenarem A) li afegirem un altre element comù i invariable entre totes les pàgines, la foliaciò. I ja està feta la pàgina mestra A, que serà la mès comuna.
Ara farem un disseny especial per a les pàgines birlì, simplement dupliquem la, pàgina mestra A, i li traiem la foliaciò, aquest estil s'aplicarà a les pàgines birlì, o sigui pàgines en les la caixa de text s'ens quedi molt curta. Però si es tracta demenys d'unes cinc linies, no les podem posar en una sola pàgina, s'haurà d'intentar col·locar a la pàgina anterior. A la pàgina dreta de l'estil B hi ficarem l'estil per a l'inici de capitol, simplement, tindrà foliaciò però no capçalera
Ara farem una trecera pàgina mestra d'una sola pa`gina, que serà com la birlì de l'estil B. Capçalera si, foliaciò no.
Aqui tinc les imatges, les linies encara no haurien de sotir, en una altra entrad ja explicarè com es posen i perque.
Quins elements hi van?
Nom d el'autor i de l'obra com a capçalera, un a la pàgina dreta i l'altre a l'esquerra. Aixì doncs ho fiquem a la capaçalera de la pàgina mestra.
Pero realment... totes les pàgines tindràn capçalera? No, la pagina d'nici de capitol MAI ha de portar capçalera, ni tampoc les pàgines de cortesia (bè es que aquestes ni porten res de res) Aixì podem deduir que com a mìnim tenim dos estils de pàgina, doncs hem de crear de moment dos estils de pàgina mestra. A la pàgina mestra de la capçalera (a partir d'ara l'anomenarem A) li afegirem un altre element comù i invariable entre totes les pàgines, la foliaciò. I ja està feta la pàgina mestra A, que serà la mès comuna.
Ara farem un disseny especial per a les pàgines birlì, simplement dupliquem la, pàgina mestra A, i li traiem la foliaciò, aquest estil s'aplicarà a les pàgines birlì, o sigui pàgines en les la caixa de text s'ens quedi molt curta. Però si es tracta demenys d'unes cinc linies, no les podem posar en una sola pàgina, s'haurà d'intentar col·locar a la pàgina anterior. A la pàgina dreta de l'estil B hi ficarem l'estil per a l'inici de capitol, simplement, tindrà foliaciò però no capçalera
Ara farem una trecera pàgina mestra d'una sola pa`gina, que serà com la birlì de l'estil B. Capçalera si, foliaciò no.
Aqui tinc les imatges, les linies encara no haurien de sotir, en una altra entrad ja explicarè com es posen i perque.
 |
| Pàgina mestra A |
 |
| Pàgina mestra B |
 |
| Pàgina mestra C |
Fons de pàgina Web professional Div in Div
Un fons de pàgina xulo de veritat, no està fet amb un simple "aplicar imatge o color de fons", està fet amb diferents imatges de fons
Està seccionat en diferents imatges de fons (capçalera, menù, fons general, diferents seccions de caixa de text, interseccions de seccions de text, etc)
Per poder-ho realitzar, s'utilitza el que jo anomeno Div in Div, o sigui un Div que està dintre de un altre Div.
Què és un Div?
Primer de tot cal que expliqui que és un Div. és una caixa de contingut, on hi podem ficar a dintre fins i tot un o més Divs, al crear un Div, és crea un estil ID per aquest de manera automàtica, de manera que cal donar-li una ID que resumeixi la seva funciò o contingut (fons, menú, ovelleta, etc)
Doncs bè, aqui poso un exemple de com crear un fons a lo professional.
Creem una capçalera, que estarà composada per tres Divs.
Primer de tot crearem el Div capçalera, (que anomenarem "top") desde el codi HTML
<div id="top"></div>
Ara copiem aquest codi i l'enganexem dintre del mateix:
<div id="cap"><div id="cap"></div></div>
Separem i tabulem de manera que l'ùltim div quedi a dintre del primer
<div id="top">
<div id="top"></div>
</div>
Ara creem dos Divs mès a dintre del primer:
<div id="top">
<div id="top"></div>
<div id="top"></div>
<div id="top"></div>
</div>
I això se suposa que és el el Div top amb les seves seccions a dintre. Les seccions són una part superior que anomenarem "cap", una intermitja que anomenarem "barra", i una altra inferior per al contingut, que anomenarem "diapositiva" (perque estic parlant del treball web últim que vaig fer, i aqui hi va una diapositiva), aixì que ara nomès cal posar aquests IDs als DIVS interns, de la següent manera.
<div id="top">
<div id="cap"></div>
<div id="barra"></div>
<div id="diapositiva"></div>
</div>
I tot això ès tan sols la capçalera, ara crearem una altre Div anomenat Contingut, que anirà a sota de la capçalera. Aquest Div és on hi va doncs, el contingut ( no cal ser un geni eh?), el text que parla de diferents temes, un de com s'està desfent l'Àrtic, una ltre de l'extracciò de petroli a lÀrtic (la pàgina tracta de lÀrtic), un altre sobre els conflictes entre els diferents països per destrossar l'ârtic per interessos propis, un alre sobre la pesca a l'Àrtic i un altre sobre que hi podem fer nosaltres per salvar l'Àrtic.
Aixì doncs crearem el Div Contingut, i hi afegim les diferents seccions tal i com fet amb el top.
Els IDs que aplicarem serán els següents:
desfent
petroli
conflicte
pesca
actua
Hauria de quedar aixì:
<div id="contingut">
<div id="desfent"></div>
<div id="petroli"></div>
<div id="conflicte"></div>
<div id="pesca"></div>
<div id="actua"></div>
</div>
Ara anirem a la finestra d'estils, on s'haurà creat un estil ID per a cadascùn d'aquests Divs, i hi aplicarem en cadascún la seva imatge de fons de la carpeta img.
Ara, ja acabat el Div "contingut" crearem un Div anomenat "peu" que farà la funciò de peu de pàgina.
I ara crearem un nou Div, que anomenarem "body" i abarcarà tot el body. Ara ho coloquem els Divs "top", "contingut" i "peu" a dintre de "body".
Aixì hauria de quedar
<div id= "body">
<div id="top">
<div id="top"></div>
<div id="top"></div>
<div id="top"></div>
</div>
<div id="contingut">
<div id="desfent"></div>
<div id="petroli"></div>
<div id="conflicte"></div>
<div id="pesca"></div>
<div id="actua"></div>
</div>
<div id= "peu"></div>
</div>
Ara podem col·locar imatges on volguem, col·locant-les dintre d'un Div PA, (no Div)
En un altre entrada explicarè el tema del posicionament d'elements web.
Està seccionat en diferents imatges de fons (capçalera, menù, fons general, diferents seccions de caixa de text, interseccions de seccions de text, etc)
Per poder-ho realitzar, s'utilitza el que jo anomeno Div in Div, o sigui un Div que està dintre de un altre Div.
Què és un Div?
Primer de tot cal que expliqui que és un Div. és una caixa de contingut, on hi podem ficar a dintre fins i tot un o més Divs, al crear un Div, és crea un estil ID per aquest de manera automàtica, de manera que cal donar-li una ID que resumeixi la seva funciò o contingut (fons, menú, ovelleta, etc)
Doncs bè, aqui poso un exemple de com crear un fons a lo professional.
Creem una capçalera, que estarà composada per tres Divs.
Primer de tot crearem el Div capçalera, (que anomenarem "top") desde el codi HTML
<div id="top"></div>
Ara copiem aquest codi i l'enganexem dintre del mateix:
<div id="cap"><div id="cap"></div></div>
Separem i tabulem de manera que l'ùltim div quedi a dintre del primer
<div id="top">
<div id="top"></div>
</div>
Ara creem dos Divs mès a dintre del primer:
<div id="top">
<div id="top"></div>
<div id="top"></div>
<div id="top"></div>
</div>
I això se suposa que és el el Div top amb les seves seccions a dintre. Les seccions són una part superior que anomenarem "cap", una intermitja que anomenarem "barra", i una altra inferior per al contingut, que anomenarem "diapositiva" (perque estic parlant del treball web últim que vaig fer, i aqui hi va una diapositiva), aixì que ara nomès cal posar aquests IDs als DIVS interns, de la següent manera.
<div id="top">
<div id="cap"></div>
<div id="barra"></div>
<div id="diapositiva"></div>
</div>
I tot això ès tan sols la capçalera, ara crearem una altre Div anomenat Contingut, que anirà a sota de la capçalera. Aquest Div és on hi va doncs, el contingut ( no cal ser un geni eh?), el text que parla de diferents temes, un de com s'està desfent l'Àrtic, una ltre de l'extracciò de petroli a lÀrtic (la pàgina tracta de lÀrtic), un altre sobre els conflictes entre els diferents països per destrossar l'ârtic per interessos propis, un alre sobre la pesca a l'Àrtic i un altre sobre que hi podem fer nosaltres per salvar l'Àrtic.
Aixì doncs crearem el Div Contingut, i hi afegim les diferents seccions tal i com fet amb el top.
Els IDs que aplicarem serán els següents:
desfent
petroli
conflicte
pesca
actua
Hauria de quedar aixì:
<div id="contingut">
<div id="desfent"></div>
<div id="petroli"></div>
<div id="conflicte"></div>
<div id="pesca"></div>
<div id="actua"></div>
</div>
Ara anirem a la finestra d'estils, on s'haurà creat un estil ID per a cadascùn d'aquests Divs, i hi aplicarem en cadascún la seva imatge de fons de la carpeta img.
Ara, ja acabat el Div "contingut" crearem un Div anomenat "peu" que farà la funciò de peu de pàgina.
I ara crearem un nou Div, que anomenarem "body" i abarcarà tot el body. Ara ho coloquem els Divs "top", "contingut" i "peu" a dintre de "body".
Aixì hauria de quedar
<div id= "body">
<div id="top">
<div id="top"></div>
<div id="top"></div>
<div id="top"></div>
</div>
<div id="contingut">
<div id="desfent"></div>
<div id="petroli"></div>
<div id="conflicte"></div>
<div id="pesca"></div>
<div id="actua"></div>
</div>
<div id= "peu"></div>
</div>
Ara podem col·locar imatges on volguem, col·locant-les dintre d'un Div PA, (no Div)
En un altre entrada explicarè el tema del posicionament d'elements web.
Enllaços HTML
Es poden tractar desde la finestra d'estils, on hi podem canviar els estats.
Els estats dels enllaços són 4:
-a: link: És l'estat normal, com trobem un link quan no s'ha tocat.
-a: visited: L'estat en que es troba un link quan ja ha estat visitat.
-a: hover: Ès com es troba un link quan hi pases pel damunt però sense clickar.
-a. active: El link mentre hi estas clickant, però mantenint el click.
"a:" es refereix enllaç.
Els estats dels enllaços són 4:
-a: link: És l'estat normal, com trobem un link quan no s'ha tocat.
-a: visited: L'estat en que es troba un link quan ja ha estat visitat.
-a: hover: Ès com es troba un link quan hi pases pel damunt però sense clickar.
-a. active: El link mentre hi estas clickant, però mantenint el click.
"a:" es refereix enllaç.
Traçats de Preps
Doncs bè, això tan sols son captures d epantalla fetes a l'ùltim moment, tampoc explicarè ara com les he fet cadascùn d'aquests trçats, no tinc temps, aixì que farè un resum general. Primer de tot aquest any trobo que m'ha anat molt millor que l'any passat, encara aiì el tiro-retiro amb prpes no el porto bè del tot, pero estic orgullosa de mi mateixa i dels resultats, i se que el meu dubte amb tiro-retiro el resodrè en un no res, perque la diferència entre aquest any i l'any passat, esque l'any passat ja tenia malament les bases.
18 de febrer del 2013
La cripta embrujada, de Eduardo Mendoza
Visualitza el llibre
Bè, crec que no exactament aixì com s'havia de pujar l'entrada... es que el dia que es va explicar com pujar aquest treball estava masa mandrosa per prendre apunts i ara no recordo res.....
T.T Espero que això em serveixi de lliçò T.T
Visualitza el llibre
Bè, crec que no exactament aixì com s'havia de pujar l'entrada... es que el dia que es va explicar com pujar aquest treball estava masa mandrosa per prendre apunts i ara no recordo res.....
T.T Espero que això em serveixi de lliçò T.T
Visualitza el llibre
8 de febrer del 2013
Editar un llibre: Part 2 Plec de principis
Ès la primera part del llibre, unes pàgines dedicades en si a continguts esencials del llibre i que normalment van abans del contingut propi del llibre (Podem torbar exepcions com ara l'ìndex, que a vegades ens apareix desprès de la novel.la).
Com que tinc presa i totes les normes del plec de principis en un pdf, no vaig explicar-les ara, sinò que començarè a explicar l'elaboraciò del llibre en una altra entrada.
Com que tinc presa i totes les normes del plec de principis en un pdf, no vaig explicar-les ara, sinò que començarè a explicar l'elaboraciò del llibre en una altra entrada.
1 de febrer del 2013
Editar un llibre: Part 1 Esbrinar els marges de la pàgina
Primer de tot hem de trobar uns marges, peró no ès tan sencill com fer-ho al atzar i au!, s'ha de fer proporcionalment al tamany de la pàgina.
Primer de tot he hagut de fer uns quants càlculs, he hagut d'averiguar l'ample de la pàgina. Per això m'han donat l'alçada i la proporciò: 200mm d'alt amb proporciò DIN (7:5).
Ara tan sols es tracta de fer una regla de 3, el llibre ès vertical per tant l'alt és major que l'ample i llavors li pertany el 7, mentre que a X li pertany el 5.
Tambè podem fer el que yo anomeno factor mìnim de proporciò, que obtenim al dividir els nombres que apareixen en la proporciò, o sigui dividim 7/5 i ens resulta 1,4.
Aara, sabent que l'ample que ens falta ès més petit que l'alt que tenim, dividirem aquest ùltim entre 1,4 i em resulta 140 (aproximadament).
Ara ja sabem les mides de la pàgina, ès hora d'esbrinar els marges, obrim un document amb lIllustrator que faci les mides 200x140mm.
Ara, verticalemnt dividim el document en set franjes i colorejem les 5 centrals, i travessem tota la pàgina amb una diagonal, desprès farem un rectangle que d'alt ocuparà les 5 franjes i d'ample fins que coincideixi amb la diagonal,tot tal i com mostra la imatge:
Ara desem aquest document i obrim un altre que faci el doble d'ample que l'anterior (140x2=280), ès a doble pàgina.
Ara farem servir un mètode anomenat Van Der Graf.
Primer de tot farem una lìnia vertical just em l'eix de l'ample de la pàgina, simulant una doble pàgina, cadascuna amb el tamany de l'anterior.
2. Ara de la part superior de la lìnia farem una diagonal cap a la cantonada inferior dreta del document, i desde aquesta cantonada una altra diagonal cap a la cantonada superior esquerra.
Ha de quedar tal i com es mostra a la imatge superior.
4. Ara tornem a l'anterior document, (el d'una pàgina) i copiem el recatangle final que hem fet. Ara tornem al document de doble pàgina i enganxem el rectangle i l'enganxem tal i com surt a la imatge anterior, l'important ès saber situar la cantonada dreta superior del cantò esquerre i la cantonada superior esquerra del cantò dret, han de coincidir just on si creuen aquelles lìnies, tal i com mostra la imatge, que per això hem fet totes aquelles lìnies, per fer aquesta coincidència de lìnies.
5. Ara tenim una representaciò d'un document a doble pàgina amb les seves caixes de contingut, ara ja podem esbrinar els marges, aixì esbrinem marges i ens els apuntem en algun lloc, ja que sòn els marges que posarem per al document real en InDesign.
Primer de tot he hagut de fer uns quants càlculs, he hagut d'averiguar l'ample de la pàgina. Per això m'han donat l'alçada i la proporciò: 200mm d'alt amb proporciò DIN (7:5).
Ara tan sols es tracta de fer una regla de 3, el llibre ès vertical per tant l'alt és major que l'ample i llavors li pertany el 7, mentre que a X li pertany el 5.
Tambè podem fer el que yo anomeno factor mìnim de proporciò, que obtenim al dividir els nombres que apareixen en la proporciò, o sigui dividim 7/5 i ens resulta 1,4.
Aara, sabent que l'ample que ens falta ès més petit que l'alt que tenim, dividirem aquest ùltim entre 1,4 i em resulta 140 (aproximadament).
Ara ja sabem les mides de la pàgina, ès hora d'esbrinar els marges, obrim un document amb lIllustrator que faci les mides 200x140mm.
Ara, verticalemnt dividim el document en set franjes i colorejem les 5 centrals, i travessem tota la pàgina amb una diagonal, desprès farem un rectangle que d'alt ocuparà les 5 franjes i d'ample fins que coincideixi amb la diagonal,tot tal i com mostra la imatge:
Ara desem aquest document i obrim un altre que faci el doble d'ample que l'anterior (140x2=280), ès a doble pàgina.
Ara farem servir un mètode anomenat Van Der Graf.
Primer de tot farem una lìnia vertical just em l'eix de l'ample de la pàgina, simulant una doble pàgina, cadascuna amb el tamany de l'anterior.
Ara ens situem de nou sobre la part superior de la lìnia central i hi fem una diagonal cap a la cantonada inferior esquerra, i desde aquesta una altra cap a la cantonada superior dreta.
3. Uff... a veure com explico això, ara ens situem en el punt on ès troben les dues lìnies que hem fet en el pas 2, agafarem les del cantó esquerre per exemple, i hi fem una lìnia vertical que anirà fins al lìmit superior del document i desde aquest ùltim punt una altra cap al punt on es troben les dues lìnies del pas 2 del cantò dret. Ara fem lo mateix desde el cantò dret.
5. Ara tenim una representaciò d'un document a doble pàgina amb les seves caixes de contingut, ara ja podem esbrinar els marges, aixì esbrinem marges i ens els apuntem en algun lloc, ja que sòn els marges que posarem per al document real en InDesign.
22 de gener del 2013
Tipus d'estils CSS
Són tres, i es defineixen per la manera sobre com s'aplicaràn.
Etiqueta: S'aplica a elements HTML, com ara paràgrafs (p), capçaleres (h1,2,..7), body, table,il.. etc. Al crear un estil per a un d'aquests elements s'aplicarà automàticament a tots els elements d'aquest tipus que contingui la pàgina, per exemple si faig un estil per a un paràgraf p {font-style: Arial;}, a tots els paràgrafs que contingui la pàgina se m'aplicarà una font Arial.
ID: Molt fàcil dentendre, moltes vegades al crear un element HTML; ens demanarà donar-li un nom que el defineixi, una Identitat, el que fem al crear un estil ID és crear un estil que porti el nom de l'element, i l'estil s'aplicarà unicament a aquest. Jo ara creo una caixa anomenada caixa1, tambés ens creo 3 mès (caixa2, caixa3, caixa4), ara creo un estil que s'anomenarà #caixa1(el # ha d'anar just davant per definir qie un estil ès un ID), #caixa1 {font-style: Arial;}, tot els text de la caixa 1 pasarà a ser Arial.
Classe: Aquest possiblement sigui el mès simple i fàcil d'entendre, s'ans aplicarà allà on volguem, nomès cal seleccionar o senyalar la part o element on volem aplicar aquest estil, i clickar damunt del nom de l'estil. Per crear-ne un .elnomquelivulguisposar {font-style: Arial;}, aqui és imprescindible posar el punt davant, de la mateixa manera que ID necessita #.
Ara que ja he explicat tant bè com he poguts els tres tipus estils CSS que hi han, explicarè com crear-los i aplicar-los.
Crear-los
En la finestra de CSS, en la finestreta on va la llista d'estils fem click dret i Nuevo... , ara de la llista desplegable triem quin tipus d'estil farem i li donem un nom, recordant sempre que:
- Si ès etiqueta no li podem inventar un nom sinò que hem d'escriure un element HTML.
(p,h1,body,ul, etc).
- Que si ès clase sigui el nom que sigui, al davant sempre hi va un punt (.exemple).
-I si ès ID anirà amb un # al davant (#exemple).
-Per norma general cap etiqueta ha d'anar amb accents, comes, espais o caràcters especials com ara ñ o ç, per separar paraules podem utilitzar _ (exemple-d_etiqueta).
Un cop explicat com començar a crear una etiqueta no cal explicar com aplicar-li caracterìstiques ja que el cuadre de diàleg de Dreamweaver pper crear estils ès sencillisim d'utilitzar, en tot cas puc dir que les caràcteritiques bàsiques es troben a la primera pestanya (Tipo), les alineacions de text i sangries a Bloque i que cal donar a Aplicar perque s'apliquin els canvis. I tambè que fent doble click sobre el nom de l'estil podem tornar a obrir el cuadre de diàleg per aixì fer algùn canvi.
Aplicar-los
Això ho farem desde la finestra Propiedades, però en l'apartat CSS, com podem veure en la imatge de dalt, ens mostra els diferents tipus d'estil.
-Formato: Ès refereix a etiqueta. Per defecte Dreamweaver pot reconeixer tot el text com a paràgraf, i per tant aplicarà automaticament les caracterìsqiques que tinguem a l'estil p a tot el text, si per exemple hem creat un estil d'etiqueta per a un titular (per exemple h2), nomès cal seleccionar el titular, desplegar la llista de la pestanya i seleccionar Encabezado 2.
-ID: O bè s'aplica automàticament als elements que tinguin la ID o bè si encara no hi ha cap element amb la ID podem fer com amb l'estil etiqueta.
-Classe: Seleccionar i triar estil de la llista desplegable.
Etiqueta: S'aplica a elements HTML, com ara paràgrafs (p), capçaleres (h1,2,..7), body, table,il.. etc. Al crear un estil per a un d'aquests elements s'aplicarà automàticament a tots els elements d'aquest tipus que contingui la pàgina, per exemple si faig un estil per a un paràgraf p {font-style: Arial;}, a tots els paràgrafs que contingui la pàgina se m'aplicarà una font Arial.
ID: Molt fàcil dentendre, moltes vegades al crear un element HTML; ens demanarà donar-li un nom que el defineixi, una Identitat, el que fem al crear un estil ID és crear un estil que porti el nom de l'element, i l'estil s'aplicarà unicament a aquest. Jo ara creo una caixa anomenada caixa1, tambés ens creo 3 mès (caixa2, caixa3, caixa4), ara creo un estil que s'anomenarà #caixa1(el # ha d'anar just davant per definir qie un estil ès un ID), #caixa1 {font-style: Arial;}, tot els text de la caixa 1 pasarà a ser Arial.
Classe: Aquest possiblement sigui el mès simple i fàcil d'entendre, s'ans aplicarà allà on volguem, nomès cal seleccionar o senyalar la part o element on volem aplicar aquest estil, i clickar damunt del nom de l'estil. Per crear-ne un .elnomquelivulguisposar {font-style: Arial;}, aqui és imprescindible posar el punt davant, de la mateixa manera que ID necessita #.
Ara que ja he explicat tant bè com he poguts els tres tipus estils CSS que hi han, explicarè com crear-los i aplicar-los.
Crear-los
En la finestra de CSS, en la finestreta on va la llista d'estils fem click dret i Nuevo... , ara de la llista desplegable triem quin tipus d'estil farem i li donem un nom, recordant sempre que:
- Si ès etiqueta no li podem inventar un nom sinò que hem d'escriure un element HTML.
(p,h1,body,ul, etc).
- Que si ès clase sigui el nom que sigui, al davant sempre hi va un punt (.exemple).
-I si ès ID anirà amb un # al davant (#exemple).
-Per norma general cap etiqueta ha d'anar amb accents, comes, espais o caràcters especials com ara ñ o ç, per separar paraules podem utilitzar _ (exemple-d_etiqueta).
Un cop explicat com començar a crear una etiqueta no cal explicar com aplicar-li caracterìstiques ja que el cuadre de diàleg de Dreamweaver pper crear estils ès sencillisim d'utilitzar, en tot cas puc dir que les caràcteritiques bàsiques es troben a la primera pestanya (Tipo), les alineacions de text i sangries a Bloque i que cal donar a Aplicar perque s'apliquin els canvis. I tambè que fent doble click sobre el nom de l'estil podem tornar a obrir el cuadre de diàleg per aixì fer algùn canvi.
Aplicar-los
Això ho farem desde la finestra Propiedades, però en l'apartat CSS, com podem veure en la imatge de dalt, ens mostra els diferents tipus d'estil.
-Formato: Ès refereix a etiqueta. Per defecte Dreamweaver pot reconeixer tot el text com a paràgraf, i per tant aplicarà automaticament les caracterìsqiques que tinguem a l'estil p a tot el text, si per exemple hem creat un estil d'etiqueta per a un titular (per exemple h2), nomès cal seleccionar el titular, desplegar la llista de la pestanya i seleccionar Encabezado 2.
-ID: O bè s'aplica automàticament als elements que tinguin la ID o bè si encara no hi ha cap element amb la ID podem fer com amb l'estil etiqueta.
-Classe: Seleccionar i triar estil de la llista desplegable.
Finestra CSS
La finestra CSS, és una altra manera d'afegir caracterìstiques a un estil CSS, però dede la interfìcie, molt mès sencill, ja que allà ja ens venen donades les caracterìstiques i nosaltres nomès ens hem d'encarregar de donar uns valors en cas de voler-les, no ès com en el codi, que ens hem de coneixer el codi especìfic i no cometre cap errada. Encara aixì el codi ens seguirà sent ùtil per percebre erros amb mès facilitat que ho fariem desde la interfècie.Ès molt fàcil d'utilitzar, per visualitzar-lo només hem d'anar a Ventana > Estilos CSS. Llavors ens sortirà el que a partir d'ara anomenarem Finestra CSS.
Aquesta ès la finestra CSS, a partir d'ara serà un altre element indispensable, per cert hem de procurar que estigui en la pestanya Todo, tal i com es mostra en la imatge superior.
Aqui, com podem veure, tenim 3 estils, i ens està mostrant les caracterìstiques d'un d'ells, podem canaviar una de les caracterìstiques existents fent doble click al damunt d'aquesta, o afegint-ne de noves fent doble click damunt de l'estil on volem afegir les caracterìstiques.
 |
| Aquesta ès la finestra que ens apareix al fer doble click damunt d'un estil. |
12 de gener del 2013
Editar un llibre
Aquest treball serà una mica llarg i per tant he creat una etiqueta especìfica per a aquest treball.
Es tracta de editar un llibre, un treball que m'interessa molt ja que resulta que tinc un llibre descarregat d'internet que m'agrada molt, i seria una idea estupenda editarlo i convertir-lo en llibre de veritat.
Aquest treball es divideix en diverses parts, i per tant les pujarè en diverses entrades, totes amb l'etiqueta llibre.
Es tracta de editar un llibre, un treball que m'interessa molt ja que resulta que tinc un llibre descarregat d'internet que m'agrada molt, i seria una idea estupenda editarlo i convertir-lo en llibre de veritat.
Aquest treball es divideix en diverses parts, i per tant les pujarè en diverses entrades, totes amb l'etiqueta llibre.
11 de gener del 2013
Traçats: Separació de colors
ja que ens serveix per identificar quina tinta correspon a la forma impressora.
Sense aquesta marca diria que es
impossible (o molt dìficil) esbrinar quina tinta pertany a cada tinta pertany a cada forma impressora, les planxes per exemple, no ens surtirà la planxa del Cian en color cian, o la del Groc en groc, totes surten del mateix color, llavors en aquest bloc, la C de cian està feta només de 100% de Cian i res més que cian, llavors al fer la planxa del Cian, només surtirà la C, perque de la mateixa manera que C només porta cian, Y només porta groc, K només porta negre i M només porta magenta, ès bastant senzill no?
9 de gener del 2013
CSS
Els estils CSS ( Cascade Style Sheets), o sigui fulls d'estil en cascada, diguem que representen els estils que trobarem en els elements d'una web, per dir-ho d'una altra manera, una pàgina web es composa de:
-HTML: L'estructura del document.
-CSS: Els estils del document.
De pares a fills.
A més els estils CSS funcionen més o menys com un arbre genealògic, la informaciò es transmet de pares a fills, amb això vull dir que jo per exemple tinc un document amb fons blanc, i aquest document contè dintre seu tres elements, una capçalera, una caixa de text i una imatge, aquests tres serien els fills del document, doncs tots tres hereden el fons blanc del pare. Igualment sempre podem canviar els estils d'alguns elements.
L'estructura
Ara explicaré l'estructura que ha de tenir un estil CSS escrit desde la part del codi.p { font-size: 14px; font-color: #000; line-heigth: 16px;} Ara explico, primer de tot he posat el nom de l'estil, en aquest cas p, que es refereix a paràgraf i que llavors generalment s'aplicarà a tots els paràgrafs del document, el nom va seguit d'un espai i desprès obrim un { on a dins hi ficarem totes les caracteristiques de p, no cal que expliqui les caracteritiques que hi he ficat, ja que ja ho vam tractar en temes anteriors, he ficat un color de font, un tamany i un interlineat, això si, tots separats entre si per punt i coma.Un consell per ordenar millor aquesta informaciò ès trencar lìnia just desprès del punt i coma i tambè deixar aïllat el nom de l'estil, i fer tabulacions en cada una de les caracteristiques, exactament aixì:
p {
font-size: 14px;
font-color: #000;
line-height: 16px;
}
Tambè una cosa que cal saber es que no importa en quin ordre posem les caracteristiques, nomès cal que tot estigui PERFECTAMENT ben escrit, respectant els espais i tot separat per punt i coma.
Com aplicar un estil CSS a una pàgina web
Tambè podriem dir-ho, com "fusionar" estil i estructura o CSS i HTML. Primer de tot obrim desde el Dreamweaver un document .css (no HTML) i en el codi i escrivim l'estil CSS tal i com he explicat mès amunt, pero tambè hi afegirem un tipus de font, el codi es font-family: la font que volguem posar-hi.
Ara fem un "copiar pegar" de manera que a sota del primer estil n'hi ha un altre d'idèntic, a aquest segon li canviarem la p de paràgraf per h1 de titular 1, i com que es tracta d'un titular aumentarem el tamany de font, l'interlineat i tambè farem algún retoc a les altres caracteristiques.
Ho guardem i creem un document .html (ara si) i hi fiquem un text qualsevol que tingui un tìtol, ara seleccionem el tìtol i en la finestra Propiedades, on generalment hi posa Pàrrafo, hi posem
Encabezado 1, amb aixó estem dient que associi l'estil h1 (encabezado 1) al text seleccionat, igualemnt, encara no s'aplicarà l'estil creat anteriorment, perque allò està en un altre document. Ara ens assegurem que la resta de text estigui amb estil Pàrrafo, o sigui que s'hi haurà d'associar l'estil p.
I ara finalment farem possible que els estils que hem creat s'associin al text, ès hora de vincular el full d'estils (.css) amb el document .html.
Ara anem a Ventana> Estilos CSS, això ens obrirà una finestra de treball que ens servirà per vincular els fulls d'estil amb el html. Busquem el simbolet d'infinit en la nova finestra i el cliquem. Ara triem el document. css que abans hem creat i que hauria d'estar al costat del .html. En principi ara la part de text on li hem posat Encabezado1 tindri que sortir amb el format que hem creat per a h1, i el text amb estil Pàrrafo tindria que sortir amb l'estil p.
 |
| Aquesta és la finestra de vincular un fulls d'estils CSS al document HTML. |
8 de gener del 2013
Agrupacions de families de fonts en Web
Aquestes agrupacions creades prederminadament per Dreamweaver serveixen basicament per que en el cas d'un ordinador on s'estigui executant la pàgina web hi falti la primera font de l'agrupaciò, s'utilitzi la següent de l'agrupaciò·
Explicat d'una altra manera, si una pàgina web, un dels seus estils tè la següent agrupaciò: Arial, Genova, Verdana, el text es visualitza en Arial; llavors una persona entra a la pàgina i resulta que en el seu ordinador no té la font Arial, doncs llavors visualitzarà el text en Genova. En cas de no tampoc la segona font, llavors seria aconsellable que es descarregués algunes fonts, ja que normalment, aquesres agrupacions estàn composades de fonts bastant bàsiques i generals, a mès les fonts d'una mateixa agrupaciò sòn bastant semblants entre si, es clar, perque es noti el menys possible el canvi d'una font a una altra.
La paleta de colors de Netscape
La paleta de colors Netscape s'origina a l'època de les pantalles de 8 bits, quan les pantalles només podien reproduir fins a 256 tons, llavors Netscape el primer navegador va crear una paleta comuna entre els colors de Mac i els de PC.
Subscriure's a:
Missatges (Atom)