0
Desarrollo y diseñode un sitio de noticiasDel boceto al producto final
Planificación• Qué sitio queremos.• Para quién.• ¿Quién –creemos- es el usuario?• Cuáles son nuestros objetivos.
ContenidoCuál es “el pacto” con el usuario.• Tipo de contenido. Formatos:video, audio, texto, reportajes, ránkings, fotogr...
TecnologíaQué CMS elegir o como modificar el existente.• Amigable para los periodistas.• Flexible.• Adaptado a las necesid...
Diseño• ¿Rediseño integral o parcial? Determinar lacantidad de páginas.• ¿Logo y marca también?• ¿Agencia externa o intern...
RecursosQué tenemos y hasta dónde podemos llegar.• Producción de contenido: cantidad de periodistaspara cumplir con el obj...
“Inspiración”http://nico.cc/snowfallnewyorktimes
“Inspiración”http://nico.cc/espnellis
“Inspiración”http://nico.cc/pitchforkespecial
“Inspiración”http://www.awwwards.com
Crear el prototipo: Mockup oWireframe• Definir qué bocetaremos: home, artículointerno, sección, resultados de búsqueda, ga...
Twitter
Vimeo
Prototipo BBC
Prototipo por Khoi Vinh
Debemos preguntarnos todo.
• Logo.• Buscador.• Menú.• Herramientas sociales.• ¿Clima?, ¿Registración?• Interior de los artículos.• ¿Qué pasa al hacer...
Portada• Jerarquía de la información.• ¿Destacado de secciones?• Herramientas sociales.• Elementos multimedia.• Largo de l...
Artículos individuales• ¿Empezamos el prototipo desde aquí?• Título, bajada, elemento multimedia: ¿cómo semostrarán?• Text...
http://preview.reuters.com
http://nico.cc/theverge-nota
Secciones• ¿Diseño como una portada más?• Jerarquía de la información.• ¿Noticias destacadas o formato cronológico?• ¿Qué ...
Footer• Accesos.• Aprovechamiento para SEO.• Contacto.• Mapa del sitio.• Información institucional.
Tipografía• Elección fundamental.• Color y tamaño.• Pocas por sitio.• ¿Sobre fondo blanco?• Diferenciar títulos, subtítulo...
Etiquetado• Descripción de elementos multimedia:fotografías, videos, animaciones, infografías, etc.• Etiquetado de notas >...
Otras páginas• Resultados de búsqueda.• Tags.• Personajes, temas del día.• Clima.• Resultados de fútbol.• Infografías o es...
Integración con redes socialesOpciones:• Registración al sitio.• Widgets y botones para compartir.• Streaming de actividad...
“La usabilidad mide la calidad de la experienciaque una persona tiene cuando interactúa conun sitio Web, aplicación, softw...
Algunos problemas• Links que no cambian de color una vez visitados.• Links que no funcionan.• Apertura de nuevas pestañas....
Arquitectura de la informaciónDisciplina que consiste en organizar, jerarquizary nombrar la información presente en sitios...
Descargar el material: http://nico.cc/fopea2013
<!DOCTYPE html><title> Usen HTML5 y CSS3</title>Algunos beneficios:• Síntesis en el uso de etiquetas.• No se necesitan plu...
El día después…
Trabajo diario:• Medir, medir, medir.• Contenido más visitado, fuentes detráfico, etc.• Herramientas de webmaster Google.•...
¿Preguntas?
Gracias ;)NicolasPiccoli.com@sicnicolaspiccoli@gmail.com
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Desarrollo y diseño de un sitio de noticias. Del boceto al producto final
Upcoming SlideShare
Loading in...5
×

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

1,966

Published on

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

Published in: News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,966
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Desarrollo y diseño de un sitio de noticias. Del boceto al producto final"

  1. 1. Desarrollo y diseñode un sitio de noticiasDel boceto al producto final
  2. 2. Planificación• Qué sitio queremos.• Para quién.• ¿Quién –creemos- es el usuario?• Cuáles son nuestros objetivos.
  3. 3. ContenidoCuá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 pordía?• Afianzadar conocimientos de SEO.• Afianzadar conocimientos de redacción web.• Determinar tono y estilo.
  4. 4. TecnologíaQué 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).
  5. 5. Diseño• ¿Rediseño integral o parcial? Determinar lacantidad de páginas.• ¿Logo y marca también?• ¿Agencia externa o interna?• Buscar diseño simple.• Eliminar redundancias.• Tamaño correcto de los elementos.
  6. 6. RecursosQué tenemos y hasta dónde podemos llegar.• Producción de contenido: cantidad de periodistaspara cumplir con el objetivo. Volumen de contenido.• Presupuesto para diseño y tecnología.• ¿Tenemos diseñadores propios? ¿Expertos enusabilidad y arquitectura web? ¿ingenieros?
  7. 7. “Inspiración”http://nico.cc/snowfallnewyorktimes
  8. 8. “Inspiración”http://nico.cc/espnellis
  9. 9. “Inspiración”http://nico.cc/pitchforkespecial
  10. 10. “Inspiración”http://www.awwwards.com
  11. 11. Crear el prototipo: Mockup oWireframe• Definir qué bocetaremos: home, artículointerno, sección, resultados de búsqueda, galerías defotos y videos.• Qué contenido incluiremos en cada pieza.
  12. 12. Twitter
  13. 13. Vimeo
  14. 14. Prototipo BBC
  15. 15. Prototipo por Khoi Vinh
  16. 16. Debemos preguntarnos todo.
  17. 17. • Logo.• Buscador.• Menú.• Herramientas sociales.• ¿Clima?, ¿Registración?• Interior de los artículos.• ¿Qué pasa al hacer scroll?Header
  18. 18. Portada• Jerarquía de la información.• ¿Destacado de secciones?• Herramientas sociales.• Elementos multimedia.• Largo de la home.• Espacio para banners.• Carga del sitio.
  19. 19. Artículos individuales• ¿Empezamos el prototipo desde aquí?• Título, bajada, elemento multimedia: ¿cómo semostrará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?).
  20. 20. http://preview.reuters.com
  21. 21. http://nico.cc/theverge-nota
  22. 22. Secciones• ¿Diseño como una portada más?• Jerarquía de la información.• ¿Noticias destacadas o formato cronológico?• ¿Qué elementos diferenciadores tendrá cadauna?• Paginación.
  23. 23. Footer• Accesos.• Aprovechamiento para SEO.• Contacto.• Mapa del sitio.• Información institucional.
  24. 24. 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?
  25. 25. Etiquetado• Descripción de elementos multimedia:fotografías, videos, animaciones, infografías, etc.• Etiquetado de notas > Organización del sitio.• Atributo <ALT>
  26. 26. 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.
  27. 27. Integración con redes socialesOpciones:• 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.
  28. 28. “La usabilidad mide la calidad de la experienciaque una persona tiene cuando interactúa conun sitio Web, aplicación, software o cualquierotra interface”.
  29. 29. 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.
  30. 30. Arquitectura de la informaciónDisciplina que consiste en organizar, jerarquizary nombrar la información presente en sitiosWeb, dispositivos móviles e interfaces engeneral.
  31. 31. Descargar el material: http://nico.cc/fopea2013
  32. 32. <!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 comojQuery, entre otros.• Utilizar cualquier fuente de la web: @font-face, GoogleWeb Fonts, etc.• CSS3 para realizar animaciones simples, bordesredondeados, transparencias y opacidad, etc. Sinutilizar imágenes. Puro código.• Responsive Design.Prueben: http://es.html5boilerplate.com/</html>
  33. 33. El día después…
  34. 34. Trabajo diario:• Medir, medir, medir.• Contenido más visitado, fuentes detráfico, etc.• Herramientas de webmaster Google.• Eyetracking (crazyegg.com).• Desarrollo y rediseño CONSTANTE.• Elaborar estrategias de crecimiento de tráfico.
  35. 35. ¿Preguntas?
  36. 36. Gracias ;)NicolasPiccoli.com@sicnicolaspiccoli@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×