1. Creación de paginas web estáticas
1.1. Creación de página de inicio
1.1.1. Ajustes
1.1.1.1. Se modifican la pagina frontal y sus secciones
1.2. Gestión de páginas estáticas
1.2.1. Páginas
1.2.1.1. Gestionar las distintas páginas de contenido estático
1.2.1.2. Posible filtrar entradas y páginas
1.2.1.3. Acciones
1.2.1.3.1. Editar
1.2.1.3.2. Mover a la papelera
1.2.1.3.3. Ver
1.2.1.3.4. Edición
1.2.1.4. Superior
1.2.1.4.1. Estable la relación entre páginas, es decir, si una es o no subsección de otras
1.3. Creación de contenido estático
1.3.1. Blog
1.3.1.1. En la sección Páginas, mediante la opción Añadir nueva.
1.3.1.2. Se puede configurar desde el menú Publicar
2. Gestión de usuarios
2.1. Crear usuarios
2.1.1. Datos requeridos
2.1.1.1. Nombre de usuario
2.1.1.2. Correo electrónico
2.1.2. Roles
2.1.2.1. Subscriptores
2.1.2.1.1. Leer y añadir comentarios
2.1.2.2. Colaboradores
2.1.2.2.1. Crear y gestionar sus propias entredas pero no pueden publicarlas directamente
2.1.2.3. Autores
2.1.2.3.1. A diferencia del colaborador , este rol permite publicar entradas en el blog
2.1.2.4. Editores
2.1.2.4.1. Posibilidad de gestionar y pueblo
2.1.2.5. Administradores
2.1.2.5.1. Pueden acceder a las funciones de control
2.2. Modificar perfil
2.2.1. Desactivar el editor visual
2.2.1.1. Permite editar en HTML
2.2.2. Esquema de color
2.2.2.1. Modificar la paleta de colores
2.2.3. Atajos de teclado
2.2.3.1. J+K
2.2.3.1.1. Seleccionar el comentario anterior o siguiente
2.2.3.2. A
2.2.3.2.1. Aprobar un comentario
2.2.3.3. S
2.2.3.3.1. Marcar un comentario como SPAM
2.2.3.4. D
2.2.3.4.1. Eliminación
2.2.3.5. Q
2.2.3.5.1. Activar la edición rápida de un comentario
2.2.4. Barra de herramientas
2.2.4.1. Muestra la guerra de herramientas
2.2.5. Foto de perfil
2.2.5.1. Muestra la fotografía de perfil en los comentarios realizados por el usuario.
3. Temas, widgets y plugins
3.1. Añadir temas
3.1.1. Desde la sección apariencia se puede cambiar, o personalzar añadiendo temas o instalando otros.
3.1.1.1. Añadir nuevo
3.1.1.1.1. instalar un tema entre los disponibles
3.1.1.1.2. Buscar temas por sus nombres en un buscador, o mediante filtros
3.1.1.2. Se puede usar vista previa o instalarlo
3.2. Gestionar widgets
3.2.1. Son secciones independientes de contenido
3.2.1.1. Se situan normalmente en barras laterales
3.2.1.2. Desde apariencia se pueden gestionar cuales serán visibles.
3.2.1.3. Se pueden reorganizarse y personalizarse, cada uno de un modo distinto según su función
3.3. Añadir plugins
3.3.1. Akismet
3.3.1.1. Detecta spam filtrando listas de comentarios para sugerir cuales tienen o podrían tenerlo
3.3.2. Jetpack
3.3.2.1. Añade las características de la página web a la versión de escritorio
3.3.3. Google Analytics
3.3.3.1. Agrega el seguimiento de Analytics a las visitas que recibe el sitio web
3.3.4. NextGEN Gallery
3.3.4.1. Incluye más opciones de personalización de imágenes
4. Estructura de un documento HTML
4.1. Etiquetas
4.1.1. Etiquetas básicas
4.1.1.1. <div> Divide la página en secciones </div>
4.1.1.2. <p> Párrafo </p>
4.1.1.3. <span> Sirve para agrupar elementos en línea </span>
4.1.1.4. <u> Subrayado </u>
4.1.1.5. <em> Cursiva o énfasis </em>
4.1.1.6. <strong> Negrita o destacado </strong>
4.1.1.7. <sub> Subíndice </sub>
4.1.1.8. <br> Salto de línea
4.1.1.9. <hr> Línea de separación horizontal
4.2. Atributos
4.2.1. Se añaden en la etiqueta de apertura
4.2.2. Ejemplos:
4.2.2.1. <img src="foto1234.jpg" />
4.2.2.2. <img src="foto2134.jpg" alt="Dia soleado en el campo" />
4.2.2.3. <p align="right">Párrafo alineado a la derecha.</p>
4.3. Estructura básica
4.3.1. <!DOCTYPE html> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> Contenido de la página </body> </html>
4.4. Tipos de elementos
4.5. Listas
4.5.1. <li> Representa cada uno de los items de la lista </li>
4.5.2. <ol> Representa una lista ordenada </ol>
4.5.3. <ul> Representa una lista sin orden </ul>
4.6. Encabezados
4.6.1. Los encabezados son títulos para las diferentes secciones de una página web
4.6.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
4.6.3. El número indica la importancia del título (tamaño). El 1 el más importante.
4.7. Tablas
4.7.1. Usar el código<table>
4.7.1.1. Las filas son <tr>
4.7.1.2. El atributo de bordes es border
4.7.1.3. Las columnas son<td>
4.7.1.4. Se unen celdas con colspan, y rowspan
4.8. Imágenes
4.8.1. Etiqueta: <img>
4.9. Enlaces
4.9.1. Etiqueta <a>
5. Personalización de CSS
5.1. Colocación de código
5.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" />
5.2. Selectores básicos
5.2.1. Por tipo : Etiqueta HTML. Ejemplo: p { color: green; } class: (varios elementos) .botonesRojos { background-color: red;} id: (un elemento) #primerParrafo { color: gray; }
5.3. Colores
5.3.1. color: modifica el color de texto
5.3.2. background-color: modifica el color de fondo
5.4. Texto
5.4.1. text-align : left, right, center o justify
5.4.2. text-decoration : underline, none, overline o line-through
5.4.3. text-transform : uppercase, lowercase y capitalize
5.4.4. font-size : 12px, 12pt o x-small, small, mediuum, large o x-large
5.4.5. font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc.
5.4.6. font-style : italic o normal
5.4.7. font-weight : bold o normal
5.4.8. text-shadow : -4px 2px 5px grey;
5.4.9. 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra
5.5. Tamaño
5.5.1. display: block. Visualizar como elemento de bloque.
5.5.2. display: inline. Visualizar como elemento en línea.
5.5.3. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
5.5.4. width, height, max-width, max-height, min-width y min-height
5.6. Bordes
5.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
5.7. Márgenes
5.7.1. margin: distancia con otros elementos que lo rodean
5.7.2. padding: margen interno entre el elemento y su contenido
5.8. Posicionamiento
5.8.1. position: static -> posicionamiento por defecto
5.8.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom
5.8.3. position: absolute -> posición dentro del documento
5.8.4. Position: sticky -> sitúa al elemento basado en el scroll
5.8.5. Position: fixed -> posición dentro de la ventana del navegador
5.9. Imagen de fondo
5.9.1. background-image
5.9.2. background-position
5.9.3. background-repeat
5.10. CSS personalizado en Wordpress
6. Tipos de páginas web
6.1. Según el nivel de interacción con el usuario
6.1.1. Página estática
6.1.1.1. El contenido solo puede ser modificada por el administrador de la misma
6.1.2. Página dinámico
6.1.2.1. Permite al usuario interactuar con el sito web, ya sea para crear contenidos o para realizar otras acciones.
6.2. Según la temática
6.2.1. Blog, foro o red social
6.2.1.1. Paginas destinadas a que los usuarios interaccionen entre sí
6.2.2. Presentación o corporativo
6.2.2.1. Sitio web destinado a publicitar un producto, una empresa, etc
6.2.3. Comercio electrónico
6.2.3.1. Página destinada a la realización de transacciones.
6.2.4. Aplicaciones web
6.2.4.1. Destinados a ofrecer una funcionalidad tradicionalmente propia de aplicaciones de escritorio
7. Estándares de publicación y editores web
7.1. Lenguajes
7.1.1. En el lado del servidor
7.1.1.1. Permiten programar el comportamiento del servidor web en el momento de atender las peticiones de los usuarios y de generar contenidos HTML correspondiente.
7.1.1.1.1. PHP
7.1.1.1.2. Java
7.1.1.1.3. .NET
7.1.1.1.4. Ruby
7.1.1.1.5. Python
7.1.2. En el lado del cliente
7.1.2.1. HTML
7.1.2.1.1. Lenguaje de marcado compuesto por etiquetas que describen y estructuran el contenido de una página web
7.1.2.2. CSS
7.1.2.2.1. Utilizado para definir el estilo con el que se presenta la estructura HTML
7.1.2.3. JavaScript
7.1.2.3.1. Lenguaje de programación interpretado por el navegador o cliente web y que añade dinamismo a las páginas ya que permite modificar su estructura y estilo
7.2. Accesibilidad
7.2.1. Existen una variedad de limitaciones visuales, motrices, motrices, auditivas y cognitivas que requieren la utilización de herramientas y programas especiales
7.2.2. Se crearon, impulsados por W3C, los estándares de accesibilidad
7.3. Editores
7.3.1. Editores de texto plano
7.3.1.1. Normalmente, hay que empezar a crear el documento desde cero
7.3.1.1.1. Notepad+++
7.3.2. Editores de texto avanzados
7.3.2.1. Se engloban en ambientes de IDE
7.3.2.1.1. Gestión de plantillas
7.3.2.1.2. Generación de código automática
7.3.2.1.3. Autocompletar texto
7.3.2.1.4. Eclipse
7.3.3. Editores visuales
7.3.3.1. Se caracterizan por ofrecer creación de contenido web de forma gráfica y visual, sin necesdad de escribir código.
7.3.3.2. Se crean como si fuesen documentos de texto
7.3.3.3. Permiten observar el diseño de la página a medida que es creada
7.3.3.4. Kompozer
8. Instalación de un sistema de gestión de contenidos
8.1. Preparación del entorno
8.2. Instalación de XAMPP
8.2.1. En WINDOWS
8.2.2. En Linux
8.2.3. Arranque de XAMPP en Linux
8.2.3.1. Después e la instalación se puede arrancar y detener el programa facilmente con los servicios Apache y MySQL
8.2.4. Instalación de Wordpress en XAMP
8.2.4.1. Pasos
8.2.4.1.1. Se descarga el instalador de wordpress
8.2.4.1.2. Se especifica el directorio en el que estará el archivo
8.2.4.1.3. Se especifica el administrador y contraseña para regular el programa
8.2.4.1.4. Se añade el nombre del blog. sabiendo que también se puede editar el estilo, diseño... del blog.
8.2.4.1.5. Se pide una cuenta existente de correo para poder enviar notificaciones y una cuenta de wordpress si la hubiese.
8.2.4.1.6. Tipo de instalación
9. Gestión de contenidos
9.1. Primeros pasos
9.1.1. Pantalla de inicio
9.1.1.1. Resumen de actividad reciente
9.1.1.2. Estadísticas del sitio
9.1.1.3. Panel de control
9.1.1.3.1. Similar aunque más compleja a la versión web
9.1.1.3.2. Settings
9.1.1.3.3. Apariencia
9.2. Escritorio
9.2.1. Muestra
9.2.1.1. Actividad reciente
9.2.1.2. Pblicaciones
9.2.1.3. Comentarios
9.2.1.4. Noticias
9.2.2. Ayuda
9.2.2.1. Obtener información sobre las funcionalidades
9.2.3. Actualizaciones
9.2.3.1. Actualizar pluggins y los temas
9.2.3.2. Actualizar gestor de contenidos
9.3. Herramientas
9.3.1. Publicar esto
9.3.1.1. Publicar de manera instantánea una publicación de página externa
9.3.2. Exportar
9.3.2.1. Descargar copias de seguridad del sitio
9.3.2.2. Descargar configuracíon del sitio
9.3.3. Importar
9.3.3.1. Importar archivos o entradas
9.3.4. Conversor de etiquetas y categorías
9.3.4.1. Transforma etiquetas en categorías y viceversa
9.4. Bibloteca multimedia
9.4.1. Almacenar archivos de de forma local para evitar pérdida
9.4.2. Medios
9.4.2.1. Cargar archivos adjuntables al contenido creado
9.4.2.2. Enlazar el contenido almacenado a la página para su descarga
9.4.2.3. Barra de herramientas
9.4.2.3.1. Filtros para búsqueda de contenidos
9.4.2.3.2. Selección multiple para borrar elementos
10. Publicación de páginas web
10.1. Contratación
10.1.1. Hostinger nos permite:
10.1.1.1. Crear un sitio web con nuestras propias páginas
10.1.1.1.1. Subiendo nuestras páginas por FTP (FileZilla)
10.1.1.1.2. Subiendo nuestras páginas desde la propia página
10.1.1.2. Crear un blog con WordPress
10.1.1.3. Crear un sitio web desde la propia página de Hostinger.es