Diseño y edición de páginas web

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Diseño y edición de páginas web por Mind Map: Diseño y edición de páginas web

1. Tipos de páginas web

1.1. Según el nivel de interacción con el usuario

1.1.1. Página estática

1.1.2. Página dinámica

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

2. Instalación de un sistema de gestión de contenidos

2.1. Preparación del entorno

2.1.1. Innstalar XAMPP

2.1.1.1. XAMPP

2.1.1.1.1. Ventaja:  gestión de los diferentes servicios y proporcionar herramientas para la fácil instalación de gestores de contenidos.

2.1.1.1.2. Se instala para crear y desarrollar sitios webs antes de su publicación

2.1.1.1.3. Su instalación crea un usuario (root) con contraseña vacía para gestionar las bases de datos

2.1.2. Instalar WordPress

2.2. Instalación de XAMPP en windows

2.3. Instalación de XAMPP en linux

2.4. Arranque y detención de XAMPP en linux

2.5. Instalación de WordPress en XAMPP

2.5.1. Nombre del blog

2.5.2. Soporte de correo

2.5.3. Tipo de instalación

3. Configuración del sistema de gestión de contenidos

3.1. Primeros pasos

3.1.1. Barra de navegación para acceder a las diferentes secciones

3.1.2. Modificar parámetros en settings, entre otros:

3.1.2.1. Idioma

3.1.2.2. Nombre del sitio

3.1.2.3. Descripción

3.1.2.4. Formato de fecha y hora

3.1.3. Apariencia

3.1.3.1. Elegir tema

3.2. Escritorio

3.2.1. Muestra actividad reciente del sitio

3.2.2. Actualizaciones

3.2.2.1. Actualizar

3.2.2.1.1. Temas a las versiones más recientes

3.2.2.1.2. Pluggins instalados

3.2.2.1.3. Gestor de contenidos

3.2.3. Ayuda

3.3. Herramientas

3.3.1. Conversor de etiquetas y categorias

3.3.2. Publicar esto

3.3.3. Importar

3.3.4. Exportar

3.4. Biblioteca multimedia

3.4.1. Sección medios: permite cargar archivos que pueden adjuntarse fácilmente al contenido creado

4. Estándares de publicación y editores web

4.1. Lenguaje para la creación de páginas web

4.1.1. En el lado del servidor

4.1.1.1. PHP, Java, .NET, Ruby, Python

4.1.2. En el lado del cliente

4.1.2.1. HTML, CSS, JavaScript

4.2. Accesibilidad y usabilidad en la web

4.2.1. Hay limitaciones visuales, motrices, auditivas, y cognitivas para acceder

4.2.2. Algunas pautas de accesibilidad: textos alternativos para las imágenes que las decriban

4.2.3. La usabilidad es la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso

4.3. Editores para la creación de contenidos web

4.3.1. Simples

4.3.1.1. Se limitan a resaltar la sintaxis del lenguaje utilizad (NotePad++, Kate, Geany)

4.3.1.1.1. Ej: NotePad++, Kate, Geany

4.3.2. Avanzados

4.3.2.1. Funciones secundarias como el autocompletado de texto, gestión de plantillas predefinidas, sincronización remota con el servidor web, etc.

4.3.2.1.1. Ej: Eclipse o WebStorm

4.3.3. WISIWIG

4.3.3.1. Ofrecen la capacidad de crear contenidos web de forma visual, sin necesidad de escribir código directamente

4.3.3.1.1. Ej: BlueGriffon, KompoZer

5. Creación de páginas estáticas

5.1. Creación de una página de inicio estática

5.1.1. Desactivar la página de entradas desde ajustes-lectura y seleccionar página estática

5.2. Gestión de páginas estáticas

5.2.1. Páginas

5.2.1.1. Gestionar las diferentes páginas del sitio web

5.2.2. Editar

5.2.3. Mover a la papelera

5.2.4. Ver

5.2.5. Edición rápida

5.2.6. Superior u orden

5.2.6.1. Para mostrar el orden de las páginas

5.3. Creación de contenido estático

5.3.1. Páginas-añadir nueva

5.3.2. Controlar  desde el menú publicar

5.3.3. Añadir objeto

5.3.3.1. Para insertar imágenes,  vídeos, audios, etc.

6. Gestión de usuarios

6.1. Crear usuarios

6.1.1. Nombre de usuario

6.1.2. Correo electrónico

6.1.3. Contraseña automática

6.1.4. Roles

6.1.4.1. Suscriptores

6.1.4.2. Colaboradores

6.1.4.3. Autores

6.1.4.4. Editores

6.1.4.5. Administradores

6.2. Modificar perfil

6.2.1. Desactivar el editor visual

6.2.2. Esquema de color

6.2.3. Atajos de teclado

6.2.4. Barra de herramientas

6.2.5. Foto de perfil

6.3. Gestionar usuarios existentes

7. Temas, widgets y plugins

7.1. Añadir temas

7.1.1. Apariencia-añadir nuevo

7.2. Gestionar widgets

7.2.1. Secciones independientes de contenido que pueden situarse en cualquier parte del sitio web

7.2.2. Widgets-apariencia gestionar si son visibles o no

7.2.3. Menú de personalización del tema (gestionar en el personalizador-Widgets)

7.3. Añadir plugins

7.3.1. Para ampliar las funcionalidades en WordPress

7.3.2. Se gestionan como los temas

7.3.3. Más populares

7.3.3.1. Akismet

7.3.3.2. Jetpack

7.3.3.3. Google Analytics

7.3.3.4. NextGEN Gallery

8. Estructura de un documento web: HTML

8.1. Etiquetas

8.1.1. <Nombre>

8.1.2. Ejemplos

8.1.2.1. Texto normal <p> y en negrita <strong>

8.1.2.2. Salto de línea <br/>

8.2. Atributos

8.2.1. Valores que se agregan a una etiqueta para configurarla o definir su contenido

8.2.2. Ej: <img src="image.jpg" alt="imagen de prueba"/>

8.3. Estructura básica de una página HTML

8.3.1. DOCTYPE

8.3.2. <html>

8.3.3. <head>

8.3.4. <meta charset="UTF-8"

8.3.5. <body>

8.4. Tipos de elementos

8.4.1. Elementos de bloque

8.4.2. Elementos en línea

8.5. Etiquetas básicas

8.5.1. División: <div>

8.5.2. Párrafo:<p>

8.5.3. Agrupar elementos en línea: <span>

8.5.4. Subrayado: <u>

8.5.5. Cursiva o énfasis: <em>

8.5.6. Negrita: <strong>

8.5.7. Subíndice: <sub>

8.5.8. Superíndice:  <sup>

8.5.9. Salto de línea: <br>

8.5.10. Separación horizontal: <hr>

8.6. Listas

8.6.1. Desordenandas <ul>

8.6.1.1. elementos que componen la lista <li>

8.6.2. Ordenadas <ol>

8.6.2.1. elementos que componen la lista <li>

8.6.3. Anidada

8.7. Encabezados

8.7.1. Creación de títulos

8.7.2. Definidas desde h1>hasta >h6

8.8. Tablas

8.8.1. <table>

8.8.2. <tr> represnta la fila

8.8.3. <td> representa la celda

8.9. Imágenes

8.9.1. <img>

8.9.2. En caso de que una imagen sea externa, introducir la URL completa

8.9.2.1. Imagen en el subdirectorio img

8.9.2.2. Imagen en el directorio anterior (padre)

8.9.2.3. Imagen en un servidor externo

8.10. Enlaces

8.10.1. <a>

8.10.2. href para incluir la ruta hacia la página con la que enlazará

9. Personalización del estilo: CSS

9.1. Colocación del código CSS

9.1.1. En un atributo HTML, con el atributo style

9.1.2. Con la etiqueta<style>

9.1.3. en un archivo independiente

9.2. Selectores básicos

9.2.1. Selectores por tipo

9.2.2. Selectores de clase

9.2.3. Selectores de id

9.3. Colores

9.3.1. Nombre del color

9.3.2. Proporción de cada valor RGB en código herramientas precedido de almohadilla

9.3.3. Proporción de cada valor RGB en decimales , de 0 a 55

9.3.4. Proporción de cada valor RGB en porcentajes

9.3.5. Proporción de cada valor RGB, mas un valor de 0 a 1 que indica la transparencia de dicho color

9.4. Texto

9.4.1. Propiedades que modifican el texto (font o text)

9.4.1.1. Alineación del texto (text-align)

9.4.1.2. Subrayado (text-decoration)

9.4.1.3. Transformación mayúsculas (text-transform)

9.4.1.4. Tamaño texto (font-size)

9.4.1.5. Tipo de fuente (font-family)

9.4.1.6. Cursiva (font-style)

9.4.1.7. Grosor del texto (font-weight)

9.4.1.8. Sombreado (text-shadow)

9.5. Tamaño

9.5.1. Los elementos ocupan todo el espacio disponible, mientras que el tamaño a lo ancho (width) varía en función del espacio de su contenido y el tamaño en vertical (height) dependerá de los dos anteriores.

9.5.2. La anchura y la altura se pueden establecer con propiedades CSS.

9.5.3. El tamaño mínimo de un elemento se puede establecer mediante las propiedades     min-width y min-height

9.6. Bordes

9.6.1. border-width

9.6.1.1. border-left-width

9.6.1.2. border-right-width

9.6.1.3. border-top-width

9.6.1.4. border-bottom-width

9.6.2. border-style

9.6.2.1. solid (línea contínua)

9.6.2.2. dashed (línea discontínua)

9.6.2.3. dotted (con puntos)

9.6.2.4. double (línea contínua doble)

9.6.3. border-color

9.6.4. border

9.6.4.1. border: 2px solid red (borde rojo continuo de dos píxeles de grosos)

9.6.4.2. border-left

9.6.4.3. border-right

9.6.4.4. border-top

9.6.4.5. border-button

9.6.5. border-radius

9.7. Márgenes

9.7.1. margin

9.7.2. padding

9.8. Posicionamiento

9.8.1. position: static

9.8.2. position: relative

9.8.3. position: absolute

9.8.4. margin-top y margin-left

9.8.5. position: fixed

9.9. Imagen de fondo

9.9.1. background-image

9.9.2. background-position

9.9.3. background-repeat

9.10. CSS personalizado en WordPress

10. Publicación de páginas web

10.1. Contratación de un alojamiento gratuito en Hostinger

10.2. Subir contenido al alojamiento

10.3. Instalación de Wordpress en Hostinger