1. 1. Tipos de páginas web
1.1. 1.1 Según el nivel de interacción
1.1.1. Página Estática
1.1.1.1. El contenido sólo lo puede modificar el administrador de la web
1.1.1.2. Los usuarios no pueden interactuar con ella
1.1.1.3. Los usuarios solo pueden visualizarla
1.1.2. Página Dinámica
1.1.2.1. Permite al usuario interactuar con ella realizando acciones como por ejemplo:
1.1.2.2. Comentar
1.1.2.3. Crea artículos
1.1.2.4. Comprar
1.1.2.5. Filtrar
1.2. 1.2 Según la temática
1.2.1. Blog, foro o red social
1.2.2. Presentación o corporativa
1.2.3. Comercio electrónico
1.2.4. Aplicaciones web: ofrecen funcionalidades propias de un programa a través de una web
2. 2. Estándares de publicación y editores web
2.1. 2.1 Lenguajes de programación para la creación de páginas web
2.1.1. En el lado del servidor:
2.1.1.1. Servidor web: ordenador dónde se aloja una página web
2.1.1.2. Cliente: ordenador de un usuario cualquiera en Internet
2.1.1.3. PHP, Java, .NET, Ruby, Python, SQL (bases de datos)
2.1.2. En el lado del cliente:
2.1.2.1. HTML: Lenguaje de marcas. Normalmente sirve de base para los otros 2.
2.1.2.2. CSS: Se usa para definir el estilo de una página HTML.
2.1.2.3. JavaScript: Añade dinamismo a la página web
2.2. Accesibilidad y usabilidad en la web:
2.2.1. Accesibilidad:
2.2.1.1. 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. Ejemplo: Usar texto alternativo en las imágenes que las describan.
2.2.2. Usabilidad:
2.2.2.1. "Capacidad de un software de ser comprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso.
2.3. Editores para la creación de contenido web
2.3.1. Editores de texto
2.3.1.1. Bloc de notas
2.3.1.2. Notepad++
2.3.1.3. Sublime Text
2.3.2. IDE
2.3.2.1. Bluefish
2.3.2.2. Visual Studio Express
2.3.2.3. Eclipse
2.3.3. WYSIWYG
2.3.3.1. Dreamweaver
2.3.3.2. Kompozer
3. 5. Creación de páginas estáticas
3.1. 5.1 Crear página de inicio estática
3.1.1. Ajustes -> Lectura
3.1.2. Al editar una página la propiedad 'Superior' permite establecer la página como subsección de otra
3.2. 5.2 Gestión de páginas estáticas
3.2.1. A través de las acciones predefinidas que ofrece wordpress
3.2.1.1. Editar
3.2.1.2. Mover a la papelera
3.2.1.3. Ver
3.2.1.4. Edición rápida
3.3. 5.3 Creación de contenido estático
3.3.1. Una página estática se puede guardar como borrador y publicarse inmediatamente o más tarde.
4. 3. Instalación de un sistema de gestión de contenidos: WordPress
4.1. 3.1 Preparación del entorno
4.1.1. Para disponer de WordPress funcionando debemos seguir una serie de pasos:
4.1.1.1. Preparar el entorno (programas que requiere WordPress para su funcionamiento)
4.1.1.2. Instalar WordPress
4.2. 3.2 Instalación de XAMPP en Windows
4.2.1. XAMPP es un software que nos permite instalar Apache, MySQL y PHP en una fácilmente única instalación.
4.2.2. Descarga: https://www.apachefriends.org/es/download.html
4.2.3. Por defecto se instala en c:\xampp
4.2.4. Desde el panel de control de XAMPP podemos iniciar Apache y MySQL (MariaDB)
4.2.5. Para comprobar que funciona: http://localhost/
4.3. 3.3 Instalación de WordPress en XAMPP
4.3.1. XAMPP nos permite instalar WordPress de forma sencilla
4.3.2. Para instalar:
4.3.2.1. Descargar instalador: Bitnami for XAMPP Application Modules
4.3.2.1.1. Instalar
4.4. 3.4 Arranque y detención de XAMPP en Linux
4.4.1. Una vez finalizada la instalación, para iniciar el panel de control que permitirá iniciar y detener los diferentes servicios, utilizando un mismo usuario.
4.4.2. Desde la pestaña Manage Server, se opdrán arrancar y detener facilmente.
5. 4. Configuración del sistema de gestión de contenidos
5.1. Para acceder al panel de control: http://localhost/wordpress/wp-login.php
5.2. Settings -> Site Language
5.3. Escritorio -> Actualizaciones : actualización de WordPress y plugins
5.4. Los plugins permiten ampliar las funcionalidades del blog
5.5. Herramientas
5.5.1. "Publicar esto" -> barra de favoritos
5.5.2. Exportar
5.5.3. Importar
5.5.4. Conversor de etiquetas y categorías
6. 6. Gestión de usuarios
6.1. 6.1 Crear usuarios
6.1.1. Los usuarios de un sitio web pueden tener distintos privilegios o permisos. Por ejemplo: administradores, redactores jefes, redactores, colaboradores, visitantes.
6.1.1.1. Suscriptores
6.1.1.2. Colaboradores
6.1.1.3. Autores
6.1.1.4. Editores
6.1.1.5. Administradores
6.2. 6.2 Modificar perfil
6.2.1. Esquema de color
6.2.1.1. Permite modificar la paleta de colores del panel de control.
6.2.2. Desactivar el editor visual
6.2.3. Atajos del teclado
6.2.4. Barra de herramientas
6.2.5. Foto de perfil
6.2.5.1. Muestra una fotografía del perfil del usuario.
7. 7. Temas, widgets y plugins
7.1. 7.1 Añadir temas
7.1.1. Desde la sección 'Apariencia' podemos añadir nuevos temas pulsando el botón 'nuevo tema'.
7.2. 7.2 Gestionar widgets
7.2.1. Los widgets son bloques de contenido independientes.
7.2.2. Suelen colocarse en la barra lateral o en el pie de página
7.2.3. Podemos gestionarlos desde la sección 'Widgets' dentro de la sección 'Apariencia'
7.3. 7.3 Añadir plugins
7.3.1. Los plugins permiten añadir funcionalidades a un blog
7.3.2. A diferencia de los temas, podemos tener varios plugins activos.
7.3.3. Se gestiona desde la sección 'Plugins'
7.3.4. Algunos plugins populares:
7.3.4.1. Akismet: filtra comentarios de Spam Jetpack: añade múltiples funcionalidades a WordPress. Es una especie de ampliación a WordPress. Google Analytics: Añade estádisticas Google Analytics NextGEN Gallery: funcionalidades añadidas para la gestión de imágenes y galerías. WooCommerce: Añade una tienda virtual a nuestro blog.
8. 8. Estructura de un documento web: HTML
8.1. HTML -> HyperText Markup Language (Lenguaje de marcas de hipertexto) Hipertexto: "herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos." HTML se usa para crear la estructura de las páginas web. No se considera un lenguaje de programación. Puede venir acompañado de dos lenguajes: CSS: define el formato de la página web JavaScript: lenguaje de programación, añade dinamismo.
8.2. 8.1 Etiquetas
8.2.1. Tienen un nombre que va entre los símbolos < y >. Ejemplo: <p>
8.2.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >. Ejemplos:
8.2.2.1. <p>Esto es un párrafo</p>
8.2.2.2. <strong>Este texto se vería en negrita</strong>
8.2.3. Las etiquetas sin contenido pueden llevar el símbolo / antes de > Ejemplo:
8.2.3.1. <br />
8.2.4. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas. Ejemplo:
8.2.4.1. <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>
8.3. 8.2 Atributos
8.3.1. Los atributos pueden modificar características de las etiquetas
8.3.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado
8.3.3. Son opcionales, pueden usarse o no.
8.3.4. Se añaden en la etiqueta de apertura
8.3.5. Ejemplos:
8.3.5.1. <img src="foto1234.jpg" />
8.3.5.2. <img src="foto2134.jpg" alt="Dia soleado en el campo" />
8.3.5.3. <p align="right">Párrafo alineado a la derecha.</p>
8.4. 8.3 Estructura básica de una página web HTML
8.4.1. Para crear un documento HTML podemos usar cualquier editor de texto plano. Por ejemplo:
8.4.1.1. Bloc de notas
8.4.1.2. Notepad++: Resalta con colores las etiquetas HTML y podemos abrir varios documentos en pestañas.
8.4.2. Componentes básicos de la estructura HTML:
8.4.2.1. DOCTYPE: Indica qué tipo de archivo es. Ejemplo: <!DOCTYPE html>
8.4.2.2. <html>: Etiqueta raíz que contiene el resto de etiquetas
8.4.2.3. <head>: Primera etiqueta tras <html>. Contiene información sobre la página web. Dentro se encuentra la etiqueta <title> que indica cuál es el título.
8.4.2.4. <meta charset="UTF-8" />: Indica la codificación usada
8.4.2.5. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.
8.5. 8.4 Tipos de elementos
8.5.1. Bloque
8.5.1.1. Ocupan todo el ancho del elemento que los contiene
8.5.1.2. Los elementos van tras de ellos se visualizan debajo
8.5.1.3. Pueden contener otros elementos de bloque
8.5.1.4. Ejemplos:
8.5.1.4.1. <p> párrafo
8.5.1.4.2. <div> bloque
8.5.1.4.3. <ul> lista sin orden
8.5.1.4.4. <ol> lista ordenada
8.5.1.4.5. <table> tabla
8.5.2. En línea
8.5.2.1. Ocupan sólo el ancho necesario
8.5.2.2. Se sitúan uno al lado del otro hasta ocupar el ancho disponible
8.5.2.3. Sólo pueden contener otros elementos en línea, texto e imágenes.
8.5.2.4. Ejemplos:
8.5.2.4.1. <img> imagen
8.5.2.4.2. <a> enlace
8.5.2.4.3. <button> botón
8.5.2.4.4. <strong> texto resaltado
8.6. 8.5 Etiquetas básicas
8.6.1. <div> Divide la página en secciones </div>
8.6.2. <p> Párrafo </p>
8.6.3. <span> Sirve para agrupar elementos en línea </span>
8.6.4. <u> Subrayado </u>
8.6.5. <em> Cursiva o énfasis </em>
8.6.6. <strong> Negrita o destacado </strong>
8.6.7. <sub> Subíndice </sub>
8.6.8. <br> Salto de línea
8.6.9. <hr> Línea de separación horizontal
8.7. 8.6 Listas
8.7.1. <li> Representa cada uno de los items de la lista </li>
8.7.2. <ol> Representa una lista ordenada </ol>
8.7.3. <ul> Representa una lista sin orden </ul>
8.8. 8.7 Encabezados
8.8.1. Los encabezados son títulos para las diferentes secciones de una página web
8.8.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
8.8.3. El número indica la importancia del título (tamaño). El 1 el más importante.
8.9. 8.8 Tablas
8.9.1. Las tablas son un elemento de bloque
8.9.2. Se crean con la etiqueta <table>
8.9.3. Las filas se crean con la etiqueta <tr> (table row)
8.9.4. Las filas contienen celdas que se crean con la etiqueta <td>
8.9.5. Atributo border: se usa indicar el ancho de los bordes de la tabla
8.9.6. Ejemplo:
8.9.6.1. <table>
8.9.6.2. <tr>
8.9.6.3. <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td>
8.9.6.4. </tr>
8.9.6.5. <tr>
8.9.6.6. <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td>
8.9.6.7. </tr>
8.9.6.8. </table>
8.10. 8.8.1 Unir celdas
8.10.1. Atributos de la etiqueta <td> para unir celdas:
8.10.1.1. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas
8.10.1.2. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas
8.11. 8.9 Imágenes
8.11.1. Las imágenes son un elemento en línea
8.11.2. Etiqueta: <img>
8.11.3. Atributos:
8.11.3.1. Alt: texto alternativo
8.11.3.2. Src: ruta de la imagen a visualizar. Generalmente las imágenes se almacenan en una carpeta diferente a la de las páginas. Ejemplos:
8.11.3.2.1. Imagen.jpg Img/imagen.jpg :
8.12. 8.10 Enlaces
8.12.1. Son vínculos a otras páginas
8.12.2. Pueden ser:
8.12.2.1. Locales (dentro del sitio web)
8.12.2.2. Externos (en otro sitio web)
8.12.3. Etiqueta <a>
8.12.4. Atributos:
8.12.4.1. href : URL de la página de destino
8.12.4.2. Target="_blank" : abre la página de destino en una nueva pestaña
9. 9. Personalización del estilo: CSS
9.1. CSS es el lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web
9.2. Permite separar la estructura (HTML) de la presentación (CSS).
9.3. Ventajas de usar archivo CSS:
9.3.1. Con un solo archivo CSS podemos modificar varias páginas HTML
9.3.2. A la hacer cambios sólo se modifica en el archivo CSS (y no en todas las páginas HTML)
9.4. 9.1 Colocación del código CSS
9.4.1. El código CSS se puede vincular a una estructura HTML de dos formas diferentes:
9.4.1.1. En un atributo HTML, con el atributo style : <div style="width: 100px; height: 100px; background-color: red;"></div>
9.4.1.2. En un archivo independiente: <link rel="stylesheet" href="css/estilo.css" type="text/css" />
9.5. 9.2 Selectores básicos
9.5.1. Los selectores determinan qué elementos HTML se verán afectados por el código CSS Tipos de selectores:
9.5.1.1. Por tipo : Etiqueta HTML. Ejemplo: p { color: green; }
9.5.1.2. class: (varios elementos) .botonesRojos { background-color: red;}
9.5.1.3. id: (un elemento) #primerParrafo { color: gray; }
9.5.2. En caso de que un elemento esté afectado por varios selectores, la prioridad es:
9.5.2.1. 1.Id 2.Clase 3.Tipo
9.6. 9.3 Colores
9.6.1. Propiedades:
9.6.1.1. color: modifica el color de texto
9.6.1.2. background-color: modifica el color de fondo
9.6.2. Nombres: red, orange, blue, brown, cyan, black, white, gray, darkgray... más colores
9.6.3. RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno:
9.6.3.1. #FF0000 : tres números hexadecimales (rojo)
9.6.3.2. rgb(255,0,0) : decimales de 0 a 255
9.6.3.3. rgb(100%,0,0) : porcentajes
9.6.3.4. 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).
9.7. 9.4 Propiedades del texto
9.7.1. text-align : left, right, center o justify
9.7.2. text-decoration : underline, none, overline o line-through
9.7.3. text-transform : uppercase, lowercase y capitalize
9.7.4. font-size : 12px, 12pt o x-small, small, mediuum, large o x-large
9.7.5. font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc.
9.7.6. font-style : italic o normal
9.7.7. font-weight : bold o normal
9.7.8. text-shadow : -4px 2px 5px grey; 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra.
9.8. 9.5 Tamaño
9.8.1. Con CSS podemos modificar el tamaño de la mayoría de elementos
9.8.2. display: block. Visualizar como elemento de bloque.
9.8.3. display: inline. Visualizar como elemento en línea.
9.8.4. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
9.8.5. width, height, max-width, max-height, min-width y min-height
9.8.6. Sus valores se fijan en pixeles o en porcentajes
9.9. 9.6 Bordes
9.9.1. border-width : se establece en pixels
9.9.1.1. Border-left-width, border-right-width, border-top-width, border-bottom-width
9.9.2. border-style: solid, dashed (línea discontinua), dotted, double (línea doble)
9.9.2.1. border-left-style, border-right-style, border-top-style, border-bottom-style
9.9.3. border-color:
9.9.4. border: 2px solid red;
9.9.5. border-radius: radio del borde en px
9.10. 9.7 Márgenes
9.10.1. margin: distancia con otros elementos que lo rodean
9.10.2. padding: margen interno entre el elemento y su contenido
9.10.3. Tanto el margin como el padding se suma al width
9.10.4. 9.7.1 Márgenes individuales
9.10.4.1. Para modificar márgenes externos (margin) o internos (padding) podemos:
9.10.4.1.1. añadir -left –right –top –bottom
9.11. 9.8 Posicionamiento
9.11.1. position: static -> posicionamiento por defecto
9.11.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom
9.11.3. position: absolute -> posición dentro del documento
9.11.4. Position: sticky -> sitúa al elemento basado en el scroll
9.11.5. Position: fixed -> posición dentro de la ventana del navegador
9.12. 9.9 Imagen de fondo
9.12.1. Podemos fijar una imagen de fondo en un elemento usando estas propiedades:
9.12.1.1. background-image : url ('imagen.png');
9.12.1.2. background-image : url ('../imagen.png');
9.12.1.3. background-position: left top; /* posición horizontal y vertical */
9.12.1.4. background-position: center center;
9.12.1.5. background-position: right bottom;
9.12.1.6. background-repeat: repeat;
9.12.1.7. background-repeat: no-repeat;
9.12.1.8. background-repeat: repeat-x;
9.12.1.9. background-repeat: repeat-y;
10. 10. Publicación de páginas web
10.1. Hostinger.es
10.1.1. Crear un sitio web con nuestras propias páginas
10.1.1.1. Subiendo nuestras páginas por FTP (FileZilla) Subiendo nuestras páginas desde la propia página
10.1.2. Crear un blog con WordPress
10.1.3. Crear un sitio web desde la propia página de Hostinger.es