Presentación de Nicolás Píccoli sobre Desarrollo y diseño de un sitio de noticias. Del boceto al producto final, en las II Jornadas de Capacitación en Periodismo Digital, organizadas por FOPEA

6. Desarrollo y diseño
de un sitio de noticias
Del boceto al producto final

7. Planificación
• Qué sitio queremos.
• Para quién.
• ¿Quién –creemos- es el usuario?
• Cuáles son nuestros objetivos.

8. Contenido
Cuál es “el pacto” con el usuario.
• Tipo de contenido. Formatos:
video, audio, texto, reportajes, ránkings, fotografías, etc.
• Cuál es el fuerte del sitio.
• Determinar la jerarquía de la información.
• Flujo de actualización. ¿Cuántas notas publicaremos por
día?
• Afianzadar conocimientos de SEO.
• Afianzadar conocimientos de redacción web.
• Determinar tono y estilo.

9. Tecnología
Qué CMS elegir o como modificar el existente.
• Amigable para los periodistas.
• Flexible.
• Adaptado a las necesidades del medio.
• SEO friendly.
• ¿Propietario , de código abierto y/o desarrollo propio?
• Soporte.
• Qué tecnologías requiere: ¿Flash? ¡No! HTML5, CSS3.
• Versión móvil: aplicación o responsive design (o ambas).

10. Diseño
• ¿Rediseño integral o parcial? Determinar la
cantidad de páginas.
• ¿Logo y marca también?
• ¿Agencia externa o interna?
• Buscar diseño simple.
• Eliminar redundancias.
• Tamaño correcto de los elementos.

11. Recursos
Qué tenemos y hasta dónde podemos llegar.
• Producción de contenido: cantidad de periodistas
para cumplir con el objetivo. Volumen de contenido.
• Presupuesto para diseño y tecnología.
• ¿Tenemos diseñadores propios? ¿Expertos en
usabilidad y arquitectura web? ¿ingenieros?

12. “Inspiración”
http://nico.cc/snowfallnewyorktimes

13. “Inspiración”
http://nico.cc/espnellis

14. “Inspiración”
http://nico.cc/pitchforkespecial

15. “Inspiración”
http://www.awwwards.com

16. Crear el prototipo: Mockup o
Wireframe
• Definir qué bocetaremos: home, artículo
interno, sección, resultados de búsqueda, galerías de
fotos y videos.
• Qué contenido incluiremos en cada pieza.

17. Twitter

18. Vimeo

19. Prototipo BBC

20. Prototipo por Khoi Vinh

21. Debemos preguntarnos todo.

22. • Logo.
• Buscador.
• Menú.
• Herramientas sociales.
• ¿Clima?, ¿Registración?
• Interior de los artículos.
• ¿Qué pasa al hacer scroll?
Header

24. Portada
• Jerarquía de la información.
• ¿Destacado de secciones?
• Herramientas sociales.
• Elementos multimedia.
• Largo de la home.
• Espacio para banners.
• Carga del sitio.

28. Artículos individuales
• ¿Empezamos el prototipo desde aquí?
• Título, bajada, elemento multimedia: ¿cómo se
mostrarán?
• Texto, extensión (tener en cuenta los diferentes largos).
• Fecha y hora de publicación (muy importante).
• Autor.
• Elementos sociales.
• El artículo como puerta de entrada al sitio.
• Notas relacionadas, últimas noticias.
• ¿Comentarios? (¿moderación o no?).

29. http://preview.reuters.com

30. http://nico.cc/theverge-nota

32. Secciones
• ¿Diseño como una portada más?
• Jerarquía de la información.
• ¿Noticias destacadas o formato cronológico?
• ¿Qué elementos diferenciadores tendrá cada
una?
• Paginación.

33. Footer
• Accesos.
• Aprovechamiento para SEO.
• Contacto.
• Mapa del sitio.
• Información institucional.

34. Tipografía
• Elección fundamental.
• Color y tamaño.
• Pocas por sitio.
• ¿Sobre fondo blanco?
• Diferenciar títulos, subtítulos, enlaces.
• ¿De sistema o de uso libre?

35. Etiquetado
• Descripción de elementos multimedia:
fotografías, videos, animaciones, infografías, e
tc.
• Etiquetado de notas > Organización del sitio.
• Atributo <ALT>

36. Otras páginas
• Resultados de búsqueda.
• Tags.
• Personajes, temas del día.
• Clima.
• Resultados de fútbol.
• Infografías o especiales.
• Encuestas.
• Cartelera de cine, teatro, espectáculos, etc.

37. Integración con redes sociales
Opciones:
• Registración al sitio.
• Widgets y botones para compartir.
• Streaming de actividad.
• Más desarrollo vía APIs.
Gestión en redes:
• Equipo “social media”: administración, gestión, métricas.
• Tipo de contenido, estrategia, planificación.
• Distribuir el contenido diferenciado por redes.

39. “La usabilidad mide la calidad de la experiencia
que una persona tiene cuando interactúa con
un sitio Web, aplicación, software o cualquier
otra interface”.

40. Algunos problemas
• Links que no cambian de color una vez visitados.
• Links que no funcionan.
• Apertura de nuevas pestañas.
• Apertura de pop-ups.
• No respetar los estándares Web.
• Diferenciar contenido de publicidad.
• Textos no adaptados para la Web.
• Multimedia y videos excesivamente largos.
• Incompatibilidad de plataformas (Mac, PC y navegadores).
• URLs largas y/o complejas.
• Velocidad de carga lenta.

41. Arquitectura de la información
Disciplina que consiste en organizar, jerarquizar
y nombrar la información presente en sitios
Web, dispositivos móviles e interfaces en
general.

42. Descargar el material: http://nico.cc/fopea2013

44. <!DOCTYPE html>
<title> Usen HTML5 y CSS3</title>
Algunos beneficios:
• Síntesis en el uso de etiquetas.
• No se necesitan plugins adicionales para insertar
<video> <audio> <canvas> <svg>
• No más flash y cosas extras.
• Compatible con Javascript y frameworks como
jQuery, entre otros.
• Utilizar cualquier fuente de la web: @font-face, Google
Web Fonts, etc.
• CSS3 para realizar animaciones simples, bordes
redondeados, transparencias y opacidad, etc. Sin
utilizar imágenes. Puro código.
• Responsive Design.
Prueben: http://es.html5boilerplate.com/
</html>

45. El día después…

48. Trabajo diario:
• Medir, medir, medir.
• Contenido más visitado, fuentes de
tráfico, etc.
• Herramientas de webmaster Google.
• Eyetracking (crazyegg.com).
• Desarrollo y rediseño CONSTANTE.
• Elaborar estrategias de crecimiento de tráfico.

49. ¿Preguntas?

50. Gracias ;)
NicolasPiccoli.com
@sic
nicolaspiccoli@gmail.com