Mantenimiento de WordPress e Introducción a CSS

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Mantenimiento de WordPress e Introducción a CSS"

Juan Luis Ortega Espinoza
hace 7 años
Vistas:

1 Mantenimiento de WordPress e Introducción a CSS 6 / Junio / 2016 Alex PDF en: alexolle.es/tallerwordpress

2 1. Qué es WordPress? WordPress es uno de los muchos gestores de contenidos existentes. Se usa principalmente para blogs, pero no es su único nicho. Está basado en PHP, MySQL y bajo licencia GPL. Principal meta: cuidado de la estética y los estándares web.

3 2. Cómo lo divido? WordPress tiene una estructura y funcionamientos básicos: 1. El núcleo a. Es el motor que hace funcionar el CMS y que se encarga de gestionar, entre otros, la base de datos MySQL. 2. Las plantillas a. Cuidan de la imagen del site, de forma independiente al núcleo de WP. 3. Los plugins a. Complementos que dotan de funcionalidades extra a nuestro WP.

4 3. El núcleo de WP : Actualizaciones La base principal de WordPress, tiene unas funciones limitadas y su principal misión es jerarquizar y organizar el contenido a través de su base de datos enlazada MySQL. Tipo de actualización: 1. Actualizaciones menores: de mantenimiento o seguridad. Suelen pasar de la a la Sirven para corregir pequeños bugs o introducir cambios leves que no afectan a la usabilidad. 2. Actualizaciones mayores: incluyen o quitan características, optimizan el código, actualizan campos en la base de datos, etc. Su progresión es de a 4.3 o de salto completo, 5.0.

5 4. Plantillas Dan forma a nuestro sitio web. En el caso de WP, es parte fundamental para su funcionamiento. La plantilla 1. es el lugar donde atacamos a los cambios visuales. 2. no se debe actualizar sin más, ya que eliminaremos todos nuestros cambios. 3. contiene archivos HTML, PHP y CSS, principalmente.

6 5. Plugins imprescindibles 1. Google Analytics by Yoast 2. SEO by Yoast 3. Contact Form 7 4. Zen Cache / W3 Total Cache 5. WP Security 6. Asesor de Cookies 7. TinyMCE Advanced 8.

7 6. Actualizaciones 1. Realizar una copia de seguridad de la BBDD y del hosting. 2. Actualizar los plugins de uno en uno. 3. Actualizar la plantilla si es necesario, previo backup.

8 7. Qué es CSS y qué podemos hacer? Acrónimo de Cascading Style Sheets (hojas de estilo en cascada). CSS define nuestros documentos HTML, como por ejemplo: 1. Colores 3. Formatos de imagen 4. Altura, anchura, márgenes 5. Estilos de texto, párrafos, líneas, enlaces, etc.

9 8. CSS: Sintaxis básica EJEMPLO: Poner el fondo de color rojo. Usando HTML podemos hacerlo así: <body bgcolor="#ff0000"> Con CSS el mismo resultado puede lograrse así: body { background-color: #FF0000; }

10 9. Aplicando CSS: Método 1 Siguiendo con el ejemplo del fondo rojo: código CSS en línea con el HTML, utilizando el atributo style.

11 10. Aplicando CSS: Método 2 Código CSS en el documento HTML utilizando la etiqueta style.

12 11. Aplicando CSS: Método 3 (óptimo) En el tercer método, más óptimo y que utiliza WP, todo el código CSS va en un archivo externo. Consiste en crear un vínculo desde el documento HTML (por ejemplo, principal.html) con la hoja de estilo (estilo.css). Se crea con una sencilla línea de código HTML:

13 12. Identificando CSS: Pseudo-clases Permite definir varios eventos al definir una etiqueta HTML en CSS. Como ejemplo, vamos a cambiar el color de los ENLACES. En HTML se utiliza la etiqueta <a>, así que como selector en CSS utilizaremos a. Para tener en cuenta otros estados, como los enlaces visitados o al pasar por encima el cursor, entran en juego las pseudo-clases.

14 13. Identificando CSS: Agrupación de elementos (class e id) Con esto podemos aplicar un estilo especial a un elemento concreto o a un grupo de elementos concretos. En el documento CSS, se diferencian así sus selectores: Class: se escribe precedido de punto (.) à.miestilo (a.miestilo) Id: se escribe precedido de almohadilla (#) à #MiEstilo

15 14. Identificando CSS: El atributo class A todas las etiquetas ya existentes en HTML (h1, h2, h3, body, footer, header, div, span, ) se le pueden aplicar estilos mediante CSS, pero podemos aplicar algunos concretos dependiendo de para que lo queramos usar. EJEMPLO, dos listas con colores de enlace diferentes:

16 Así quedaría definido en el archivo CSS:

17 15. Identificando CSS: El atributo id Además de agrupar elementos, podemos identificar un elemento único. Esto se hace con el atributo id. No pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar.

18 Ponemos como ejemplo varios títulos h1, h2, h3.. De los cuales, uno tiene un color diferente:

19 16. Identificando CSS: Propiedades y Valores Ejemplo de propiedades y valores más utilizados font-family: sans-serif; à Tipo de fuente. font-size: 16px; à Tamaño de fuente. font-style: italic; à Estilo (italic, bold,etc) color: #434343; à Color de la fuente background-color: #fff; à Color de fondo outline: 0; à Se utiliza en el selector a de enlaces, define si va subrayado o no. text-align: right; à Alineación del texto. height: 100px; / widht: 100px à Alto, Ancho, por ejemplo en imágenes o definición de DIVS.

20 17. Identificando CSS: Encuadres

Documentos relacionados

Diseño web. Fundamentos de CSS. Informática 4º ESO

Diseño web. Fundamentos de CSS. Informática 4º ESO Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido