Casi todo lo que deberías saber antes de abordar el diseño de una página web.

1. El diseño de
una página
WEB
Pablo de Lapatza
Federación Comercio Alava
26/10/2017
casi todo lo
que deberías
saber antes
de abordar…
[ ]

2. Pablo de Lapatza Almagia
Licenciado en Publicidad
Licenciado en Periodismo
Master en Marketing
contextodecomunicacion.com
http://linkedin.com
http://slideshare.net/plapatza
¿Y tú?
Nombre
negocio
presencia
expectativas
1. INTRODUCCIÓN

3. Contenidos de esta jornada:
• Cómo funcionan Internet y las
páginas web
• Tipos de páginas web y sus
características
• Definir las necesidades concretas y
objetivos de la web del comercio
• Comenzar a escribir el guión de
contenidos
unsplash.com

4. De The Opte Project - wikimedia commons
Internet: conceptos básicos
• Orígenes: Arpanet
• Bits, Byts, bus de datos
• Protocolos: email, IP, FTP,
WWW…
• Direcciones IP, dominios
• Proveedores de acceso, Hosting

5. World Wide Web
• Distribución de documentos de
hipertexto o hipermedios
• Entorno visual y amigable
• Lenguajes http, javascript,
PHP…
• Interpretados por los
navegadores

6. Evolución de la construcción
de páginas web
• Código html
• Primeros editores WYSIWYG:
Frontpage, Dreamweaver
• PHP y las páginas dinámicas
• Gestores de contenido (CMS)
• Código libre vs. propietario
• Web 2.0 y redes sociales
• Marketplaces
• Servicios SAAS
Photo by Matt Wildbore on Unsplash

7. ¿Por qué quieres tener
una página web?
Define tus necesidades:
• Geoposicionamiento
• Visibilidad online
• Escaparate de productos/servicios
• Atracción de clientes
• Atención al cliente
• Venta online
• Comunidad online
• …
Se realista

8. Toma tus decisiones:
• ¿Alojamiento propio o “gratuito”?
• ¿Código a medida, CMS, SAAS…?
• ¿Wordpress o Joomla!?
• ¿Plantilla o diseño a medida?
• ¿Venta online?
• ¿Presupuesto?
• ¿Formación?
• ¿Inhouse o subcontratación?
Photo by Nathan Dumlao on Unsplash

9. 3. ASPECTOS TECNICOS
ELEGIR UN BUEN DOMINIO
corto
memorable
marca
palabras clave
.com, net, es…
…pero sin obsesionarse
pixabay.com

10. ALOJAMIENTO
calibrar las opciones
dedicado o compartido
valorar la atención al cliente
caídas de servicio
pixabay.com

11. DESARROLLO
PROPIETARIO
ajustado a necesidades
llave en mano
integrado en la gestión
…
CÓDIGO
ABIERTO
comunidad
no dependencia
costo más ajustado
flexibilidad
…

12. WORDPRESS
el cms más usado
integra web y tienda
ágil y flexible
ideal tiendas pequeñas
Woocommerce
http://www.woothemes.com/woocommerce/
demo

13. EL LÍDER
robusto y seguro
muchos productos
muchas utilidades
cms
integración erp posible
curva de aprendizaje
http://installatron.com/magento/demo

14. EL OTRO LÍDER
líder en España
más sencillo
gran comunidad
muy personalizable
requiere menos recursos
más económico
http://www.prestashop.com/es/
https://www.prestabox.com/es/
http://demo.prestashop.com/es/

15. SHOPIFY
solución saas
fácil y rápido
buenas herramientas
http://es.shopify.com/

16. MARKETPLACES
amazon
ebay
rakuten
pixmania
…poner la caña donde
están los peces.
pixabay.com

17. Arquitectura de la información:
El árbol de contenidos

18. WIREFRAMING:
Boceto o esquema de
maquinación de los contenidos
en cada página
Herramientas:
Papel y lápiz
wireframe.cc
mockflow.com
Axure…

19. ¡Manos a la obra!
gratisography.com

20. GRACIAS POR TU
ATENCIÓN
^_^
¿preguntas?