BIENVENIDOS

CURSO DISEÑO WEB

Wilmer José Duarte López
Ingeniero en Computación.

wiljo9011@hotmail.es
 Conceptos Claves
IP: Es el identificador numérico de una página web, es único y representa
la dirección donde esta el ordenador que contiene es página web.

Dominio Web/URL: Uniform Resource Locator. Es el nombre asociado a

la IP que utilizamos para solicitar recursos, en nuestro caso un sitio web.
Ejemplo: 216.58.210.163-> www.google.com

DNS: Domain Name System: Es un servidor cuya principal función es

traducir el nombre del dominio a su identificador único.
 Conceptos Claves(2)
Sitio Web: Es un conjunto de uno o varios recursos web alojados en el
mismo dominio.
Servidor Web: Es un ordenador cuyo objetivo es servir recursos web.

Hosting: Es el almacenamiento del servidor web. El disco duro donde el

servidor guarda los recursos.

Petición: Es la acción de pedir recursos al servidor

 ¿Que es una página web?
Una Página Web es conocida como un documento de tipo electrónico,
el cual contiene información digital, la cual puede venir dada por datos
visuales y/o sonoros, o una mezcla de ambos, a través de textos,
imágenes, gráficos, audio o vídeos y otros tantos materiales dinámicos
o estáticos.
 Tipos de pagina Web
 Página web estática: Se tratan de páginas en las que no se puede
cambiar el contenido. Aparece una información permanente, y el
usuario no puede interactuar.
 Página web dinámica: Los usuarios pueden crear y colaborar en el
contenido. Suponen todo lo contrario a las anteriores. En estas
podemos destacar: blogs, foros, tiendas online…
 Tiendas online: Se trata de páginas orientadas a la compra-venta de
objetos. Muchas plataformas físicas han descubierto el potencial de
internet y gestionan sus propias tiendas online para que se puedan
comprar productos desde cualquier parte del mundo.
Tipos de pagina Web
 Diseño Web

El diseño web es la implementación de

conceptos artísticos que se utilizan para
desarrollar una página web logrando
generar branding y ayudando a
fortalecer la imagen corporativa de una
empresa o negocio.
¿Qué es ser un diseñador web?

El término puede significar muchas

cosas para mucha gente diferente en
el mundo web.
¿Qué es ser un diseñador web?
Que estamos creando? Las web son siempre
iguales?
¿Es necesario aprender todo esto?

Poco a popo..
Habilidades Básicas de un Desarollador Web
 Diseño Front End
 Desarrollo de la parte visual del sitio web.
 Control sobre la tipografía, maqueta, colores,
imágenes y gráficos.
 Responsable de la planificación del sitio,
interacción, experiencia de usuario y scripting
al lado del cliente.
 Diseño Front End

Frameworks

Temas WordPress
 Diseño Web Profesional
Llegar a ser diseñador web professional
requiere:

• Concentración.
• Tiempo
• Esfuerzo
 Formas alternativas de
crear contenido web

Usar Plantillas.
Hay un gran numero de recursos y plantillas que te permitirán
crear tu contenido a partir de estructuras prefabricadas.

Blogs y redes sociales.

Plataformas gratuitas para crear tu presencia online de una
manera sencilla.
NO HAY ATAJOS
 Areas del Diseño web

GENERALISTA
Diseñador que tiene una buena base de los conceptos y
habilidades de diseño web, experiencia en la planificación,
construcción y fases de testeo.

Habilidades
 Areas del Diseño web

VISUAL DESIGNER
Diseñador enfocado principalmente en el modo visual
de la web. El color, la tipografía, diseño de estructuras
y creación de gráficos son sus habilidades especiales.
Habilidades
 Areas del Diseño web

UX /UI DESIGNER
Diseñador enfocado en el comportamiento humano, y el diseño
de interacción para crear experiencias de usuario positivas.

Habilidades
 Areas del Diseño web

DISEÑADOR INTERACTIVO
Crear interfaces y entornos interactivos buscando las
soluciones que respondan ante el usuario de la forma mas
eficaz.

Habilidades Frameworks
 Areas del Diseño web

DISEÑADOR DE MOTION GRAPHICS

Provienen del mundo de la animación digital, crean contenido
visual animado en forma de juegos, interfaces, video etc.

Habilidades
 Areas del Diseño web

DESARROLLADOR FRONTEND
Diseñador /desarrollador con perfil hibrido que se encarga de
la parte cliente

Habilidades Frameworks
 Areas del Diseño web

ESPECIALISTA EN GESTORES DE CONTENIDO CMS

Desarrollador que se encarga de la programación a la par del
servidor

Habilidades
Medio Tiempo

RECESO
Proceso Básico Para la Creación De Un Sitio

4 Un excelente
3
2 diseñador
1 web

Todas las
imágenes tienen
No puede
que tener una
haber
Que todas las buena
contaminació
Tener claro páginas web resolución
n visual
cuáles son los sean
colores consistentes
corporativos. con los colores,
las fotos y los
textos.
 FASE 1: ANALISIS

Propósito del sitio web

Objetivo
Público Objetivo

01

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
 FASE 2: PLANIFICACIÓN

Mapa del Sitio

Estructura Web
Tecnologías a utilizar

02

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
FASE 3: DISEÑO

Modelos del Sitio

Estilo Visual
Usabilidad

03

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
FASE 4: CONTENIDO

Redacción
Fotos y Videos
SEO(Optimizado a motores de busqueda)

04

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
FASE 5: DESARROLLO

Optimización del Contenido

Enfocado en Convertir
Full Responsive

05

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
FASE 6: PRUEBAS

Pruebas Técnicas
Compatibilidad
¿Cumple su Propósito?

06

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
 FASE 7: LANZAMIENTO

Monitoreo
Arreglo de Fallas
Mantenimiento

07

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
 RESUMEN

07

Image Subtitle
A wonderful serenity has taken possession of
my entire. A wonderful serenity has taken possession of
my entire.
 Ejemplos de Diseño
https://mediaqueri.es/

http://www.cssdrive.com/

https://www.cssmania.com/

https://www.awwwards.com/
 HTML

CONTENIDO

https://lenguajehtml.com/html/introduccion/tabla-periodica-html5/

ASIDE ARTICLE

FOOTER HEADER

HTML FOOTER

NAV SECTION

H1 H2 H3 H4 H5 H6
 Recursos
HTML

Documentación y validadores Fuentes y paleta de colores

https://chrispederick.com/work/web-developer/ https://uxtools.co/tools/design

https://caniuse.com/

https://jigsaw.w3.org/css-validator/

https://developer.mozilla.org/en-US/
Fuentes y paleta de colores

https://fontawesome.com/v5/cheatsheet
http://classic.typetester.org/
https://fonts.google.com/
https://www.materialpalette.com/
https://coolors.co/
https://paletton.com/#uid=1000u0kllllaFw0g
0qFqFg0w0aF
 HTML

IDENTIFICAR

<html>
<head>
<title>Mi pagina web</title>
</head>
<body>
</body>

</html>
 HTML

IDENTIFICAR
 HTML

IDENTIFICAR
 HTML

IDENTIFICAR
 HTML

IDENTIFICAR
 HTML

IDENTIFICAR
 HTML

IDENTIFICAR