8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

1/12

ersonalizacin de la apariencia en EducaMadrid (I)

En esta unidad a p r e n d er e m o s c m o m o d i f i ca r l a a p a r ie n ci a d e n u e s t r a s p g i n a s e n e l p o r t a leducat ivo EducaMadr id .

Conseguiremos, de una forma sencilla e intuitiva, que nuestras pginas tengan una apariencia diferente:

El po r t a l educa t i vo EducaMadr id cuen ta con una h e r ram ien ta q ue gene ra cd igo CSS pa ram od i f i ca r l a apa r ienc ia de las pg inas w eb de l po r t a l .

En realidad, para utilizarla no es necesario tener conocimientos de CSS, pero si se tienen, se le puedesacar mucho ms partido. Cuando aprendamos CSS, comprenderemos esta afirmacin. De momento,vamos a aprender a utilizar esta herramienta: el Asistente CSS.

Recordad que en la ayuda del portal educativo hay un apartado que explica detalladamentecmo utilizar el Asis ten t e CSS:http://ayuda.educa.madrid.org/index.php/Educa5_Asistente_CSS

Las dos pest aas " Apar ienc ia "

Estando autenticados en el portal, accedemos a Administrar pginas desde el men superior.

Ah encontramos dos pestaas con el mismo texto: Apariencia.

P e r s o n a l i z a c i n d e l a a p a r i e n c i a e n E d u c a M a d r i d ( I )

1 . D i s e o g r f i c o y c r e a t i v i d a d c o n e l A s i s t e n t e C S S ( I )

Ayuda en EducaMadrid

1 . 1 . I n t r o d u c c i n

http://ayuda.educa.madrid.org/index.php/Educa5_Asistente_CSShttp://ayuda.educa.madrid.org/index.php/Educa5_Asistente_CSS

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

2/12

La pestaa superior hace referencia a todas nuestras pginas.La inferior nos permite controlar cada pgina por separado.

Podremos definir una apariencia general que afecte a todas las pginas.

Tambin podremos entrar en cada pgina y especificar una apariencia diferente.

Nues t ro conse jo es que p rocu r i s t r aba ja r s iemp re en l a apa r ienc ia genera l , salvo que pormotivos concretos, vuestra web deba tener apariencias diferentes en cada uno de sus apartados.Debemos tener en cuenta que una apariencia homognea mejorar notablemente el aspecto general de

nuestras pginas, facilitar la navegacin y mejorar enormemente la experiencia de usuario. Si laspg inas son cohe ren tes en t re s (m ismo d i seo , e lemen t os ub i cados en el m ismo s i t i o , etc . ) ,se rn m e jo res y m s accesib les .

Las t r es opciones de cada pes taa " Apar ienc ia "

Pinchando en la pestaa Apariencia podemos:

Seleccionar entre varios tem as de apariencia.Seleccionar entre varias gamas de colorespara cada tema.Escribir cdigo CSSen un campo de formulario para personalizar a nuestro antojo el diseo denuestras pginas.

Escribiendo el cdigo CSS adecuado en esa tercera pestaa, modificaramos la apariencia denuestras pginas.

El Asis ten t e CSS nos ayuda a generar ese cdigo sin necesidad de conocer este lenguaje.

El Asistente CSSest pensado para trabajar con el tema de apariencia Bsico A (mensuperior), de manera que seleccionamos este tema (y cualquiera de sus gamas de colores)en la pestaa Apariencia (recordemos que hay una pestaa apariencia que afecta a todaslas pginas y otra que afecta slo a la pgina en la que nos encontramos; es muy

importante tener esto en cuenta para lograr una apariencia homognea).

Generar cdigo CSS de una manera sencilla

1 . 2 . C m o u t i l i z a r e l A s i s t e n t e CS S

Seleccin del tema apropiado

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

3/12

Una vez seleccionado este tema, pinchamos en la pestaa CSS, y en la parte inferior del campo deformulario veremos un botn con el texto Asistente CSS. Pinchando en l, abriremos la herramienta.

Si hacemos lo mismo seleccionado otro tema; veremos que el propio Asistente CSS nos avisa de que laherramienta est hecha para trabajar con el tema Bsico A ( men superior) .

Ya hemos entrado en el Asistente CSS, y nos hemos encontrado con un formulario con 4 grandesbloques:

1. Valores genera les: hace referencia al tipo de diseo y la apariencia general de la pgina. El color defondo, el ancho de la parte en la que se encuentra el contenido (podemos darle un ancho fijo orelativo: un tanto por ciento del ancho de la ventana del navegador), si esta parte est a la izquierdadel navegador o si aparecer centrada, etc.

2. Cabece ra y l ogo t i po : nos permite cambiar el color de fondo de la cabecera de nuestras pginas y elcolor de su texto. Podremos incluso cambiar el logotipo de nuestras pginas y especificar si queremos

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

4/12

que este aparezca en la parte izquierda, central o derecha de nuestra cabecera.3. Men y accesos d i r ectos : colores de fondo, texto y borde del men de navegacin y del men

superior (accesos directos a Administrar pginas, etc.).4. Pie de pg ina : altura y colores de fondo y texto de la parte inferior de nuestras pginas.

Rellenando los valores de cada uno de los campos del formulario pod rem os pe rsona l iza r l aapa r ienc ia de nues t ras pg inas .

La mejor forma de ver cmo afecta cada campo a la apariencia de la pgina esintroduciendo en l diferentes valores y pulsando el botn Previsualizar, que abrir unaventana con los cambios. Os animamos a hacerlo.

Los campos que hacen referencia a algn color, tienen un selector de colores que nos facilita enormementela eleccin del cdigo hexadecimal del color, y el campo Direccin web logotipo nos permite pegar unaURL (la ruta a la imagen que queremos usar como logotipo) o seleccionar el archivo de nuestro disco duro

virtual. No tenemos ms que crear un logotipo de las dimensiones adecuadas (aprenderemos a hacerlo enel apartado Tratamiento y optim izacin de im genes para Int ernet) y subirlo a nuestro disco duro virtualmediante el botn aadir fichero.

Una vez que tengamos la apariencia deseada, pulsaremos en Continuar, y e l p r op io As i sten t e CSSn o s d i r q u t e n e m o s q u e h a ce r:

Pulsaremos Aceptar, pulsaremos el enlace Cerrar que aparece en la parte superior derecha delAsistente CSS y veremos que el campo de formulario de la pestaa CSS (el que est justo debajo de lafrase Inserte la aduana CSS que ser cargada despus del tema) tiene un montn de cdigo. Es e lcd igo gene rado po r e l As i s ten t e CSS.

Si hacemos caso de l as i ns t ru cc iones y pu l samos " Guarda r " , l a pg ina se reca rga r con l anueva apa r ienc ia.

Ya sabemos usar el asistente CSS.

Hay que probar sin miedo

Editando los valores introducidos

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

5/12

Si volvemos a abrir el Asistente CSS (i m p o r t a n te : s i n t o ca r a n te s e l c di g o g e n e r a d o),este cargar los valores previamente introducidos. Esto nos permite editar el diseo sinnecesidad de volver a introducir de nuevo todos los valores.

La mejor forma de probar lo que hemos comentado es ir rellenando todos los campos del Asistente CSS.

Vamos a proponer unos valores, pero, por supuesto, se pueden utilizar otros. Proponemos estos:

Va lo res gene ra les

Fondo pgina: 244C4CAncho: 965 (ancho fijo)Posicin pgina: centroColor borde: 6890B6Ancho borde: 2px

Cabece ra y l ogo t i po

Color cabecera: 2D465DAltura cabecera: 200pxColor texto cabecera: ffffffDireccin web logotipo: http://www.educa2.madrid.org/cms_tools/files/ad79e0ae-bf13-4689-a1a4-bda6ac200ad1/no_borrar/curso_em_avanzado_2011/cabecera_ejemplo.jpgDescargar la imagenPosicin logo: izquierda

Men y accesos d i r ectos

Color fondo men accesos directos: 35536EColor texto: d1d1d1

Color fondo men: 35536EColor borde men: 6890B6Color fondo al pasar sobre enlace: 828F95Color enlaces men: ffffff

Pie de pg ina

Altura: 100pxColor fondo: 29435AColor texto: ffffff

La apariencia que conseguiramos (podis pulsar en "Previsualizar" para verla) sera esta:

1 . 2 . 1 . U n e j e m p l o

http://c%7C/Users/Administrador/Desktop/transfer/borrar/hoy/pagina_sola_00/pagina_sola_00/01_apariencia_1/cabecera_ejemplo.jpghttp://c%7C/Users/Administrador/Desktop/transfer/borrar/hoy/pagina_sola_00/pagina_sola_00/01_apariencia_1/cabecera_ejemplo.jpg

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

6/12

Ciertamente, no se puede modificar la apariencia de todos los elementos del portal con el As is ten teCSS , pero sse puede consegu i r un n i ve l de pe rsona l i zac in bastan t e avanzado de un a m anerarea lmen t e senc i l l a.

En el apartado "Personalizacin de la apariencia en EducaMadrid (II)", despus de haber

profundizado en CSS, abo rda rem os las s igu ien tes cues t i ones :

Comprensin del cdigo generado por el Asistente CSS.Edicin del cdigo generado por el Asistente CSS.

Eso n o s p e r m i t i r t e n e r u n co n t r o l m u ch o m s p r e ci so so b r e l a a p a r i e n ci a d enues t r as pg inas. Podremos modificarla sin tener que ceirnos a los valores que el AsistenteCSS nos deja introducir. Requerir, eso s, conocimientos ms avanzados.

Hemos visto cmo modificar la apariencia de nuestros temas utilizando el Asistente CSS.

Sin embargo, a veces es cmodo partir de un trabajo ya hecho y realizar pequeos cambios paraadaptarlo a nuestras necesidades.

EducaMadrid cuenta con un r epos i to r i o de apa r ienc ias o rgan izadas po r tem as: Repositorio CSS deEducaMadrid 5

Podemos utilizarlas como punto de partida para nuestros diseos.

De momento no hay muchos ejemplos, pero su nmero ir creciendo con el tiempo.

Vamos a acceder al tema de apariencia "Limpio Bsico Azul" del Reposi to r i o CSS de EducaMadr id 5 :http://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSS_BasicoA_Limpio_B%C3%A1sico_Azul

Para utilizarlo, debemos tener seleccionado el tema "EducaMadrid Bsico A", y la gama de color azul.

En la pgina del tema "Limpio Bsico Azul", abriremos el enlace Estilos (Archivo CSS) y copiaremos("Edicin> Seleccionar todo"+ "Edicin> Copiar") el contenido de ese archivo en el apartado CSS denuestras pginas de EducaMadrid:

Para saber ms...

2 . R e p o s i t o r i o d e t e m a s d e a p a r i e n c i a p a r a e l p o r t a l e d u c a t i v o

E d u c a M a d r i d

2 . 1 . U n e j e m p l o

http://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSShttp://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSShttp://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSS_BasicoA_Limpio_B%C3%A1sico_Azulhttp://www.educa2.madrid.org/cms_tools/files/847480f0-4bfe-4859-a34a-08082fbcdd6b/Ayuda/Repositorio_CSS/basico-a/limpio_basico_azul/estilos.csshttp://www.educa2.madrid.org/cms_tools/files/847480f0-4bfe-4859-a34a-08082fbcdd6b/Ayuda/Repositorio_CSS/basico-a/limpio_basico_azul/estilos.csshttp://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSS_BasicoA_Limpio_B%C3%A1sico_Azulhttp://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSShttp://ayuda.educa.madrid.org/index.php/Educa5_Repositorio_CSS

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

7/12

A continuacin, pulsaremos "Guardar". Nuestra pgina tendr esta apariencia:

Todava no sabemos CSS, y para poder modificar los temas de apariencia es recomendable conocer estelenguaje.

De todas fo rm as , vamos a hace r unos cam b ios bs icos: vamos a cambiar el logotipo y el color deltexto del pie de pgina. Ms adelante comprenderemos cmo funcionan los CSS y podremos hacer lomismo con cualquier elemento de nuestras pginas.

Mod i f i ca r e l l ogo t i po

Buscamos esto en el cdigo CSS de nuestras pginas (el que hemos copiado del Repositorio CSS deEducaMadrid 5): . logo (atencin: "logo", con un punto delante) y sustituimos:

http://www.educa2.madrid.org/cms_tools/files/847480f0-4bfe-4859-a34a-08082fbcdd6b/Ayuda/Repositorio_CSS/basico-a/limpio_basico_azul/logotipo.gifporhttp://www.educa2.madrid.org/cms_tools/files/ad79e0ae-bf13-4689-a1a4-

2 . 2 . A l g u n o s c a m b i o s b s i c o s

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

8/12

bda6ac200ad1/no_borrar/curso_em_avanzado_2011/mi_nuevo_logo.png

Lo nico que hemos hecho es sustituir una imagen por otra.

Mod i f i ca r e l co lo r de l t ex to de l p ie de pg ina

Buscamos la palabra pieen el cdigo CSS y sustituimos, en .b l u e # s it e - b o t t o m :

#333por

#15BD15

333 es un cdigo hexadecimal equivalente a 333333. Lo nico que hemos hecho es sustit uir el color333333 por este otro: 15BD15.

Una vez hechos l os camb ios , pu l samos e l bo t n " Guarda r " .

La apariencia ha cambiado, y eso que slo hemos tocado un par de valores. Cuand o sepam os CSSpodrem os hacer m uchas ms cosas . Fcil, verdad?

Aprenderemos a modificar el aspecto de algunos elementos de los recursos que aadamos a nuestraspginas: su color de fondo, su borde, la barra del ttulo...

Hay dos formas de modificar la apariencia de los recursos:

1. Ut i l iza n d o l a i n t e r f a z g r f i ca d e u su a r io d e l a p l a t a fo r m a (opcin "Apariencia" de cada recurso).2. Ut i l izan do CSS. Esta opcin requiere conocer este lenguaje, y ser explicada en el ltimo apartado de

este bloque: "Personalizacin de la apariencia en EducaMadrid (II)".

3 . M o d i f i c a c i n d e l a a p a r i e n c i a d e l o s r e c u r s o s ( I )

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

9/12

Veamos cmo modificar la apariencia desde la propia interfaz de EducaMadrid.

En la ayud a de EducaMadr id hay un apartado que explica con todo detalle cmo utilizaresta opcin, incluida en cada uno de los recursos que podremos aadir a nuestras pginas:Educa5 apariencia portlets.

No tiene sentido repetir al pie de la letra el contenido de ese apartado. Siendo este un cursoavanzado, haremos slo un breve resumen del mismo.

Slo trataremos los aspectos que hacen referencia al contenido y la apariencia de losrecursos.

A b r i m o s l a h e r r a m i e n ta de personalizacin de la apariencia del recurso.

Veremos una ventana como esta:

En la primera pestaa ("Con f igu r ac in de l r ecu rso") podremos personalizar el ttulo y elegir si semuestran o no sus bordes.

3 . 1 . A p a r i e n c i a d e l o s r e c u r s o s d e s d e l a i n t e r f a z d e Ed u c a M a d r i d

Instrucciones concretas

http://ayuda.educa.madrid.org/index.php/Educa5_apariencia_portletshttp://ayuda.educa.madrid.org/index.php/Educa5_apariencia_portlets

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

10/12

En "Est i l os de l tex t o" podremos definir la fuente del recurso y otras caractersticas de su texto.

En "Est i l os de f ondo " podremos cambiar el color de fondo del recurso.

"Est i l os de l b o rde " nos permite definir el ancho, el estilo y el color de los bordes del recurso (slo se

vern si no los hemos ocultado en la primera pestaa).

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

11/12

La siguiente pestaa es "M a r g en e x te r n o e i n t e r n o ( p a d d in g ) ". Comprendremos mejor cmo se

comportan estos atributos cuando aprendamos CSS.

La pestaa "Est i los av anzados " es especial. Nos permite escribir CSS directamente en un campo detexto. Veremos cmo utilizar esta opcin en "Personalizacin de la apariencia en EducaMadrid (II)".

8/2/2019 Bloque2 Personalizacion de La Apariencia en EducaMadrid I

12/12

Hay una pestaa ms: "Est i los W AP". WAP significa Wireless Application Prot ocol, y se utiliza, porejemplo, para acceder a servicios de Internet desde un telfono mvil. En este curso no vamos aprofundizar en este aspecto. No es necesario que modifiquemos los datos de esta pestaa.

I m p o r t a n te : p a r a q u e l o s ca m b i o s se ap l i q u en , d e b e m o s p u l sar " Gu a r d a r " . Aparecer unmensaje de xito como este:

Cuando recarguemos la pgina, podremos ver e l r e su l t a d o d e n u e st r o t r a b a j o :

Ya sabemos modificar la apariencia de los recursos utilizando la interfaz grfica de usuario de laplataforma.

Este artculo est licenciado bajo Creative Commons Attribution Non-commercial Share Alike 3.0 License

Ignacio Gros Aymerich

Esta obra est bajo una licencia de Creative Commons.

Departamento de TICCRI F " Las Acac ias"

http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/