1 DESARROLLO WEB para DISEÑADORES GRÁFICOS

2 ¿Quién diserta? Pablo Reyes DESARROLLADOR WEB [email protected] GUERRA SEXY Armátudisplay.com

3 Desarrollos propios Portal de Mendoza (www.srtk.com) Enciclopedia Scout (www.wikipowell.org) Página de inicio para tu cibercafé (inicio.srtk.com) La página para tu BANDA, gratis (bandas.srtk.com) Guerra Sexy (www.guerrasexy.com) Armá tu display para tu MSN (www.armatudisplay.com) (English version: www.makeyourdisplay.com) (Versão Portuguese: www.crieseuavatar.com) (Versione italiana: www.creailtuoavatar.com) Videos (www.videos-chistosos.net) Wallpapers, fondos de escritorio (www.wallpapersmix.com) 28.000 personas / día

4 Desarrollos a terceros Diario San Rafael Finca y Bodega La Abeja Cerro Nevado Automotores Termoplástica San Rafael Hugo Mur Arquitectos Suter, casa de campo

5 ¿Qué vamos a ver? Conceptos básicos de Internet Del papel a la Web: lo nuevo Cómo hacer buenos sitios Webs Buscadores Cómo elegir un buen Desarrollador Web Cómo trabajar con un Desarrollador Web Cómo presentar el trabajo Costos y algunos puntos más

6 Trabajos para Internet Labores Diseñadores SEOs Desarrolladores Fotógrafos Cineastas El orden de importancia de los labores depende del proyecto ¿Unificando trabajos?

7 Diseñar (o desarrollar) una Web Primer paso Aventurarse Comparar Usar, usar y usar La meta será asimilar principalmente convenciones

8 Internet Básicamente ¿Como funciona? Hosting – Dominio – Correos – DNS Dominios.com.com.ar

9 ”Tipos” de sitios Web

10 Mi sitio Web, en Flash Ventajas Diseño e interacción más vanguardista Imágenes vectoriales Fuentes originales Audio Animaciones Desventajas Generalmente es más pesado (descarga lenta) Baja o nula indexación por parte de los buscares Modificación laboriosa Requiere un plugin

11 Mi sitio Web, en HTML Ventajas Diseño uniforme (css) Carga rápida Posicionamiento Fácil mantenimiento Desventajas La forma en como se ve en diferentes navegadores varía Es más probable que esté técnicamente mal desarrollada

12 HTML de cara a un diseñador Resoluciones Colores Fuentes Medidas de proporción (em, %) Formularios

13 Programación en capas Comportamiento → JavaScript Presentación → CSS Contenido → HTML

14 HTML

15 HTML + CSS

16 3 Conceptos básicos Usabilidad Accesibilidad Estándares

17 Usabilidad

18 Pop-ups para presentación de contenido

19 Usabilidad Enlaces invisibles Enlaces poco claros (por ej: clic aquí)

20 Usabilidad Menús desplegables

21 Usabilidad Imágenes animadas (máximo 1 por página) Siempre en la misma ventana Como máximo 3 clics a cualquier destino No hagas pensar a los usuarios, todo tiene que ser obvio Utiliza convenciones Haz pruebas con usuarios al comienzo, no al final

22 Accesiblidad Incrementa la cuota de mercado y alcance de audiencia Discapacitados y no-discapacitados Soporte a niveles de baja alfabetización Mejora la indexación actual y a futuro Web semántica Asistencia a usuarios con limitada velocidad de conexión

23 Accesiblidad ● Eficiencia ● Reduce el mantenimiento ● Independencia de dispositivo ● Reutilización del código (para Pcs, PDAs, Impresoras) ● Mayor responsabilidad social y menor responsabilidad legal

24 Web 2.0

25 Tendencias Simplicidad Diseños centrados Pocas columnas Secciones separadas Navegación simple Logos con un fuerte peso visual Gran Tamaño de Texto Gradientes Colores fuertes Reflejos

26 Web 2.0

27

28

29 Formularios Pida sólo la información necesaria Infiera información Organizar todo en una sola columna Analizar bien los campos que el cliente solicita En un contacto a veces es mejor preguntar que un formulario extenso Asegurarse que la empresa posee medios para responder

30 RSS

31 Buscadores ”Una web que no es visible en los buscadores es como un catálogo que se imprime para terminar en el cajón de un archivo”

32 La importancia de ser los primeros primeras posiciones = más visitas

33 Buscadores

34 Buscadores, lo que hay que saber Entender como buscan los buscadores (Quiénes, cuántos, qué dice y desde cuando) Comprender como buscan los usuarios Palabras clave Optimizar el código y texto Y por supuesto Contenidos de calidad Contenidos para los usuarios y no para los buscadores

35 Contacto con un desarrollador ¿Cuándo es necesario un contacto entre el desarrollador y el cliente? ¿Cuándo es necesario contactarme con el desarrollador?

36 Desarrolladores Web Evaluándolo Trabaja en capas Respeta estándares Se preocupa por la usabilidad y la accesibilidad Conoce sobre RSS Maneja técnicas SEO EXPERIENCIA Verificando Navegadores W3C HTML Validator / W3C CSS Validator

37 Cómo encarar el trabajo Generar un gran lienzo Establecer unas guías de un ancho conveniente (recomiendo 990px) Elegir un color y/o diseño de fondo Recuerde que la maquetación debe hacerla en “cajas” (como tablas) Diseño espaciado

38 Cómo encarar el trabajo (cont.) Colocar muchos puntos de conversión Menú claro ¿cómo llego? ¿Cómo se ve si cambio de tamaño? Tipografía Fuentes Web No coloque direcciones de correo ¡@! Titles, Keywords y Descriptions

39 Cómo entregar el trabajo No repita el contenido, sólo haga ejemplos de las pantallas Presente todo el texto en un documento Separe si es muy extenso, por ejemplo un documento por sección Divida cada idioma Imágenes por separado Las imágenes es recomendable que sean en media/alta resolución Si es posible entregue cada imagen en un archivo diferente, en formato JPG (¡NO CAPAS¡)

40 ¿Cuánto cuesta un sitio Web? Cómo solicito un presupuesto Puntos a decidir (Flash o HTML, por ej.) Precio depende de Calidad Alcance Tiempo (gralmente fijado por el equipo de trabajo) Valores $

41 Conclusiones Empaparse de las convenciones Es similar a diseñar sobre ”papel”, pero no igual Testear los proyectos en otros entornos Evaluar al desarrollador antes de trabajar Preocuparse también por la usabilidad Pensar en los buscadores al redactar los textos Estar actualizado de las últimas tendencias

42 ¿Preguntas? Pablo Reyes DESARROLLADOR WEB [email protected]