Fundamentos del diseño web

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Fundamentos del diseño web por Mind Map: Fundamentos del diseño web

1. Etapas para crear una sitio web

1.1. Un sitio web esta compuesto por varias páginas web. Como ejemplo practico se encuentran los libros que tienen una estructura jerarquizada.

1.1.1. Obtener información

1.1.2. Planeación

1.1.3. Diseño

1.1.4. Desarrollo

1.1.5. Pruebas y entregas

1.1.6. Mantenimiento

2. Pagina web y sitio web

2.1. Página web

2.1.1. Es solo un documento electrónico, es decir, es como una hoja

2.2. Sitio web

2.2.1. Esta compuesto por varios documentos electrónicos alojados en un solo sitio.

3. Fundamentos básicos

3.1. Sigue las reglas.

3.1.1. Se deben respetar los principios del diseño, como el orden y la simetría.

3.1.2. Crear contrastes para llamar la atención del usuario.

3.1.3. Se pueden crear nuevos sitios con grandes scroll´s horizontales/verticales.

3.1.3.1. Se verá muy atractivo y creativo.

3.1.4. El más funcional es el diseño en tres columnas.

3.2. Color

3.2.1. Solo se debe utilizar para apoyar el contenido.

3.2.1.1. No como relleno para decorar una página web.

3.2.2. Lo mejor es hacer uso de colores complementarios.

3.3. No utilizar (o abusar) de imágenes parpadeantes.

3.3.1. Muchos estudios dicen que este tipo de gráficos son:

3.3.1.1. Una distracción.

3.3.1.2. Molestos.

3.3.1.3. Entorpecedores para la navegación de los usuarios.

3.4. Ayuda externa

3.4.1. Sírvete de los consejos de personas corrientes o de comunidades de profesionales.

3.4.2. Realiza críticas constructiva y mejora tu sitio web.

3.4.3. Sírvete de la experiencia de otros.

3.5. Usa imágenes o iconos para comunicarte

3.5.1. Existen iconos universales que las personas comprenden nada mas visualizar.

3.5.1.1. Algunos ejemplos son:

3.5.1.1.1. La lupa (buscar).

3.5.1.1.2. La casa (página de inicio).

3.5.1.1.3. El disquete (guardar)

3.6. Optimizar imágenes y que se ajusten al contenido.

3.6.1. Consejo: debes considerar la velocidad de internet de las personas.

3.6.2. Las páginas con muchas imágenes y de gran tamaños ralentizan la carga de la web.

3.6.2.1. Puede resultar bastante molesto.

3.6.2.2. Puede resultar en el abandono de la página.

3.6.3. Es fundamental disponer de todos nuestros elementos multimedia.

3.6.4. Es importante optimizar el contenido a las diferentes resoluciones de pantalla.

3.7. Elegir fuentes compatibles

3.7.1. Es recomendable usar como máximo tres fuentes a la vez.

3.7.1.1. Una para el título.

3.7.1.2. Una para el cuerpo principal.

3.7.1.3. Y la última para cualquier tipo enlace que se pueda necesitar.

3.8. Multi-navegador

3.8.1. La página web tiene que ser testada en los diferentes navegadores existentes.

3.8.2. Puede ocurrir que ciertos elementos se muestren de manera diferente según el navegador.

3.9. Fundamentos técnicos

3.9.1. Dominio

3.9.1.1. Componentes básicos de los packs de alojamiento web.

3.9.1.2. Deben seguir la estructura jerárquica del sistema de nombres de dominio

3.9.1.2.1. Dominios de nivel superior.

3.9.1.2.2. Dominios libres.

3.9.1.2.3. Subdominios facultativos.

3.9.1.3. El dominio es un nombre único e inequívoco.

3.9.1.4. El registro de dominios se realiza a través de un proveedor de Internet que remite la solicitud a la autoridad competente.

3.9.2. Espacio web

3.9.2.1. Cada página web contiene datos que el servidor web pone a disposición.

3.9.2.2. Cuentan con un determinado almacenamiento.

3.9.2.2.1. Documentos HTML

3.9.2.2.2. Hojas de estilo

3.9.2.2.3. Imágenes

3.9.2.2.4. Vídeos

3.9.2.2.5. Bases de datos

3.9.2.3. La transferencia de datos se ejecuta mediante el protocolo FTP y de un programa cliente.

3.9.2.4. Debe tenerse en cuenta que el espacio web pueda ampliarse si es necesario.

3.9.3. Base de datos

3.9.3.1. En caso de no ser alojado estáticamente se debe recurrir a bases de datos relacionales.

3.9.3.2. Los datos se estructuran por medio de tablas y se establece una relación con otros datos.

3.9.3.3. La transmisión y gestión de datos se realiza a través del lenguaje para bases de datos SQL.

3.9.3.3.1. MySQL es un software para bases de datos relacionales a nivel mundial.

3.9.4. Servidor web

3.9.4.1. Los servidores para principiantes se llevan a cabo a través de alojamiento compartido.

3.9.4.1.1. Las cuentas de hosting pueden compartir los recursos de un mismo servidor.

3.9.4.2. Para proyectos profesionales

3.9.4.2.1. Se les da servidores exclusivos, hardware y equipo especial.

3.9.5. Enlaces internos

3.9.5.1. Consiste en vincularse a través de una URL con otros portales.

3.9.5.2. Contienen y ofrecen algo útil para el visitante.

4. Herramientas básicas

4.1. HTML

4.1.1. Se utiliza para la estructuración semántica del contenido digital.

4.1.1.1. Funciona por medio de etiquetas.

4.1.2. Puede definir elementos como fragmentos de texto, encabezados, gráficos o hiperenlaces.

4.1.3. La versión más actual se llama HTML5.

4.1.3.1. Amplía las opciones para los elementos de audio y vídeo.

4.2. JAVA SCRIPT

4.2.1. Ayuda a la integración de casillas interactivas, menús desplegables o diapositivas.

4.2.2. Entra en acción de que haya contenido dinámico.

4.2.3. Permite que se evalúen las interacciones de los usuarios.

4.2.3.1. También, permite que se recarguen, actualicen o modifiquen.

4.3. PHP

4.3.1. Permite generar las páginas web estáticas.

4.3.2. Transmite los datos a un intérprete de PHP

4.3.2.1. Dicho intérprete genera la página web solicitada.

4.3.2.2. Tomando datos depositados en las bases de datos, y los devuelve al servidor web.

4.4. CSS

4.4.1. Significa hojas de estilo en cascada.

4.4.2. Lenguaje para formatear documentos HTML de manera estándar.

4.4.3. Sirve para asignar reglas a los elementos definidos en código HTML

4.4.4. La versión más actual es CSS3.

4.4.4.1. Comprende instrucciones sobre diseño, colores y tipografía.

4.4.4.2. También animaciones, transiciones de color y sombras.

5. Principios del diseño web

5.1. Contraste

5.1.1. Se refiere a la diferenciación entre elementos.

5.1.1.1. Se puede utilizar colores, estilos de letra, tamaños, etc.

5.2. Alineación

5.2.1. Es mantener los elementos alineados de manera que se mantenga un orden en el diseño completo.

5.3. Equilibrio

5.3.1. Significa asegurarse que ningún elemento domine a otro.

5.3.1.1. Equilibrio simétrico

5.3.1.2. Equilibrio asimétrico

5.3.1.3. Equilibrio radial

5.3.2. Deben asegurarse de que cada elemento tenga un lugar y papel específico en la composición.

5.4. Repetición

5.4.1. Utilizar formatos para los elementos similares.

5.4.2. Debes ser consistente.

5.4.3. Debes tener uniformidad en el diseño.

5.5. Proximidad

5.5.1. Mantener los elementos “comunes” cercanos entre sí.

5.6. Enfásis

5.6.1. Elemento naturalmente dominante de una composición.

5.6.2. Se puede generar mediante contrastes.

5.6.3. El punto principal se llama punto focal.

5.7. Movimiento

5.7.1. Es el que atrapa la atención, incluso de la manera más sutil.

5.7.2. La tecnología te permite incorporar efectos animados, directamente en tus páginas.

5.8. Jerarquía

5.8.1. Las composiciones de excelente calidad dividen los elementos en tres niveles de jerarquía:

5.8.1.1. Lo más importante

5.8.1.2. Lo del medio

5.8.1.3. Lo menos importante

5.8.2. Elegir la ubicación de cada elemento según su nivel de importancia es la clave para dominar.