Diferencia entre revisiones de «DRUPAL Apariencia»
Ir a la navegación
Ir a la búsqueda
| (No se muestran 27 ediciones intermedias del mismo usuario) | |||
| Línea 1: | Línea 1: | ||
| − | ==Introdución== | + | == Introdución == |
* A forma en como está estruturada o sitio web en drupal, tanto na parte que se emprega polo administrador para a súa xestión como a parte que se amosa aos usuarios que fan uso do sitio denomínase '''Theme'''. | * A forma en como está estruturada o sitio web en drupal, tanto na parte que se emprega polo administrador para a súa xestión como a parte que se amosa aos usuarios que fan uso do sitio denomínase '''Theme'''. | ||
* O Theme afecta tanto a estrutura, coma o tamaño, cor, formato,...de todo o que se amose na páxina. | * O Theme afecta tanto a estrutura, coma o tamaño, cor, formato,...de todo o que se amose na páxina. | ||
| − | + | <br/> | |
* Cando implantamos un sitio web queremos que dito sitio teña unha aparencia que sexa igual (ou moi parecida) en todas as súas páxinas. | * Cando implantamos un sitio web queremos que dito sitio teña unha aparencia que sexa igual (ou moi parecida) en todas as súas páxinas. | ||
* Queremos ter unha estrutura determinada, co logo da empresa nun lugar, o menú noutro, os artigos ou información situado entre unhas partes determinadas,.... Todo isto dánolo o theme. | * Queremos ter unha estrutura determinada, co logo da empresa nun lugar, o menú noutro, os artigos ou información situado entre unhas partes determinadas,.... Todo isto dánolo o theme. | ||
| − | + | <br/> | |
| − | * Vexamos un exemplo concreto na web do Centro: | + | * Vexamos un exemplo concreto na [http://www.cifprodolfoucha.es web do Centro]: |
[[Imagen:Drupal_apariencia_3.jpg|400px|center]] | [[Imagen:Drupal_apariencia_3.jpg|400px|center]] | ||
[[Imagen:Drupal_apariencia_4.jpg|400px|center]] | [[Imagen:Drupal_apariencia_4.jpg|400px|center]] | ||
| − | |||
: Como vemos, na parte superior (en cor vermella) temos unha '''sección de Menú''' na que se atopa o '''Logo''' e o '''Menú Principal'''. | : Como vemos, na parte superior (en cor vermella) temos unha '''sección de Menú''' na que se atopa o '''Logo''' e o '''Menú Principal'''. | ||
| Línea 23: | Línea 22: | ||
* Máis información [https://www.drupal.org/documentation/theme no seguinte enlace]. | * Máis información [https://www.drupal.org/documentation/theme no seguinte enlace]. | ||
| + | == Themes en Drupal == | ||
| + | |||
| + | * En Drupal podemos ter moitos temas (themes) instalados á vez, pero só un deles estará visualmente activo. | ||
| + | * Poderemos: | ||
| + | :* Instalar un theme existente: https://www.drupal.org/project/project_theme | ||
| + | :* Cambiar e adaptar un tema específico as nosas necesidades (cambiando ou modificando partes del). | ||
| + | :: Deste tipo temos entre outros: | ||
| + | ::* [https://www.drupal.org/project/zen Theme Zen]. | ||
| + | ::* [https://www.drupal.org/project/basic Basic]. | ||
| + | :* Crear un novo tema dende cero. | ||
| + | |||
| + | <br/> | ||
| + | |||
| + | |||
| + | * Unha boa idea é ir a [https://www.drupal.org/download este enlace] e na parte baixa podemos ver os temas más instalados. | ||
| + | |||
| + | [[Imagen:Drupal_apariencia_30.jpg|500px|center]] | ||
| + | |||
| + | |||
| + | <br/> | ||
| + | |||
| + | * Para visualizar os Themes que se atopan en Drupal teremos que ir á opción de menú '''Administrar''' => '''Apariencia'''. | ||
| + | |||
| + | [[Imagen:Drupal_apariencia_5.jpg|500px|center]] | ||
| + | |||
| + | : Como vemos temos o tema Bartik 8.1.8 (tema predeterminado) como theme. Temén temos o Seven 8.1.8 (Tema de administración) instalado, que se está usando como tema de administración (na parte inferior desta pantalla). Se queremos 'activar' un dos temas instalados teríamos que premer a opción '''Configurar como predeterminado'''. | ||
| + | |||
| + | * Vexamos agora como está estruturado dito tema. | ||
| + | |||
| + | <gallery caption="Visualizando a estrutura dun tema" widths="350" heights="300px" perrow="2"> | ||
| + | Image:Drupal_apariencia_6.jpg| Prememos sobre a opción '''Disposición de bloques'''. | ||
| + | Image:Drupal_apariencia_7.jpg| Prememos sobre a opción '''Demostrar regiones de bloques'''. | ||
| + | Image:Drupal_apariencia_8.jpg| Aparecen os diferentes bloques e seccións nos que está dividido o tema. Debemos premer 'Salir de la demostración...' na parte superior esquerda para volver á pantalla anterior. | ||
| + | </gallery> | ||
| + | * Como vemos na parte do encabezado temos dous menús e o encabezado propiamente dito. | ||
| + | <br/> | ||
| + | * Hai algunhas partes que 'non aparecen' por defecto cando cargamos a paxina e aparecen cando 'sucede algo'. Por exemplo a parte '''Destacado''': | ||
| + | <gallery caption="Configuracion unha sección específica" widths="350" heights="300px" perrow="2"> | ||
| + | Image:Drupal_apariencia_9.jpg| Vemos que en dita sección (é dicir, visualmente aparecerá na páxina como vimos ao premer en 'Demostrar regiones de bloques') está formado por un contido denominado '''Mensajes de estado'''. Dito contido pertence á '''categoría de System'''. Podemos mover dito contido a outra sección premendo na listbox que aparece ou ben premendo no botón en forma de dobre frecha na parte esquerda a desprazando a outra sección. Prememos o '''botón configurar'''. | ||
| + | Image:Drupal_apariencia_10.jpg| Cada contido podemos configuralo para que cando saia a mensaxe apareza un título xunto coa mensaxe (por defecto desactivado), e podemos indicar con que contido, páxinas ou con que tipo de usuarios queremos que saia a mensaxe que se vai visualizar (por defecto con todos). | ||
| + | Image:Drupal_apariencia_11.jpg| Por exemplo, se intentades subir un comentario a un artigo publicado previamente, aparecerá unha mensaxe nesa sección... | ||
| + | </gallery> | ||
| + | <br/> | ||
| + | * Podemos ver como se corresponden os contidos-seccións cos que aparecen na paxina web (non están todos): | ||
| + | [[Imagen:Drupal_apariencia_1.jpg|500px|center]] | ||
| + | <br/> | ||
| + | * Podemos agregar novos contidos a unha sección determinada. | ||
| + | <gallery caption="Agregando novos contidos a unha sección específica" widths="350" heights="300px" perrow="3"> | ||
| + | Image:Drupal_apariencia_12.jpg| Primeiro debemos escoller o 'bloque' onde vai ir o novo contido e premer o botón '''Colocar bloque'''. | ||
| + | Image:Drupal_apariencia_13.jpg| Agora indicamos que bloque de contido imos a poñer ou se queremos crear un específico. Para facer esta proba imos seleccionar o bloque '''Incio de sesión''' (podedes escoller outros para facer probas). Unha vez escollido aparecerá unha ventá coas opcións de configuración explicadas anteriormente. Prememos o botón '''Gardar bloque'''. | ||
| + | Image:Drupal_apariencia_14.jpg| Agora xa aparece na sección elexida, pudendo desprazala a outro lugar dentro ou fora de sección. | ||
| + | Image:Drupal_apariencia_15.jpg| Fixarse como se facemos algunha modificación, e non se garda, aparecerá na parte superior un aviso. Teremos que gardar os cambios premendo no botón '''Guardar bloques''' na parte inferior da paxina. | ||
| + | Image:Drupal_apariencia_16.jpg| Se pechamos a sesión e imos a paxina principal veremos como aparece o novo bloque dentro da sección elixida. | ||
| + | Image:Drupal_apariencia_17.jpg| Podemos eliminar o bloque premendo no menú da dereita e seleccionado a opción '''Eliminar'''. | ||
| + | </gallery> | ||
| + | * Os temas que aparecen inicialmente no Drupal, son temas que se atopan no '''CORE''' do mesmo (cartafol /drupal/core/themes) <u>e se recomenda non modificalos</u>. | ||
| + | == Tipos de themes == | ||
| + | * En Drupal temos multitude de themes diferentes, pero neste punto quero indicar algúns dos tipos que podemos atopar: | ||
| + | :* '''Themes responsives''': Son themes que se 'adaptan' á resolución/tamaño do dispositivo. | ||
| + | :: Podedes facer [https://www.drupal.org/project/project_theme?f%5B0%5D=&f%5B1%5D=&f%5B2%5D=drupal_core%3A7234&f%5B3%5D=sm_field_project_type%3Afull&text=responsive&solrsort=iss_project_release_usage+desc&op=Search unha busca en Drupal.org]. | ||
| + | : Vexamos un exemplo: | ||
| + | <gallery caption="Exemplo de theme responsive" widths="350" heights="300px" perrow="3"> | ||
| + | Image:Drupal_apariencia_35.jpg| So o theme ten espazo amosa os menús en formato horizontal na parte superior. Os contidos aparecen enteiros. | ||
| + | Image:Drupal_apariencia_36.jpg| O menú de administración pasou á parte esquerda en formato vertical. O menú do sitio web foi substituído por unha icona no que se prememos aparecen despregados os elementos do menú. Os contidos aparecen con barras de scroll. | ||
| + | </gallery> | ||
| + | :* '''Themes con templates''': En Drupal podemos crear themes partindo dun theme xa instalado, 'herdando' todas as súas características e personalizando as que queiramos. A maiores, existen un themes que xa veñen coa posibilidade de facer themes baseados neles, utilizando templates. Podedes atopar algúns destes themes se facedes unha [https://www.drupal.org/project/project_theme?f%5B0%5D=&f%5B1%5D=&f%5B2%5D=drupal_core%3A7234&f%5B3%5D=sm_field_project_type%3Afull&text=template&solrsort=iss_project_release_usage+desc&op=Search busca en Drupal.org]. | ||
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] -- (2016). | <br> -- [[Usuario:angelfg|Ángel D. Fernández González]] -- (2016). | ||
Revisión actual del 09:41 10 nov 2016
Introdución
- A forma en como está estruturada o sitio web en drupal, tanto na parte que se emprega polo administrador para a súa xestión como a parte que se amosa aos usuarios que fan uso do sitio denomínase Theme.
- O Theme afecta tanto a estrutura, coma o tamaño, cor, formato,...de todo o que se amose na páxina.
- Cando implantamos un sitio web queremos que dito sitio teña unha aparencia que sexa igual (ou moi parecida) en todas as súas páxinas.
- Queremos ter unha estrutura determinada, co logo da empresa nun lugar, o menú noutro, os artigos ou información situado entre unhas partes determinadas,.... Todo isto dánolo o theme.
- Vexamos un exemplo concreto na web do Centro:
- Como vemos, na parte superior (en cor vermella) temos unha sección de Menú na que se atopa o Logo e o Menú Principal.
- Na parte da dereita (en cor Marrón) temos diferentes seccións, unha busca na web, outra de acceso a seccións específicas, outra ao blog da biclioteca,...
- Na parte centra (en cor amarela) temos dúas seccións, unha de novas e outra de situación do centro.
- Na parte baixa (en cor rosa) temos información do centro, formas de contacto,....
- Máis información no seguinte enlace.
Themes en Drupal
- En Drupal podemos ter moitos temas (themes) instalados á vez, pero só un deles estará visualmente activo.
- Poderemos:
- Instalar un theme existente: https://www.drupal.org/project/project_theme
- Cambiar e adaptar un tema específico as nosas necesidades (cambiando ou modificando partes del).
- Crear un novo tema dende cero.
- Unha boa idea é ir a este enlace e na parte baixa podemos ver os temas más instalados.
- Para visualizar os Themes que se atopan en Drupal teremos que ir á opción de menú Administrar => Apariencia.
- Como vemos temos o tema Bartik 8.1.8 (tema predeterminado) como theme. Temén temos o Seven 8.1.8 (Tema de administración) instalado, que se está usando como tema de administración (na parte inferior desta pantalla). Se queremos 'activar' un dos temas instalados teríamos que premer a opción Configurar como predeterminado.
- Vexamos agora como está estruturado dito tema.
- Visualizando a estrutura dun tema
Prememos sobre a opción Disposición de bloques.
Prememos sobre a opción Demostrar regiones de bloques.
Aparecen os diferentes bloques e seccións nos que está dividido o tema. Debemos premer 'Salir de la demostración...' na parte superior esquerda para volver á pantalla anterior.
- Como vemos na parte do encabezado temos dous menús e o encabezado propiamente dito.
- Hai algunhas partes que 'non aparecen' por defecto cando cargamos a paxina e aparecen cando 'sucede algo'. Por exemplo a parte Destacado:
- Configuracion unha sección específica
Vemos que en dita sección (é dicir, visualmente aparecerá na páxina como vimos ao premer en 'Demostrar regiones de bloques') está formado por un contido denominado Mensajes de estado. Dito contido pertence á categoría de System. Podemos mover dito contido a outra sección premendo na listbox que aparece ou ben premendo no botón en forma de dobre frecha na parte esquerda a desprazando a outra sección. Prememos o botón configurar.
Cada contido podemos configuralo para que cando saia a mensaxe apareza un título xunto coa mensaxe (por defecto desactivado), e podemos indicar con que contido, páxinas ou con que tipo de usuarios queremos que saia a mensaxe que se vai visualizar (por defecto con todos).
Por exemplo, se intentades subir un comentario a un artigo publicado previamente, aparecerá unha mensaxe nesa sección...
- Podemos ver como se corresponden os contidos-seccións cos que aparecen na paxina web (non están todos):
- Podemos agregar novos contidos a unha sección determinada.
- Agregando novos contidos a unha sección específica
Primeiro debemos escoller o 'bloque' onde vai ir o novo contido e premer o botón Colocar bloque.
Agora indicamos que bloque de contido imos a poñer ou se queremos crear un específico. Para facer esta proba imos seleccionar o bloque Incio de sesión (podedes escoller outros para facer probas). Unha vez escollido aparecerá unha ventá coas opcións de configuración explicadas anteriormente. Prememos o botón Gardar bloque.
Agora xa aparece na sección elexida, pudendo desprazala a outro lugar dentro ou fora de sección.
Fixarse como se facemos algunha modificación, e non se garda, aparecerá na parte superior un aviso. Teremos que gardar os cambios premendo no botón Guardar bloques na parte inferior da paxina.
Se pechamos a sesión e imos a paxina principal veremos como aparece o novo bloque dentro da sección elixida.
Podemos eliminar o bloque premendo no menú da dereita e seleccionado a opción Eliminar.
- Os temas que aparecen inicialmente no Drupal, son temas que se atopan no CORE do mesmo (cartafol /drupal/core/themes) e se recomenda non modificalos.
Tipos de themes
- En Drupal temos multitude de themes diferentes, pero neste punto quero indicar algúns dos tipos que podemos atopar:
- Themes responsives: Son themes que se 'adaptan' á resolución/tamaño do dispositivo.
- Podedes facer unha busca en Drupal.org.
- Vexamos un exemplo:
- Exemplo de theme responsive
So o theme ten espazo amosa os menús en formato horizontal na parte superior. Os contidos aparecen enteiros.
O menú de administración pasou á parte esquerda en formato vertical. O menú do sitio web foi substituído por unha icona no que se prememos aparecen despregados os elementos do menú. Os contidos aparecen con barras de scroll.
- Themes con templates: En Drupal podemos crear themes partindo dun theme xa instalado, 'herdando' todas as súas características e personalizando as que queiramos. A maiores, existen un themes que xa veñen coa posibilidade de facer themes baseados neles, utilizando templates. Podedes atopar algúns destes themes se facedes unha busca en Drupal.org.
-- Ángel D. Fernández González -- (2016).
