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

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
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

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. Estándares de publicación y editores web

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

2.1.1. En el lado del servidor

2.1.1.1. PHP, Java, .NET, Ruby, Python

2.1.1.2. SQL

2.1.2. En el lado del cliente

2.1.2.1. HTML

2.1.2.2. CSS

2.1.2.3. JavaScript

2.2. Accesibilidad y usabilidad en la web

2.2.1. Hay diversas formas de acceder

2.2.1.1. Texto alternativo para imágenes: alt

2.2.1.2. Usabilidad: facilidad de uso de una aplicación

2.3. Editores para la creación de contenido web

2.3.1. Lenguaje utilizado: HTML

3. Instalación de un Sistema de Gestión de Contenidos

3.1. Preparación

3.1.1. Instalación de XAMPP

3.1.1.1. En Windows

3.1.1.2. En Linux

3.1.1.2.1. Arranque y detención

3.1.2. Instalación de Wordpress en XAMPP

3.1.2.1. Nombre del blog

3.1.2.2. Soporte de correo

3.1.2.3. Tipo de instalación

4. Configuración del Sistema de Gestión de Contenidos

4.1. Primeros pasos

4.1.1. 1. Acceder a www.wordpress.com

4.1.2. 2. Configurar idioma desde Site Language en el menú Settings

4.1.3. 3. Modificar el tema y la apariencia

4.2. Escritorio

4.2.1. Muestra la actividad reciente

4.2.2. Se encuentra la sección de actualizaciones que permite renovar plugins y temas

4.3. Herramientas

4.3.1. Publicar esto

4.3.2. Exportar

4.3.3. Conversor de etiquetas y categorías

4.4. Biblioteca multimedia

4.4.1. Guarda archivos que puedes acceder a ellos después

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

5.1. Creación

5.2. Gestión

5.2.1. 1. Acceder a una página

5.2.2. 2. Editarla

5.2.3. 3. Puedes borrarla moviéndola a la papelera

5.2.4. 4. Puedes visualizarla

5.2.5. 5. Te permite una edición rápida

5.3. Creación de contenido

5.3.1. 1. Añadir una página

5.3.2. 2. Escribir en ella

5.3.3. 3. Publicarla

5.3.4. 4. Se puede observar en vista previa

5.3.5. 5. Se pueden añadir objetos

6. Gestión de Usuarios

6.1. Crear

6.1.1. Pueden ser

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. 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. Modificar apariencia

7.2. Gestionar widgets

7.2.1. Modificar apariencia

7.3. Añadir plugins

7.3.1. Para ampliar las funcionalidades de Wordpress

7.3.2. Por defecto

7.3.2.1. Akismet

7.3.2.2. Jetpack

7.3.2.3. Google Analistics

7.3.2.4. NextGEN Gallery

8. Estructura de un Documento Web: HTML

8.1. Etiquetas

8.1.1. Características

8.1.1.1. PÁRRAFO: <p>

8.1.1.2. SALTO DE LÍNEA: <br/>

8.2. Estructura básica

8.2.1. DOCTYPE

8.2.1.1. ARCHIVO DEL QUE SE TRATA

8.2.2. <html>

8.2.2.1. ELEMENTO RAÍZ

8.2.3. <head>

8.2.3.1. EL PRIMER ELEMENTO, DONDE AÑADES EL TÍTULO DE LA PÁGINA <title>

8.2.4. <meta charset="UFT-8"

8.2.4.1. CODIFICACIÓN DE CARACTERES

8.2.5. <body>

8.2.5.1. CONTENIDO

8.3. Tipos de elementos

8.3.1. Elementos de bloque

8.3.1.1. PÁRRAFO: <p>

8.3.1.2. BLOQUE DE DIVISIÓN: <div>

8.3.1.3. LISTAS: <li> <ol> <ul>

8.3.1.4. TABLA: <table>

8.3.2. Elementos en línea

8.3.2.1. IMÁGENES: <img>

8.3.2.2. ENLACES: <a>

8.3.2.3. BOTONES: <button

8.3.2.4. NEGRITA: <strong>

8.4. Etiquetas básicas

8.4.1. AGRUPAR ELEMENTOS EN LÍNEA: <span>

8.4.2. SUBRAYADO: <u>

8.4.3. ÉNFASIS/CURSIVA: <em>

8.4.4. SUBÍNDICE: <sub>

8.4.5. SUPERÍNDICE: <sup>

8.4.6. SEPARACIÓN HORIZONTAL: <hr>

8.5. Encabezados

8.5.1. Desde <h1> hasta <h6>...

8.6. Tablas

8.6.1. <tr> Filas

8.6.1.1. Rowspan: para unir

8.6.2. <td> Celdas

8.6.2.1. Colspan: para unir

8.7. Imagenes

8.7.1. <img src=":/imagenes/img.jpg" alt="texto"/>

8.8. Enlaces

8.8.1. <a href= "Google">Enlace a Google</a>

9. Personalización del Estilo: CSS

9.1. Colocación del código CSS

9.1.1. EN UN TRIBUTO HTML, CON EL ATRIBUTO <style>

9.1.1.1. <style> permite insertar CSS directamente

9.1.2. CON LA ETIQUETA <style>

9.1.2.1. Dentro del elemento <head>

9.1.3. EN UN ARCHIVO INDEPENDIENTE

9.1.3.1. Archivo con extensión .css en un directorio diferente a HTML

9.2. Selectores Básicos

9.2.1. POR TIPO

9.2.1.1. <p> y <a>

9.2.2. DE CLASE

9.2.2.1. un punto (.) / class /

9.2.3. DE id

9.2.3.1. # / id

9.3. Colores

9.3.1. Color del texto

9.3.2. background-color

9.3.3. color: blue

9.3.4. #FFABFF

9.3.5. rgb (255, 0 ,0)

9.3.6. rgb (100%, 0%, 0%)

9.3.7. rgba (255,0,0,0.5)

9.4. Texto

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

9.4.1.1. left

9.4.1.2. right

9.4.1.3. justify

9.4.1.4. center

9.4.2. Subrayado (text-decoration)

9.4.2.1. underline

9.4.2.2. none

9.4.2.3. overline

9.4.2.4. line-through

9.4.3. Transformación mayúsculas / minúsculas (text-transform)

9.4.3.1. uppercase

9.4.3.2. lowercase

9.4.3.3. capitalize

9.4.4. Tamaño del texto (font-size)

9.4.4.1. x-small

9.4.4.2. small

9.4.4.3. medium

9.4.4.4. large

9.4.4.5. x-large

9.4.5. Tipo de fuente (font-family)

9.4.6. Cursiva (font-style)

9.4.6.1. italic

9.4.6.2. normal

9.4.7. Grosor (font-weight)

9.4.7.1. bold

9.4.8. Sombreado (text-shadow)

9.4.8.1. px, px, px color

9.5. Tamaño

9.5.1. Dislplay: block

9.5.2. Display: inline

9.5.3. Diplay: inline-block

9.5.4. width - ancho

9.5.5. height - alto

9.6. Bordes

9.6.1. Border-width

9.6.1.1. left

9.6.1.2. right

9.6.1.3. top

9.6.1.4. bottom

9.6.2. Border-style

9.6.2.1. solid

9.6.2.2. dashed

9.6.2.3. dotted

9.6.2.4. double

9.6.3. Border-color

9.6.4. Border-radius

9.6.4.1. px, px, px, px

9.7. Márgenes

9.7.1. Margin

9.7.1.1. espacio entre elementos

9.7.2. Padding

9.7.2.1. espacio o margen interno

9.8. Posicionamiento

9.8.1. Position-static

9.8.2. Position-relative

9.8.3. Position-absolute

9.8.4. Position-fixed

9.8.5. Margin-top y margin-left

9.9. Imagen de Fondo

9.9.1. Background-image

9.9.1.1. url

9.9.2. Background-position

9.9.3. Background-repeat

10. Publicación de Páginas Web

10.1. Contratación de un alojamiento gratuito (HOSTINGER)

10.1.1. WWW.hostinger.es

10.2. Subir contenido al alojamiento

10.3. Instalación de Wordpress en hostinger