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

Get Started. It's Free
or sign up with your email address
Rocket clouds
Diseño y edición de páginas web by Mind Map: Diseño y edición de páginas web

1. 1. Tipos de páginas web

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

1.1.1. hay dos tipos de páginas

1.1.1.1. Página estática

1.1.1.1.1. El único permitido para modificar la página es el administrador.

1.1.1.2. Página dinámica

1.1.1.2.1. Es posible la comunicación con otros usuarios.

1.2. Según la temática

1.2.1. Existen diferentes tipos de temática para las páginas web

1.2.1.1. Blog, foro o red social

1.2.1.1.1. En el que los usuarios interaccionen entre sí mismos.

1.2.1.2. Presentación o corporativa

1.2.1.2.1. Zona web para presentar un producto.

1.2.1.3. Comercio electrónico

1.2.1.3.1. Zona de compra-venta de productos y sus sitios de pago.

1.2.1.4. Aplicaciones web

1.2.1.4.1. Zona a ofrecer gestores de correo.

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

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

2.1.1. Los lenguajes que más se utilizan son

2.1.1.1. En el lado servidor

2.1.1.1.1. PHP, Java, .Net, Ruby, Python

2.1.1.2. En lado del cliente

2.1.1.2.1. HTML

2.1.1.2.2. CSS

2.1.1.2.3. JavaScript

2.2. Accesibilidad y usabilidad en la web

2.2.1. Creación del W3C que regulan los estándares de accesibilidad.

2.2.2. La ISO valora a veces de forma subjetiva la facilidad de uso de una aplicación o web.

2.3. Editores para la creación de contenido web

2.3.1. Se limitan a resaltar la sintaxis del lenguaje utilizado.

2.3.2. Hay diferentes tipos de editores como Notepad++, Geany, gedit.

2.3.3. Hay variedad de formas para editar

2.3.3.1. Edición visual

2.3.3.2. Texto de programas

2.3.3.2.1. Microsoft office

2.3.3.3. Modificaciones a posteriori

2.3.3.3.1. Dreamweaver

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

3.1. Preparación del entorno

3.1.1. El XAMPP solo se instala en un equipo local

3.2. Instalación de XAMPP en windows

3.2.1. Durante la instalación se solicitará al usuario qué servicios desea instalar.

3.2.2. En el xampp-control hay que hacer clic en Ejecutar como administrador.

3.3. instalación de XAMPP en Linux

3.3.1. Está disponible en plataformas de 32 y 64 bits

3.3.2. Se requiere el XAMPP, abrir el terminal como administrador con un usuario y ejecutar una serie de comandos.

3.4. Arranque y detención de XAMPP en Linux

3.4.1. Permite iniciar el panel de control que permitirá iniciar y detener los diferentes servicios.

3.5. Instalación de Wordpress en XAMPP

3.5.1. Hay que seguir los siguientes pasos

3.5.1.1. Nombre del blog

3.5.1.1.1. Se puede poner un nombre para crear blogs u otras cosas.

3.5.1.2. Soporte de correo

3.5.1.2.1. La permisión de enviar corres a los usuarios

3.5.1.3. Tipo de instalación

3.5.1.3.1. Ajustes para el desarrollo

3.5.1.3.2. Ajustes para producción

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

4.1. Primeros pasos

4.1.1. En la parte izquierda se ubica la barra de navegación que permite acceder a diferentes secciones.

4.2. Escritorio

4.2.1. Es posible actualizar el gestor de contenidos a una versión más reciente.

4.3. Herramientas

4.3.1. Hay deferentes funciones como "publicar esto", "exportar", "conversor de etiquetas y categorías".

4.4. Biblioteca multimedia

4.4.1. En la sección de ¨"medios" permite cargar archivos que se pueden adjuntar más tarde.

5. 6. Gestión de usuarios

5.1. Crear usuarios

5.1.1. Para la invitación de usuarios se puede modificar su rol en

5.1.1.1. Suscriptores

5.1.1.1.1. Leer y añadir comentarios

5.1.1.2. Colaboradores

5.1.1.2.1. Gestión de sus páginas sin ser publicadas.

5.1.1.3. Autores

5.1.1.3.1. Permite publicarlas a diferencia de los colaboradores.

5.1.1.4. Editores

5.1.1.4.1. Permite modificar las entradas.

5.1.1.5. Administradores

5.1.1.5.1. Pueden acceder a todas las funciones

5.2. Modificar perfil

5.2.1. Las opciones más destacadas son

5.2.1.1. Desactivar el editor visual

5.2.1.1.1. Permisión de editar el contenido HTML

5.2.1.2. Esquema de color

5.2.1.2.1. Permisión de modificar la paleta de colores en el panel de control.

5.2.1.3. Atajos de teclado

5.2.1.3.1. Posibilidad de moderar rápidamente los comentarios con teclas definidas.

5.2.1.4. Barra de herramientas

5.2.1.4.1. Muestra de la barra de herramientas en la parte superior.

5.2.1.5. Fotos de perfil

5.2.1.5.1. Muestra de la fotografía de perfil en los comentarios.

5.3. Gestionar usuarios existentes

5.3.1. Se dispone de un buscador para filtrar por nombre.

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

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

6.1.1. Wordpress ofrece una serie de acciones predefinidas.

6.1.1.1. Editar

6.1.1.1.1. Modificación de la página.

6.1.1.2. Mover a la papelera

6.1.1.2.1. Eliminar la página del sitio.

6.1.1.3. Ver

6.1.1.3.1. Visualizar la página.

6.1.1.4. Edición rápida

6.1.1.4.1. Se puede editar sin tener que abrir ninguna sección.

6.2. Creación de una página de inicio

6.3. Creación de contenido estático

6.3.1. La publicación de una entrada en la página estática del blog.

7. 7. Temas, widgets y plugins

7.1. Añadir temas

7.1.1. En el botón de "añadir nuevo" permite poner nuevos temas

7.2. Gestionar widgets

7.2.1. Son secciones independietnes de contenido que pueden situarse en cualquier parte de la web

7.3. Añadir plugins

7.3.1. Los plugins más populares son

7.3.1.1. Akismet

7.3.1.1.1. Detecta si hay spam

7.3.1.2. Jetpack

7.3.1.2.1. Añade características

7.3.1.3. Google Analytics

7.3.1.3.1. Agrega el seguimiento de las visitas al web

7.3.1.4. NextGEN Gallery

7.3.1.4.1. Gestión

8. 8. Estructura de un documento web: HTML

8.1. Etiquetas

8.1.1. Hay 3 tipos de eiquetas

8.1.1.1. Párrafo

8.1.1.2. Salto de línea

8.1.1.3. Párrafo con contenido en negrita

8.2. Atributos

8.2.1. son valores adicionales que se agregan a una etiqueta para configurarla

8.2.1.1. <img>

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

8.3.1. Hay algunos elementos básicos que constituye la estcuctura HTML

8.3.1.1. DOCTYPE

8.3.1.1.1. Dice al navegador qué tipo de archivo se trata

8.3.1.2. <html>

8.3.1.2.1. Elemento que contiene todo HTML después de DOCTYPE

8.3.1.3. <head>

8.3.1.3.1. Es la información general sobre la página

8.3.1.4. <meta charset="UTF-8" />

8.3.1.4.1. Indica al navegador el tipo de codificación

8.3.1.5. <body>

8.3.1.5.1. Se pone después de <head> que es el contenido de la página

8.4. Tipos de elemntos

8.4.1. Hay dos tipos de elementos

8.4.1.1. Elementos de bloque

8.4.1.1.1. Ocupan por defecto todo el ancho posible

8.4.1.1.2. Pueden ser sustituidos tras un elemento de bloque

8.4.1.1.3. Pueden contener otros elementos de bloque

8.4.1.2. Elementos en línea

8.4.1.2.1. Solo ocupan el ancho necesario

8.4.1.2.2. Se sitúan uno junto al otro

8.4.1.2.3. Pueden contener otros elementos en línea

8.5. Etiquetas básicas

8.5.1. División

8.5.2. Párrafo

8.5.3. Agrupar elementos en línea

8.5.4. Subrayado

8.5.5. Cursiva o énfasis

8.5.6. Subíndice

8.5.7. Superíndice

8.5.8. Salto de línea

8.5.9. Separación horizontal

8.6. Listas

8.6.1. Es una estructura que engloba un conjunto de elementos que la componen

8.6.2. Lista ordenada

8.6.2.1. <ol>

8.6.2.2. reversed

8.6.2.3. Start

8.6.2.4. type

8.6.2.4.1. 1

8.7. Encabezados

8.7.1. Etiquetas

8.7.1.1. <h1> hasta <h6>

8.7.2. <h1> mayor nivel y mayor letra, <h2> menor nivel y letra y así sucesivamente

8.8. Tablas

8.8.1. <tr>

8.8.1.1. table row que solo contiene celdas <td>

8.9. Imágenes

8.9.1. <img>

8.9.2. Se debe incluir la URL completa

8.9.2.1. Imagen en el subdirectorio img

8.9.2.2. Imagen en el directorio anterior

8.9.2.3. Imagen en un servidor externo

8.9.3. Se puede utilizar los atributos width y height

8.10. Enlaces

8.10.1. La etiqueta utilizada para crear un enlace es <a>

8.10.1.1. Los atributos son

8.10.1.1.1. href

8.10.1.1.2. target

8.10.1.1.3. _blank

9. 9. Personalización del estilo: CSS

9.1. Colocación del código CSS

9.1.1. El atributo style se puede incluir en cualquier etiqueta

9.1.2. Style permite establecer un diseño general dentro de <head>

9.1.3. .ccs es un extensión mediante un archivo exteno

9.2. Selectores básicos

9.2.1. Selectores por tipo

9.2.1.1. (p) o (a)

9.2.2. Selectores por clase

9.2.2.1. (.) con el atributo class

9.2.3. Selectores de id

9.2.3.1. El atributo id se expresa mediante (#)

9.3. Colores

9.3.1. Es posible establecer un valor cromático

9.3.1.1. Nombre del color

9.3.1.2. Proporción de cada valor RGB en código hexadecimal precedido de almohadilla

9.3.1.3. Proporción de cada valor RGB en decimales, de 0 a 255

9.3.1.4. Proporción de cada valor RGB en porcentajes

9.3.1.5. Proporción de cada valor RGB, más un valor de 0 a 1 que indica la transparencia de dicho color

9.3.2. Se utiliza el texto cmyk(50%, 100%)

9.4. Texto

9.4.1. Propiedades

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

9.4.1.1.1. left

9.4.1.1.2. right

9.4.1.1.3. justify

9.4.1.2. Subrayado (text-decoration)

9.4.1.2.1. underline

9.4.1.2.2. line-through

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

9.4.1.3.1. uppercase

9.4.1.3.2. lowercase

9.4.1.3.3. capitalize

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

9.4.1.4.1. px

9.4.1.4.2. pt

9.4.1.4.3. %

9.4.1.4.4. em

9.4.1.5. Tipo de fuente (font-family)

9.4.1.5.1. serif

9.4.1.6. Cursiva (font-style)

9.4.1.6.1. italic

9.4.1.6.2. normal

9.4.1.7. Grosor del texto (font-weight)

9.4.1.7.1. bold

9.4.1.7.2. normal

9.5. Tamaño

9.5.1. se puede establecer las siguientes propiedades

9.5.1.1. Display: block

9.5.1.2. Display: inline

9.5.1.3. Display. inline-block

9.5.2. El tamaño máximo se define mediante las propiedades

9.5.2.1. Max-width

9.5.2.2. Max-height

9.6. Bordes

9.6.1. Las CCS permiten añadir un borde a un elemento

9.6.1.1. border-width

9.6.1.1.1. píxeles(px)

9.6.1.2. border-style

9.6.1.2.1. solid

9.6.1.2.2. dashed

9.6.1.2.3. dotted

9.6.1.2.4. double

9.6.1.3. border-color

9.6.1.4. border

9.6.1.5. border-radius

9.7. Márgenes

9.7.1. CCS dispone de dos propiedades

9.7.1.1. Margin

9.7.1.2. Padding

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. Para establecer una imgen de fondo

9.9.1.1. background-image

9.9.1.1.1. background-image: url('../imp.png');

9.9.1.2. background-position

9.9.1.2.1. left

9.9.1.2.2. center

9.9.1.2.3. right

9.9.1.2.4. top

9.9.1.2.5. bottom

9.9.1.3. background-repeat

9.9.1.3.1. repeat-x

9.9.1.3.2. no-repeat

9.9.1.3.3. repeat-y

9.10. CCS personalizado en wordpress

9.10.1. Activar CCS personalizado

9.10.1.1. Apariencia

9.10.1.1.1. Editar CCS

10. 10. Publicación de páginas web

10.1. Contratación de un alojamiento gratuito en Hostinger

10.1.1. Instalación y publicación de sitios realizados con Wordpress

10.2. Subir contenido al alojamiento

10.2.1. Abrir Administración de Archivos

10.2.1.1. Public_html

10.2.1.2. .htacess

10.2.1.3. default.php

10.3. Instalación de Wordpress en Hostinger

10.3.1. Sitio Web

10.3.1.1. Instalador automático

10.3.1.1.1. Administración de contenidos