1. 3. 7. Temas, widgets y plugins
1.1. 7.1. Añadir temas
1.1.1. Desde la sección 'Apariencia' podemos añadir nuevos temas pulsando el botón 'nuevo tema'.
1.2. 7.2. Gestionar widgets
1.2.1. Los widgets son bloques de contenido independientes.
1.2.2. Suelen colocarse en la barra lateral o en el pie de página
1.2.3. Podemos gestionarlos desde la sección 'Widgets' dentro de la sección 'Apariencia'.
1.3. 7.3. Añadir plugins
1.3.1. Características:
1.3.1.1. Los plugins permiten añadir funcionalidades a un blog
1.3.1.2. A diferencia de los temas, podemos tener varios plugins activos.
1.3.1.3. Se gestiona desde la sección 'Plugins'
1.3.2. Plugins
1.3.2.1. Akismet
1.3.2.1.1. filtra comentarios de Spam
1.3.2.2. Jetpack
1.3.2.2.1. añade múltiples funcionalidades a WordPress. Es una especie de ampliación a WordPress.
1.3.2.3. Google Analytics
1.3.2.3.1. Añade estádisticas Google Analytics
1.3.2.4. NextGEN Gallery
1.3.2.4.1. funcionalidades añadidas para la gestión de imágenes y galerías.
1.3.2.5. WooCommerce
1.3.2.5.1. Añade una tienda virtual a nuestro blog
2. 3. 8. Estructura de un documento web: HTML
2.1. 8.1. Etiquetas
2.1.1. Tienen un nombre que va entre los símbolos
2.1.1.1. Párrafo
2.1.1.1.1. <p>
2.1.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >.
2.1.2.1. Párrafo con contenido en negrita
2.1.2.1.1. <p>...<strong>....</strong></p>
2.1.3. Las etiquetas sin contenido pueden llevar el símbolo / antes de >
2.1.3.1. Salto de línea
2.1.3.1.1. <br/>
2.1.4. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas
2.1.4.1. <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>
2.2. 8.2.Atributos
2.2.1. Características
2.2.1.1. Los atributos pueden modificar características de las etiquetas
2.2.1.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado
2.2.1.3. Son opcionales, pueden usarse o no.
2.2.1.4. Se añaden en la etiqueta de apertura
2.2.2. Ejemplos:
2.2.2.1. <img src="foto1234.jpg" />
2.2.2.2. <img src="foto2134.jpg" alt="Dia soleado en el campo" />
2.2.2.3. <p align="right">Párrafo alineado a la derecha.</p>
2.3. 8.3. Estructura básica de una página HTML
2.3.1. Componentes básicos de la estructura HTML:
2.3.1.1. DOCTYPE
2.3.1.1.1. Indica qué tipo de archivo es. Ejemplo: <!DOCTYPE html>
2.3.1.2. <html>:
2.3.1.2.1. Etiqueta raíz que contiene el resto de etiquetas
2.3.1.3. <head>
2.3.1.3.1. Primera etiqueta tras <html>. Contiene información sobre la página web. Dentro se encuentra la etiqueta
2.3.1.4. <meta charset="UTF-8" />:
2.3.1.4.1. Indica la codificación usada
2.3.1.5. <body>:
2.3.1.5.1. Va a continuación de <head>. Incluye el cuerpo de la página web.
2.3.1.6. <title>
2.3.1.6.1. indica cuál es el título.
2.4. 8.4. Tipos de elementos
2.4.1. Elementos de bloques
2.4.2. Elementos en línea
2.5. 8.5. Etiquetas básicas
2.5.1. División: <div>
2.5.2. Párrafo: <p>
2.5.3. Agrupar elementos en línea: <span>
2.5.4. Subrayada: <u>
2.5.5. Ënfasis o cursiva: <em>
2.5.6. Negrita: <strong>
2.5.7. Subíndice: <sup>
2.5.8. Salto de línea: <br>
2.5.9. Separación horizontal: <hr>
2.6. 8.6. Listas
2.6.1. <li> Representa cada uno de los items de la lista </li> <ol> Representa una lista ordenada </ol> <ul> Representa una lista sin orden </ul>
2.7. 8.7. Encabezados
2.7.1. Los encabezados son títulos para las diferentes secciones de una página web Son: <h1> <h2> <h3> <h4> <h5> <h6> El número indica la importancia del título (tamaño). El 1 el más importante.
2.8. 8.8. Tablas
2.8.1. <table> <tr> <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td> </tr> <tr> <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td> </tr> </table>
2.9. 8.9. Imágenes
2.9.1. Alt: texto alternativo Src: ruta de la imagen a visualizar. Generalmente las imágenes se almacenan en una carpeta diferente a la de las páginas. Ejemplos: Imagen.jpg : la imagen se encuentra en la misma carpeta de la página Img/imagen.jpg : la imagen se encuentra dentro de la carpeta Img ../imagen.jpg : la imagen se encuentra en la carpeta superior o padre
2.10. 8.10. Enlaces
2.10.1. href : URL de la página de destino Target="_blank" : abre la página de destino en una nueva pestaña
3. 3. 9. Personalización del estilo: CSS
3.1. 9.1. Colocación del código CSS
3.1.1. En un atributo HTML, con el atributo style <div style="width: 100px; height: 100px; background-color: red;"></div> Con la etiqueta <style> <style type="text/css"> div { width: 100px; height: 100px; background-color:red; } </style> En un archivo independiente: <link rel="stylesheet" href="css/estilo.css" type="text/css" />
3.2. 9.2. Selectores básicos
3.2.1. En caso de que un elemento esté afectado por varios selectores, la prioridad es: Id Clase Tipo
3.2.2. Tipos de selectores: Por tipo : Etiqueta HTML. Ejemplo:p { color: green; } De clase: (varios elementos) botonesRojos { background-color: red;} De id: (un elemento) #primerParrafo { color: gray; }
3.3. 9.3. Colores
3.3.1. Propiedades: color: modifica el color de texto background-color: modifica el color de fondo
3.3.2. RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno: #FF0000 : tres números hexadecimales (rojo) rgb(255,0,0) : decimales de 0 a 255 rgb(100%,0,0) : porcentajes rgba(255,0,0,0.5) : tres números de 0 a 255 y un número de 0 a 1 que indica el nivel de tranparencia (0 = transparente, 1 = opaco).
3.4. 9.4. Texto
3.4.1. text-align : left, right, center o justify text-decoration : underline, none, overline o line-through text-transform : uppercase, lowercase y capitalize font-size : 12px, 12pt o x-small, small, mediuum, large o x-large font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc. font-style : italic o normal font-weight : bold o normal text-shadow : -4px 2px 5px grey; 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra.
3.5. 9.5. Tamaño
3.5.1. display: block. Visualizar como elemento de bloque. display: inline. Visualizar como elemento en línea. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo width, height, max-width, max-height, min-width y min-height Sus valores se fijan en pixeles o en porcentajes
3.6. 9.6. Bordes
3.6.1. -border-width : se establece en pixels Border-left-width, border-right-width, border-top-width, border-bottom-width -border-style: solid, dashed (línea discontinua), dotted, double (línea doble) -border-left-style, border-right-style, border-top-style, border--bottom-style -border-color: -border: 2px solid red; -border-radius: radio del borde en px
3.7. 9.7. Márgenes
3.7.1. - margin: distancia con otros elementos que lo rodean - padding: margen interno entre el elemento y su contenido
3.7.1.1. Tanto el margin como el padding se suma al width.
3.8. 9.8. Posicionamiento
3.8.1. position: static -> posicionamiento por defecto position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom position: absolute -> posición dentro del documento Position: sticky -> sitúa al elemento basado en el scroll Position: fixed -> posición dentro de la ventana del navedador
3.9. 9.9. Imagen de fondo
3.9.1. background-image
3.9.2. background-position
3.9.3. background-repeat
3.10. 9.10. CSS personalizado en WordPress
4. 3. 10. Publicación de páginas web
4.1. 10.1 Contratación de un alojamiento gratuito en Hostinger
4.1.1. www.hostinger.es
4.2. 10.1 Subir contenido al alojamiento
4.2.1. Hostinger nos permite:
4.2.1.1. Crear un sitio web con nuestras propias páginas
4.2.1.2. Subiendo nuestras páginas por FTP (FileZilla)
4.2.1.3. Subiendo nuestras páginas desde la propia página
4.2.1.4. Crear un blog con WordPress
4.2.1.5. Crear un sitio web desde la propia página de Hostinger.es
4.3. 10.3 Instalación de Worpress en Hostinger
5. 3. 1. Tipos de páginas
5.1. Según el nivel de interacción con el usuario
5.1.1. Página estática
5.1.1.1. El contenido sólo lo puede modificar el administrador de la web
5.1.1.2. Los usuarios solo pueden visualizarla
5.1.1.3. Los usuarios no pueden interactuar con ella
5.1.2. Página dinámica
5.1.2.1. Permite al usuario interactuar con ella realizando acciones como por ejemplo:
5.1.2.1.1. Comentar
5.1.2.1.2. Crea artículos
5.1.2.1.3. Comprar
5.1.2.1.4. Filtrar
5.2. Según la temática
5.2.1. Blog, foro o red social
5.2.2. Presentación o corporativa
5.2.3. Comercio electrónico
5.2.4. Aplicaciones web
5.2.4.1. Ofrecen funcionalidades propias de un programa a través de una web
6. 3. 2. Estándares de publicación y editores web
6.1. Los estándares son un conjunto de reglas y recomendaciones que se deben seguir para utilizar los distintos lenguajes de creación de páginas web.
6.1.1. 2.1. Lenguajes para la creación de páginas web
6.1.1.1. Arquitectura cliente / servidor:
6.1.1.1.1. Servidor web: ordenador dónde se aloja una página web
6.1.1.1.2. Cliente: ordenador de un usuario cualquiera en Internet
6.1.1.2. En el lado del servidor:
6.1.1.2.1. PHP, Java, .NET, Ruby, Python
6.1.1.2.2. SQL
6.1.1.3. En el lado del cliente:
6.1.1.3.1. HTML
6.1.1.3.2. JavaSCript
6.1.1.3.3. CSS
6.1.2. 2.2. Accesibilidad y usabilidad de la web
6.1.2.1. Accesibilidad: existen estándares de accesibilidad buscan el acceso de todos los usuarios en igualdad de condiciones, incluidos aquellos con limitaciones visuales, motrices, auditivas y cognitivas.
6.1.2.1.1. Ejemplo: Usar texto alternativo en las imágenes que las describan.
6.1.2.2. Usabilidad: "Capacidad de un software de ser comprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso.
6.1.3. 2.3. Editores para la creación de contenido web
6.1.3.1. Facilitan el desarrollo de aplicaciones con funcionalidades avanzadas, como por ejemplo: autocompletado, plantillas y plugins.
6.1.3.1.1. IDE
6.1.3.1.2. WYSIWYG
6.1.3.1.3. Editores de textos
6.2. Los estándares están regulados por consorcios y organizaciones, entre las que destacan:
6.2.1. World Wide Web Consortium (HTML, CSS, XML)
6.2.2. Ecma International (Javascript)
6.2.3. Unicode Consortium (caracteres Unicode)
7. 3. 3. Instalación de un sistema de gestión de contenidos
7.1. 3.1. Preparación del entorno
7.2. 3.2. Instalación de XAMPP en Windows
7.2.1. XAMPP es un software que nos permite instalar Apache, MySQL y PHP en una fácilmente única instalación.
7.2.2. Por defecto se instala en c:\xampp
7.2.3. Desde el panel de control de XAMPP podemos iniciar Apache y MySQL (MariaDB)
7.3. 3.3. Instalación de XAMPP en Linux
7.3.1. XAMPP nos permite instalar WordPress de forma sencilla
7.3.2. Para instalar:
7.3.2.1. Descargar instalador
7.3.2.2. Instalar:
7.3.2.2.1. Especificar directorio dónde se instaló XAMPP
7.3.2.2.2. Nombre del blog
7.3.2.2.3. Soporte de correo: necesario para enviar notificaciones, se puede configurar con una cuenta propia de Gmail
7.4. 3.4. Arranque y detención de XAMPP en Linux
7.4.1. sudo./manager-linux.run (32 bits)
7.4.2. sudo./manager-linux-x64.run (64 bits)
7.5. 3.5. Instalación de Wordpress en XAMPP
7.5.1. WordPress (software) nos permite tener un blog funcionando en nuestro ordenador.
7.5.1.1. Instalar WordPress de forma local en nuestro ordenador puede servirnos para hacer pruebas o incluso montarnos nuestra propia página web en casa.
7.5.1.1.1. Para disponer de WordPress funcionando debemos seguir una serie de pasos:
7.5.1.2. Software que requiere WordPress para su funcionamiento:
7.5.1.2.1. Este tipo de entornos se conoce como WAMP o LAMP, si el sistema operativo es Windows o Linux respectivamente
7.5.2. Nombre del blog
7.5.3. Soporte de correo
7.5.4. Tipo de instalación
8. 3. 4. Configuración del sistema de gestión
8.1. 4.1. Primeros pasos
8.2. 4.2. Escritorio
8.2.1. Actualizaciones : actualización de WordPress y plugins
8.3. 4.3. Herramientas
8.3.1. "Publicar esto" -> barra de favoritos
8.3.2. Exportar
8.3.3. Importar
8.3.4. Conversor de etiquetas y categorías
8.4. 4.4. Biblioteca multimedia
9. 3. 5. Creación de páginas estáticas
9.1. 5.1. Creación de una página de inicio estática
9.1.1. Crear página de inicio estática: Ajustes -> Lectura
9.2. 5.2. Gestión de páginas estáticas
9.2.1. Acciones en lote:
9.2.1.1. Editar
9.2.1.1.1. Al editar una página la propiedad 'Superior' permite establecer la página como subsección de otra
9.2.1.2. Mover a la papelera
9.2.1.3. Ver
9.2.1.4. Edición rápida
9.3. 5.3. Creación de contenido estático
10. 3. 6. Gestión de usuarios
10.1. 6.1. Crear usuarios
10.1.1. Roles:
10.1.1.1. Suscriptores
10.1.1.1.1. Pueden leer, comentar, modificar su perfil y recibir notificaciones
10.1.1.2. Colaboradores
10.1.1.2.1. Pueden crear y gestionar sus propias entradas. No pueden publicar, crear páginas estáticas ni subir contenido ,multimedia
10.1.1.3. Autores
10.1.1.3.1. Pueden publicar entradas y subir contenido multimedia. Páginas estáticas no.
10.1.1.4. Editores
10.1.1.4.1. Igual que autores pero además pueden gestionar y publicar entradas de otros, y páginas estáticas.
10.1.1.5. Administradores
10.1.1.5.1. Pueden realizar cualquier tipo de acción en el panel de control. Por ejemplo, gestionar cuentas de otros usuarios.
10.2. 6.2. Modificar perfil
10.2.1. Opciones:
10.2.1.1. Desactivar el editor visual
10.2.1.2. Esquema de color
10.2.1.2.1. Seleccionar el comentario anterior o siguiente
10.2.1.3. Atajos de teclado
10.2.1.3.1. J + K
10.2.1.3.2. A.
10.2.1.3.3. S.
10.2.1.3.4. D.
10.2.1.3.5. Q.
10.2.1.4. Barra de herramientas
10.2.1.5. Foto de perfil