Pymes 2.0 - Modulo 1 Diseño Web 2.0
description
Transcript of Pymes 2.0 - Modulo 1 Diseño Web 2.0
![Page 1: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/1.jpg)
DISEÑO WEB 2.0Ideas Creativas que Ayudan a Vender
PRESENTACIÓN PARA EL PROGRAMA DE CAPACITACIÓN
![Page 2: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/2.jpg)
WEB 2.0Por donde empezar?
• Dominio
• Hosting
• Identidad
2 de
36
![Page 3: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/3.jpg)
IDENTIDADDiseño Web 2.0
![Page 4: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/4.jpg)
IDENTIDADIdeas Creativas que Ayudan a Vender
• Cómo veo a mi empresa?
• Cómo quiero que los demás vean a mi empresa?
• A quien quiero llegar?
4 de
36
![Page 5: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/5.jpg)
ELEMENTOS DE COMUNICACIÓNELCOLOR
5 de
36
Ideas Creativas que Ayudan a Vender
![Page 6: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/6.jpg)
ELEMENTOS DE COMUNICACIÓNLAFORMA
6 de
36
Ideas Creativas que Ayudan a Vender
![Page 7: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/7.jpg)
ELEMENTOS DE COMUNICACIÓNLATIPOGRAFÍA
7 de
36
Ideas Creativas que Ayudan a Vender
![Page 8: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/8.jpg)
ELEMENTOS DE COMUNICACIÓNLASIMÁGENES
8 de
36
Ideas Creativas que Ayudan a Vender
![Page 9: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/9.jpg)
ELEMENTOS DE COMUNICACIÓNEJEMPLO
9 de
36
Ideas Creativas que Ayudan a Vender
![Page 10: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/10.jpg)
WEB 2.0Ideas Creativas que Ayudan a
Vender
![Page 11: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/11.jpg)
INTRODUCCIÓN
11de
36
WEB 2.0
El termino web 2.0 hace referencia a una serie de aplicaciones s y páginas web que utilizan la inteligencia colectiva para proporcionar servicios interactivos en red.
Permite a los usuarios, interactuar y colaborar entre sí como creadores de contenido generados por si mismos en una comunidad virtual, a diferencia de sitios web donde los usuarios se limitan a la observación pasiva de los contenidos que se ha creado para ellos.
![Page 12: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/12.jpg)
WEB 1.0 vs WEB 2.0
12de
36
Un Gran Cambio
WEB 1.0• En su mayoría sólo de lectura• En 1996, 250.000 sitios
WEB 2.0• Dinámicas de lectura y escritura• En 2010 + de 95.000.000 sitios
![Page 13: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/13.jpg)
INTRODUCCIÓN
13de
36
WEB 2.0
Ejemplos de Web 2.0 son las comunidades web, los servicios web, las aplicaciones, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y falcsonomías.
![Page 14: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/14.jpg)
ESTILOS GRÁFICOS
DISEÑOSIMPLEEl diseño es más sencillo y la navegación más dinámica.
14de
36
WEB 2.0
![Page 15: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/15.jpg)
ESTILOS GRÁFICOS
CONTENIDOEN MÓDULOSDiseño con estructura de cabecera, columnas, barras laterales y píe de página.
15de
36
WEB 2.0
logomenú de navegación
identificación de secciones
menú > de > rastrosTÍTULO DE SECCIÓN
menúde
secciones
área de contenido
área de interacción
píe de página
![Page 16: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/16.jpg)
ESTILOS GRÁFICOS
CABECERADESTACADAEn la cabecera generalmente aparece el logotipo y el menú de navegación.
16de
36
WEB 2.0
![Page 17: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/17.jpg)
ESTILOS GRÁFICOS
TEXTOSGRANDESCon textos más cortos nos permite aumentar el tamaño del mismo. Facilita la asimilación del contenido. Transmitir ideas.
17de
36
WEB 2.0
![Page 18: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/18.jpg)
ESTILOS GRÁFICOS
COLORESFUERTESLa utilización de colores fuertes logrará secciones claras y bien definidas. Facilitando la navegación al usuario.
18de
36
WEB 2.0
![Page 19: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/19.jpg)
ESTILOS GRÁFICOS
19de
36
WEB 2.0
EFECTOS DEIMAGENLa utilización de sombras, degrades, colores brillantes, bordes redondeados, reflejos, volumen y sombras, destacan contenido.
![Page 20: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/20.jpg)
ESTILOS GRÁFICOS
ICONOSGRANDESLa utilización de un correcto sistema iconográfico facilita la navegación del sitio web. Agregándole mayor dinamismo.
20de
36
WEB 2.0
![Page 21: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/21.jpg)
DISEÑO A MEDIDAvs CMS
![Page 22: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/22.jpg)
DISEÑO WEB A MEDIDA
22de
36
CARACTERÍSTICAS
• Requieren un diseño y desarrollo personalizado
• Demandan mayor tiempo de trabajo para el diseño, maquetado e implementación.
• Tiene un costo elevado de desarrollo.
• Las actualizaciones y modificaciones de diseño deben gestionarse por un diseñador web.
![Page 23: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/23.jpg)
DISEÑO WEB A MEDIDA
23de
36
EJEMPLO
![Page 24: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/24.jpg)
DISEÑO WEB A MEDIDA
24de
36
EJEMPLO
![Page 25: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/25.jpg)
DISEÑO WEB A MEDIDA
25de
36
EJEMPLO
![Page 26: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/26.jpg)
DISEÑO WEB CON CMS
26de
36
CARACTERÍSTICAS
• Se trabaja el diseño sobre la estructura de un template o plantilla. • Lleva menos tiempo de trabajo para el diseño, maquetado e implementación.• El costo de desarrollo es menor.• Requieren constantemente actualizaciones de nuevas versiones.• Son más flexibles a los cambios.• Constantemente se desarrollan nuevos módulos que permiten actualizar nuestra web de forma más rápida.
Ejemplos de CMS: Wordpress, Joomla, Drupal, Magento, Opencart, etc.
![Page 27: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/27.jpg)
DISEÑO WEB CON CMS
27de
36
Sitio Web Desarrollado en Joomla: Web Organización de Eventos Nac. E Internac.
![Page 28: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/28.jpg)
DISEÑO WEB CON CMS
28de
36
Sitio Web Desarrollado en Wordpress: Web de Consultora
![Page 29: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/29.jpg)
DISEÑO WEB CON CMS
29de
36
Sitio Web Desarrollado en Wordpress: Blog de Noticias
![Page 30: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/30.jpg)
DISEÑO WEB CON CMS
30de
36
Sitio Web Desarrollado en Wordpress, Eliminando la Estructura de Template
![Page 31: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/31.jpg)
DISEÑO WEB CON CMS
31de
36
Sitio e-commerce Desarrollado en Joomla
![Page 32: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/32.jpg)
DISEÑO WEB CON CMS
32de
36
Sitio e-commerce Desarrollado en MercadoShops
![Page 33: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/33.jpg)
DISEÑO WEB CON CMS
33de
Sitio e-commerce Desarrollado en Magento
36
![Page 34: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/34.jpg)
TIPS QUE MARCAN LA DIFERENCIA
34de
36
Pequeñas Acciones Grandes Cambios
• Ideas Creativas
• Tener en cuenta la percepción del cliente
• Estrategia y difusión
• Opciones para la interacción con los usuarios
• Diseño simple “Menos es Más”
• Correcta utilización de los recursos disponibles
![Page 35: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/35.jpg)
CONSULTAS??
![Page 36: Pymes 2.0 - Modulo 1 Diseño Web 2.0](https://reader038.fdocument.pub/reader038/viewer/2022102616/5589ef47d8b42acd0d8b46ff/html5/thumbnails/36.jpg)
DISEÑO WEB 2.0Ideas Creativas que Ayudan a Vender
PRESENTACIÓN PARA EL PROGRAMA DE CAPACITACIÓN
MUCHAS GRACIAS!!