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

  • 1,764 views
Uploaded 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

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

More in: News & Politics
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,764
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Desarrollo y diseñode un sitio de noticiasDel boceto al producto final
  • 2. Planificación• Qué sitio queremos.• Para quién.• ¿Quién –creemos- es el usuario?• Cuáles son nuestros objetivos.
  • 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. 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. 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. 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. “Inspiración”http://nico.cc/snowfallnewyorktimes
  • 8. “Inspiración”http://nico.cc/espnellis
  • 9. “Inspiración”http://nico.cc/pitchforkespecial
  • 10. “Inspiración”http://www.awwwards.com
  • 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. Twitter
  • 13. Vimeo
  • 14. Prototipo BBC
  • 15. Prototipo por Khoi Vinh
  • 16. Debemos preguntarnos todo.
  • 17. • Logo.• Buscador.• Menú.• Herramientas sociales.• ¿Clima?, ¿Registración?• Interior de los artículos.• ¿Qué pasa al hacer scroll?Header
  • 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. 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. http://preview.reuters.com
  • 21. http://nico.cc/theverge-nota
  • 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. Footer• Accesos.• Aprovechamiento para SEO.• Contacto.• Mapa del sitio.• Información institucional.
  • 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. Etiquetado• Descripción de elementos multimedia:fotografías, videos, animaciones, infografías, etc.• Etiquetado de notas > Organización del sitio.• Atributo <ALT>
  • 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. 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. “La usabilidad mide la calidad de la experienciaque una persona tiene cuando interactúa conun sitio Web, aplicación, software o cualquierotra interface”.
  • 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. Arquitectura de la informaciónDisciplina que consiste en organizar, jerarquizary nombrar la información presente en sitiosWeb, dispositivos móviles e interfaces engeneral.
  • 31. Descargar el material: http://nico.cc/fopea2013
  • 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. El día después…
  • 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. ¿Preguntas?
  • 36. Gracias ;)NicolasPiccoli.com@sicnicolaspiccoli@gmail.com