Planificacion

UNIDAD 1
PLANIFICACIÓN DE
INTERFACES GRÁFICAS
Módulo: Diseño de interfaces Web
2º Curso Desarrollo de Aplicaciones Web
Curso 2018-2019
CIFP A Carballeira-Marcos Valcárcel
Rúa A Carballeira s/n Ourense
CP 32002 Ourense
Tfno. 988788470
CONTENIDO
1. Introducción a las interfaces gráficas.
Evolución
2. Elementos del diseño
3. Interfaces web.
Componentes
Maquetación web
Mapas de navegación
Prototipos
4. Generación de documentos y sitios web
Guía de estilo
Herramientas para desarrollo web
Lenguaje de marcas HTML5
UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 2

1. INTRODUCCIÓN A LAS INTERFACES GRÁFICAS
Qué es una interfaz de usuario?
Se podría definir la interfaz de usuario como el medio con que el
usuario puede comunicarse con una máquina, un equipo o un
ordenador y comprende todos los puntos de contacto entre el
usuario y el equipo.
Qué es el diseño?
Se puede definir como el proceso previo de configuración mental,
“pre-configuración”, en la búsqueda de una solución en cualquier
campo.
INTRODUCCIÓN A LAS INTERFACES GRÁFICAS
DISEÑO WEB
 Actividad consistente en la planificación, diseño e
implementación de sitios web.
 Planificación: trabajo resultante de la interacción con el
cliente. Nos permite recoger las especificaciones
necesarias para la creación del sitio web de acuerdo a
los deseos del cliente.
 Diseño: proceso de búsqueda y creación de una solución
a un problema planteado.
 Implementación: codificación del diseño mediante las
herramientas y tecnologías necesarias.
INTRODUCCIÓN.
EVOLUCIÓN DE LAS INTERFACES

INTRODUCCIÓN.

INTRODUCCIÓN.

INTRODUCCIÓN. EVOLUCIÓN DE LAS INTERFACES

1995- Surgen los primeros buscadores.





• 2002- Aparecen las primeras redes sociales


2004 - Redes sociales

Más redes sociales….



2010 - Diseño Responsive (Adaptable)

Gráfico de evolución de la web: http://www.evolutionoftheweb.com/?hl=es
Infografía de evolución del diseño web:

https://blog.kissmetrics.com/evolution-of-web-design/?wide=1

2. ELEMENTOS DEL DISEÑO
El lenguaje visual es la base de la creación
del diseño.
Tiene reglas, principios o conceptos a los que
hay que atender que son importantes para el
diseño.
Es la gramática del lenguaje visual.
Los elementos del diseño serán:
1. Conceptuales
2. Visuales
3. De relación
4. Prácticos
ELEMENTOS DEL DISEÑO.
1. CONCEPTUALES
Elementos conceptuales
 No son visibles, no tienen existencia física.
 Son los siguientes:
Punto
Línea
Plano
Volumen

1. CONCEPTUALES
Punto
Indica posición.
No tiene largo ni ancho.
No ocupa una zona en el espacio.
Es el principio y fin de una línea, y es donde dos
líneas se cruzan.

1. CONCEPTUALES
Línea
 Cuando un punto se mueve, su recorrido se transforma en
una línea.
 Tiene largo pero no ancho.

 Tiene posición y dirección.
 Está limitada por puntos.
 Forma los bordes de un plano.

1. CONCEPTUALES
Plano
 Un plano tiene largo y ancho, pero no grosor.
 Tiene posición y dirección.
 Está limitado por líneas.
 Define los límites extremos de un volumen.

1. CONCEPTUALES
Volumen
 El recorrido de un plano en movimiento (en una dirección
distinta a la suya intrínseca) se convierte en un volumen.
 Tiene una posición en el espacio y está limitado por planos.
 En un diseño bidimensional, el volumen es ilusorio.

ELEMENTOS DEL DISEÑO
2. VISUALES
Cuando los elementos conceptuales se materializan, se hacen
visibles.
Los elementos visuales forman la parte más importante de un
diseño, porque son lo que realmente vemos.
Son los siguientes:
1. Forma
2. Medida
3. Color
4. Textura
2. VISUALES
Forma
 Todo lo que puede ser visto posee una forma que aporta la
identificación principal en nuestra percepción

2. VISUALES
Medida
 Todas las formas tienen un tamaño.
El tamaño es físicamente mensurable, aunque resulta relativo cuando es
comparado.

2. VISUALES
Color
 Una forma se distingue de sus cercanías por medio del
color.

2. VISUALES
Textura
 La textura se refiere a las características de la superficie
de una forma.

3. DE RELACIÓN
Este grupo de elementos maneja la ubicación y la
interrelación de las formas en un diseño.
Son los siguientes:
1. Dirección
2. Posición
3. Espacio
4. Gravedad

3. DE RELACIÓN
Dirección
 Depende de cómo está relacionada con el observador,
con el marco que la contiene o con otras formas
cercanas.

3. DE RELACIÓN
Posición
 La posición de una forma es juzgada por su relación
respecto al cuadro o la estructura.

3. DE RELACIÓN
Espacio
 Las formas ocupan un espacio.
 El espacio puede estar ocupado o vacío.
 Puede ser pleno o ilusorio para sugerir una profundidad.

3. DE RELACIÓN
Gravedad
 No es visual sino psicológica: atribuimos a las formas
pesadez o liviandad, estabilidad o inestabilidad.

4. PRÁCTICOS
Los elementos prácticos subyacen el contenido y el alcance
de un diseño.
Son los siguientes:
1. Representación
2. Significado
3. Función

4. PRÁCTICOS
Representación
 Cuando una forma deriva de la naturaleza o de algo hecho por el
ser humano, es representativa.

4. PRÁCTICOS
Significado
 Todo diseño transporta un mensaje.
 Todos los elementos significan algo.

4. PRÁCTICOS
Función
 Un diseño debe servir a un determinado propósito.

ELEMENTOS DEL DISEÑO. RESUMEN
Elementos del diseño
Conceptuales Punto / Línea / Plano / Volumen
Visuales Forma / Medida / Color / Textura
De relación Dirección / Posición / Espacio /
Gravedad
Prácticos Representación / Significado /

Función

3. INTERFACES WEB
Una interfaz Web es un sistema gráfico que
permite acceder a los usuarios a los contenidos
de la web mediante el uso de elementos gráficos,
los cuales son conocidos por la mayor parte de
los usuarios que acceden a la página.
El objetivo principal en el diseño de una interfaz

Web es que sus potenciales usuarios pueden
acceder a todos su contenidos de la forma más
rápida y sencilla posible.
INTERFACES WEB. COMPONENTES
Son muchos los elementos de los que puede estar
compuesta una interfaz Web.
El número de elementos empleados dependerá
del objetivo del sitio.
Los más destacados son:
1. Elementos de Identificación
2. Elementos de Navegación
3. Elementos de Contenidos
4. Elementos de Interacción

1. Elementos de identificación
 Son aquellos que identifican plenamente al sitio Web.
 El usuario, a la vista de estos elementos, debe saber a
quién pertenece el sitio web.
 Ejemplos:
 Título (en la página principal)
 Imágenes o logos
 Nombre del sitio web

2. Elementos de navegación
 Están presentes en cada una de las pantallas de un sitio
web.
 Permiten al usuario moverse por las diferentes secciones
del sitio y retornar de nuevo a la página principal o inicial.
 Deben ser intuitivos para permitir saber qué hay que hacer
en cada contenido concreto.
 Enlaces web

3. Elementos de contenidos
 Son las zonas en las que se muestra la información
relevante de cada una de las páginas web que
componen el sitio.
 El contenido puede ser de todo tipo: texto, imágenes,
formularios, etc…
 Deberá tener un título del contenido y zona de contenido
propiamente dicha.

Elementos de
contenido

4. Elementos de interacción
 Son las zonas del sitio Web en las que se ofrece la
posibilidad de realización de acciones a los usuarios del
sitio.
 Ejemplo:
 Formularios
 Zona de “Buscar”

INTERFACES WEB. MAQUETACIÓN
Por maquetación web se entiende la distribución, en el
espacio considerado disponible, de los elementos que
conforman una página web.
En otras palabras, maquetar es colocar las diferentes partes
de una página dentro de sus límites.

La ventaja principal de maquetar es mantener
separado el contenido de la página de la
presentación, es decir, que si hay cambios en los
contenidos no tenga que tocarse el diseño y
viceversa.
Mantenimiento más sencillo.
Se reduce el tiempo de desarrollo y el de carga
del sitio web.

Los elementos que se mostrarán en la zona de
contenido de la página web serán:
1. Un conjunto de controles y componentes
2. Un layout o disposición de esos componentes

INTERFACES WEB.
CONTENIDO DE LA PÁGINA WEB
1. Controles y componentes de la web
 Una interfaz web está compuesta de elementos de todo
tipo.
 En sus inicios la web era un conjunto de documentos de
hipertexto: texto con enlaces a otros documentos.
 El enlace es el componente clave en la web: nexo entre
distintos documentos que forman la WWW.
 Además la interfaz puede tener:
 Tablas y listas
 Imágenes y dibujo vectorial
 Formularios
 Vídeo y audio
 Componentes complejos basados en CSS y JS, etc…. UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 53
INTERFACES WEB.
Controles y componentes de la web
 Además, HTML5 permite añadir componentes muy útiles:
 Geolocalización
 Base de datos
 Notificaciones de escritorio
 Etc….

INTERFACES WEB.
2. Layout
 Se refiere a la disposición y distribución de los elementos en
una página web.
 Son elementos de diseño que permiten organizar los
componentes para que aparezcan en un determinado lugar
de la interfaz web.
 Se pueden crear
utilizando ciertos
componentes del
propio HTML
aplicando hojas de
estilo CSS.

INTERFACES WEB.
MAPA DE NAVEGACIÓN
Los sitios web pueden contener muchas páginas, todas ellas
accesibles desde algún punto del sitio y todas con todos o algunos
enlaces a las demás.
Esta estructura de enlaces hace, en muchos casos, difícil que el
diseñador o el usuario del sitio sepan qué páginas llevan a cuáles.
Por ello, antes de diseñar un sitio web se debe realizar un esquema
que permita anticipar cuáles son las secciones en las que estará
dividida el sitio web y la relación entre los diferentes bloques de
contenidos.
Ese esquema recibe el nombre de mapa del sitio web o mapa de
navegación y es algo parecido al índice de contenidos de un libro.

INTERFACES WEB.
MAPA DE NAVEGACIÓN. EJEMPLO

INTERFACES WEB.
MAPA DE NAVEGACIÓN
El mapa de un sitio web va a tener una estructura
que dependerá de la relación que tengan las
páginas del sitio entre sí.
Esta relación puede ser de diferentes tipos:
 Lineal
 Reticular
 Jerárquica
 Lineal jerárquica

INTERFACES WEB.
MAPA DE NAVEGACIÓN
1. Estructura lineal
 Adecuada en aquellos sitios compuestos por páginas donde la
lectura de las mismas es secuencial.
 Estructura es similar a la de un libro donde avanzas de página en
página.
 Se puede volver a la anterior.

INTERFACES WEB.
MAPA DE NAVEGACIÓN
2. Estructura Reticular
 Se emplea en aquellos sitios en los que todas sus páginas están
relacionadas entre sí.
 No resulta adecuado cuando el sitio está compuesto por muchas
páginas porque el usuario puede llegar a perderse.
NAVEGACIÓN
RETICULAR

INTERFACES WEB.
MAPA DE NAVEGACIÓN
3. Estructura Jerárquica
 Es la más común.
 Se emplea en aquellos sitios donde existen varias secciones bien
diferenciadas pero de poca complejidad de modo que el usuario no
tiene porque navegar de una sección a otra.

INTERFACES WEB.
MAPA DE NAVEGACIÓN
4. Lineal jerárquica
 También de las más empleadas.
 Cuando cada una de las secciones tiene un volumen de información
más elevado y conlleva una lectura secuencial del contenido de la
sección.
 Permite navegación entre secciones.
NAVEGACIÓN LINEAL JERÁRQUICA

INTERFACES WEB.
PROTOTIPOS O MAQUETAS WEB
Además de los mapas de navegación, la propia
complejidad del diseño hace que, en muchos casos, sea
difícil entender qué es lo que el usuario quiere transmitir
al resto del equipo de desarrollo y qué es lo que tienen
que hacer.
Por tal motivo, los prototipos son herramientas muy
interesantes para ahorrar tiempo a la hora de determinar
qué es lo que hay que hacer, ya que muestran un
esquema de cómo quedará el sitio web, pero empleando
mucho menos tiempo que si hubiese que hacer hacerlo
realmente.

INTERFACES WEB.
Un prototipo web es un borrador o modelo inicial a partir del
cual se empieza a pensar y desarrollar la idea original del
diseño de un sitio web.
Hacer un prototipo es más sencillo y económico que hacer
una web real y luego modificarlo hasta alcanzar lo que se
busca.
Qué debe mostrar:
 Elementos de la interfaz
 Elementos o características comunes en las páginas
 Cómo se organiza el mapa de navegación
 Aprovechamiento del espacio

INTERFACES WEB.
Fases en el diseño de una aplicación web:
UNIDAD 1. CONFECCIÓN DE INTERFACES DE USUARIO 65

INTERFACES WEB.
Proceso en el diseño de una aplicación web
Representación Representación Representación

Baja fidelidad Fidelidad media Alta fidelidad

INTERFACES WEB.
PROTOTIPOS
1. Sketch: es un primer boceto que realizamos
para un proyecto web que queremos crear.
Son nuestros primeros trazos sobre una hoja
de papel.
Se dibuja el contorno y la disposición de los
elementos.
Es el modelo más básico.
UNIDAD 1. CONFECCIÓN DE INTERFACES DE USUARIO 67

INTERFACES WEB.
PROTOTIPOS. EJEMPLO DE SKETCH

INTERFACES WEB.
PROTOTIPOS.
2. Wireframe: (alambre) Contiene información adicional en
cada una de las pantallas: disposición de los botones,
contenidos, llamadas a la acción, movimientos tipo dentro
de la navegación entre las páginas del sitio web...
Es una representación estática.

INTERFACES WEB.
PROTOTIPOS. EJEMPLO DE WIREFRAME

INTERFACES WEB.
PROTOTIPOS.
3. Mockup: (maqueta) permite visualizar la línea gráfica, la
estructura de la información, el contenido y avanza las
funcionalidades del proyecto web (no las incluye).
Incluye colores, estilo visual y tipografía.
Permite pedir comentarios a los posibles usuarios

INTERFACES WEB.
PROTOTIPOS. EJEMPLO DE MOCKUP

INTERFACES WEB.
PROTOTIPOS.
4. Prototipo: es un modelo ampliable y modificable de un
sistema planificado, incluyendo interfaz y funcionalidad.
Muy similar al sitio final.

INTERFACES WEB.
EJEMPLO DE PROTOTIPO

INTERFACES WEB.
HERRAMIENTAS PARA CREACIÓN DE PROTOTIPOS
Herramienta Plataforma Libre/Pago
WireframeSketcher Studio Multiplataforma (Windows, Pago, versión evaluación
Linux, MAC)
Moqups Online Pago, versión evaluación
MockingBird Online Pago, versión evaluación
Balsamiq Multiplataforma (online, Pago, versión evaluación
escritorio, Google Drive)
Mockflow Online (necesita Registro) Tiene una versión de pago
Axure Windows, Mac Pago, versión evaluación
iPlotz Windows, Mac, Android Pago, versión evaluación
Gliffy Online Registro, versión evaluación
Canva Online Registro, versión evaluación

INTERFACES WEB.
HERRAMIENTAS PARA CREACIÓN DE PROTOTIPOS
Direcciones web con más herramientas de creación de
maquetas:
 http://theappentrepreneur.com/54-amazing-wireframing-tools-apps
 https://mashable.com/2013/04/02/wireframing-tools-mobile/?europe=true
 http://uxmag.com/articles/comparing-four-popular-page%E2%80%93based-interactive-
prototyping-tools

4. GENERACIÓN DE DOCUMENTOS
Y SITIOS WEB
Como en cualquier proyecto software, la generación
de un sitio web debe pasar por unas fases, que son
las siguientes:
1. Análisis
Requisitos, navegación, funcionalidad, herramientas, lenguajes,
pautas diseño: colores, tipografía, iconos, …
2. Desarrollo
Se emplean herramientas y lenguajes para crear el sitio.
3. Pruebas y depuración
Paralela al desarrollo. Enlaces funcionan. Interacción.
4. Documentación
Paralela a todas la fases. Documentar requisitos, código.
Mantenimiento más fácil.

GENERACIÓN DE DOCUMENTOS Y SITIOS WEB.
GUÍA DE ESTILOS
Las pautas de diseño a seguir durante la generación de un sitio
web deberán ser recogidas en una guía de estilo, y servirán
al equipo de diseño durante la generación y el mantenimiento
del sitio web.
No existe una estructura única que deban seguir las guías de
estilo.
Algunos de los elementos que debe
contener son:
 Colores
 Fuentes y tipografía
 Fotos y logos
 Iconografía
 Estructura UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 78
GUÍA DE ESTILOS. COLORES
El color es una propiedad que tienen los objetos y que
podemos percibir gracias a la luz.
Algunas propiedades de los colores son:
 Tono
Hace que los colores sean distintos: verde, rojo, azul, …
 Saturación
Intensidad o pureza de un color. Varía según la luz
 Luminosidad
Cantidad de luz que refleja un color. Cómo es de oscuro o de claro.

En una guía de estilo deben figurar los colores a
emplear en el sitio Web en todos los textos,
fondos, e imágenes según sea su ubicación y
finalidad.
La información debe suministrarse aportando los
valores para el modelo RGB tanto en
hexadecimal como en decimal.
Todos los colores
se obtienen a
partir de los
primarios

Gamas de colores que se pueden emplear
 Colores acromáticos
 Colores cálidos: aquellos que van del rojo al amarillo

 Colores fríos: desde el azul al verde

Ejemplo de cómo se deben especificar los colores en la guía de
estilo:

Webs donde se pueden diseñar paletas de
colores para utilizar en nuestros diseños:
 http://www.colourlovers.com/palettes/add
 http://paletton.com/
 http://web.colorotate.org/
 http://colrd.com/
 http://www.palettefx.com/
 https://coolors.co/
 https://color.adobe.com/es
 https://www.maxcf.es/paletas-de-colores-para-diseno-web/

GUÍA DE ESTILOS. TIPOGRAFÍA
La tipografía es el tipo de fuente que se utiliza en
un diseño de interfaces.
En la guía de estilo hay que especificar varias
características de la fuente:
 La fuente en si
 Estilo o tipo de fuente: normal,
cursiva, negrita, etc…
 Tamaño
 Color del texto respecto al fondo

GUÍA DE ESTILOS.
EJEMPLO TIPOGRAFÍA

GUÍA DE ESTILOS. TIPOGRAFÍA
Recomendaciones:
•No abuses de tipografías diferentes en tu web (máximo dos o tres): una
para el cuerpo de texto de entradas y páginas, y otra para los titulares,
botones, subtítulos, es decir, las partes donde el texto es más llamativo y hay
menos cantidad.
• Las tipografías tienen una personalidad propia que es la que tienes
impregnar en tu marca. Por eso debes elegirlas correctamente y en función
de los valores que quieras transmitir.

GUÍA DE ESTILOS. ENLACES TIPOGRAFÍA
Fuentes web Google: www.google.com/fonts
Find great Google Fonts Tool (permite seleccionarlas visualmente):
https://www.maxcf.es/tipografias-para-web/
Descarga de fuentes: http://www.dafont.com/es/
Más fuentes: http://www.myfonts.com/
20 fuentes gratuitas para web: http://www.esandra.com/20-fuentes-gratis-
excelentes-para-diseno-web/
30 tipografías modernas para diseñadores:
http://funnyfrontend.com/tipografias-modernas-para-disenadores/

GUÍA DE ESTILOS. FOTOS Y LOGOS
Una guía de estilo deberá incluir, sobre todas las fotos y logos del
sitio web:
 Formato
El tipo de formato en el que deberán estar almacenadas la imágenes o
logotipos empleados: jpg, png, gif, …
 Tamaño
El tamaño de la imagen o logotipo que se establece dando las medidas de
ancho y alto en píxeles.
 Lugar
En qué zona de la web se visualizarán esas fotografías o logos.

GUÍA DE ESTILOS. FOTOS Y LOGOS
EJEMPLO

GUÍA DE ESTILOS. ICONOGRAFÍA
La guía de estilo deberá incluir una muestra de los iconos
empleados para que se pueda verificar el estilo que tienen
éstos y cómo se complementan con la marca.
Asimismo se indicará:
el tamaño
la ubicación usual
el color de los iconos

GUÍA DE ESTILOS. ICONOGRAFÍA
EJEMPLO

GUÍA DE ESTILOS. ESTRUCTURA
La guía de estilo deberá incluir la estructura de la información de la
web, es decir, cómo se va a construir para facilitar la interactividad
de los usuarios.
Algunos elementos a indicar:
 Zonas en las que se divide: encabezado, pie de página
 Si hay menús y donde van situados
 Etc…
Habría que explicar qué contenido irá situado en cada zona y el
tamaño de cada una.

GUÍA DE ESTILOS. ESTRUCTURA
EJEMPLO

HERRAMIENTAS PARA DESARROLLO WEB
Entorno desarrollo Características. Dirección web
Aptana IDE. http://www.aptana.com/
Google Web Designer IDE. https://www.google.com/webdesigner/
WebStorm IDE. https://www.jetbrains.com/webstorm/
Visual Studio IDE. https://www.visualstudio.com/es/
Brackets Ligero. Editor texto. http://brackets.io/
Notepad++ Ligero. Editor texto. https://notepad-plus-plus.org/
Sublime Ligero. Editor texto. https://www.sublimetext.com/
Atom Ligero. Editor texto. https://atom.io/
Visual Studio Code https://code.visualstudio.com
Cloud9 En la nube. https://c9.io/
Codenvy En la nube. Registro. https://codenvy.com/
HyperDev En la nube. https://hyperdev.com
HERRAMIENTAS PARA DESARROLLO WEB
Entornos de pruebas
Jsbin http://jsbin.com
JSFiddle https://jsfiddle.net/
CodePen https://codepen.io/pen
Plataformas de generación automática de sitios web

Wix http://es.wix.com . Registro
Weebly https://www.weebly.com/es . Registro
Squarespace https://es.squarespace.com/ .Registro

EL LENGUAJE WEB: HTML5
A lo largo de los años, desde su aparición
en 1991, el lenguaje HTML ha ido pasando
por varias versiones: HTML, HTML4, XHTML, … hasta llegar a la
actual que es HTML5.
Recomendación oficial: https://www.w3.org/TR/2014/REC-html5-
20141028/
HTML5 es una evolución y unificación de varias tecnologías web
que funcionaban de forma independiente: HTML, CSS y
JavaScript.

LENGUAJE DE MARCAS HTML5
ESTRUCTURA BÁSICA DE UNA PÁGINA EN HTML5
Elementos que contiene el <head>:

<meta name="description" content="Resumen del contenido de la página">
<style type="text/css“></style>
<link rel=stylesheet href="css/estilo.css" type="text/css"/>
<script type="text/javascript“/>
En HTML5 hay algunos nuevos elementos semánticos.
Etiquetas de secciones:

COMPARACIÓN CON HTML
HTML HTML5

• Elementos de agrupación de contenidos:

Etiquetas de texto:

Más etiquetas de texto:

Más etiquetas de texto:

Elementos contenido incrustado

Elementos interactivos:

Elementos en tablas (datos tabulares):

LENGUAJE DE
Formularios
MARCAS HTML5

LENGUAJE DE MARCAS HTML5.
FORMULARIOS.
NUEVOS VALORES PARA EL CONTROL INPUT
<input
type=“………”>

FORMULARIOS.
<input
type=“………”>

FORMULARIOS.
<input
type=“………”>
Más información: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input

FORMULARIOS.
NUEVOS ATRIBUTOS DE ELEMENTOS <INPUT>

FORMULARIOS.
NUEVOS ATRIBUTOS DE ELEMENTOS <INPUT>
Más atributos del elementos <input>: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input

FORMULARIOS. VALORES DEL ATRIBUTO “PATTERN”

FORMULARIOS. VALORES DEL ATRIBUTO “PATTERN”
Equivalentes

HERRAMIENTAS PARA EXPRESIONES REGULARES
Más info sobre expresiones regulares en HTML:
https://lenguajehtml.com/p/html/formularios/validaciones-html5
A continuación, algunas herramientas útiles para crear o probar expresiones
regulares:
Herramienta Descripción
Debuggex Herramienta de creación gráfica de expresiones regulares.
RegExR Herramienta para construir y testear expresiones regulares.
RegEx101 Herramienta para construir y testear expresiones regulares.
RegExBuddy Herramienta profesional para el trabajo con expresiones regulares.
RegExplained Herramienta visual para explicar el funcionamiento de una expresión regular.
RegExper Herramienta para generar diagramas visuales de expresiones regulares.

Rubular Editor de expresiones regulares.

VALIDADORES DEL CÓDIGO HTML
Es necesario al publicar una página web comprobar si el código HTML empleado
valida correctamente, es decir si no contiene errores.
Algunos sitios web de comprobación:
W3C Markup Validation Service
 http://validator.w3.org
WDG HTML Validator
 http://www.htmlhelp.com/tools/validator

SOPORTE DE HTML5 EN NAVEGADORES
Se puede comprobar con el servicio web http://html5test.com/ qué
características de HTML5 soporta cada navegador.
Para comprobar el soporte de un navegador web, el usuario debe visitar la
página del sitio en html5test.com.

DIRECCIONES WEB DE CONSULTA
http://www.w3schools.com (inglés)
Especificación oficial HTML5: https://www.w3.org/TR/html5/
HTML5.1: https://www.w3.org/TR/html/
https://developer.mozilla.org/es/docs/HTML/HTML5
http://mosaic.uoc.edu
http://www.html5.showbizreal.com/
Navegadores ligeros para equipos con pocos recursos: https://ubunlog.com/5-navegadores-
web-para-maquinas-con-pocos-recursos/
Web sobre tecnología: https://www.xataka.com
https://www.lawebera.es/diseno-web-html-5
https://www.maxcf.es/herramientas-aplicaciones-para-diseno-web/

Planificacion

Cargado por

Copyright:

Formatos disponibles

Planificacion

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Planificacion

Cargado por

Copyright:

Formatos disponibles

UNIDAD 1

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 2

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 5

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 6

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 7

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 8

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 9

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 10

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 11

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 12

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 13

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 14

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 15

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 16

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 17

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 18

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 19

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 20

Infografía de evolución del diseño web:

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 21

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 23

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 24

 Tiene largo pero no ancho.

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 25

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 26

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 27

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 29

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 30

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 31

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 32

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 33

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 34

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 35

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 36

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 37

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 38

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 39

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 40

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 41

Prácticos Representación / Significado /

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 42

El objetivo principal en el diseño de una interfaz

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 44

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 45

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 46

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 47

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 48

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 49

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 50

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 51

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 52

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 54

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 55

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 56

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 57

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 58

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 59

UNIDAD 1 - PLANIFICACIÓN DE INTERFACES GRÁFICAS 60