desarrollo y diseño de un sitio de noticias. del boceto al producto final
DESCRIPTION
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 FOPEATRANSCRIPT
![Page 1: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/1.jpg)
![Page 2: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/2.jpg)
![Page 3: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/3.jpg)
![Page 4: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/4.jpg)
![Page 5: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/5.jpg)
![Page 6: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/6.jpg)
Desarrollo y diseño de un sitio de noticias
Del boceto al producto final
![Page 7: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/7.jpg)
Planificación
• Qué sitio queremos. • Para quién. • ¿Quién –creemos- es el usuario? • Cuáles son nuestros objetivos.
![Page 8: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/8.jpg)
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.
![Page 9: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/9.jpg)
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).
![Page 10: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/10.jpg)
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.
![Page 11: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/11.jpg)
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?
![Page 12: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/12.jpg)
“Inspiración”
http://nico.cc/snowfallnewyorktimes
![Page 13: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/13.jpg)
“Inspiración”
http://nico.cc/espnellis
![Page 14: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/14.jpg)
“Inspiración”
http://nico.cc/pitchforkespecial
![Page 15: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/15.jpg)
“Inspiración”
http://www.awwwards.com
![Page 16: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/16.jpg)
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.
![Page 17: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/17.jpg)
![Page 18: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/18.jpg)
Vimeo
![Page 19: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/19.jpg)
Prototipo BBC
![Page 20: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/20.jpg)
Prototipo por Khoi Vinh
![Page 21: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/21.jpg)
Debemos preguntarnos todo.
![Page 22: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/22.jpg)
• Logo.• Buscador.• Menú.• Herramientas sociales.• ¿Clima?, ¿Registración?• Interior de los artículos.• ¿Qué pasa al hacer scroll?
Header
![Page 23: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/23.jpg)
![Page 24: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/24.jpg)
Portada
• Jerarquía de la información. • ¿Destacado de secciones?• Herramientas sociales. • Elementos multimedia. • Largo de la home. • Espacio para banners.• Carga del sitio.
![Page 25: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/25.jpg)
![Page 26: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/26.jpg)
![Page 27: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/27.jpg)
![Page 28: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/28.jpg)
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?).
![Page 29: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/29.jpg)
http://preview.reuters.com
![Page 30: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/30.jpg)
http://nico.cc/theverge-nota
![Page 31: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/31.jpg)
![Page 32: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/32.jpg)
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.
![Page 33: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/33.jpg)
Footer
• Accesos. • Aprovechamiento para SEO. • Contacto. • Mapa del sitio.• Información institucional.
![Page 34: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/34.jpg)
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?
![Page 35: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/35.jpg)
Etiquetado
• Descripción de elementos multimedia: fotografías, videos, animaciones, infografías, etc.
• Etiquetado de notas > Organización del sitio. • Atributo <ALT>
![Page 36: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/36.jpg)
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.
![Page 37: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/37.jpg)
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.
![Page 38: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/38.jpg)
![Page 39: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/39.jpg)
“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”.
![Page 40: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/40.jpg)
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.
![Page 41: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/41.jpg)
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.
![Page 42: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/42.jpg)
Descargar el material: http://nico.cc/fopea2013
![Page 43: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/43.jpg)
![Page 44: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/44.jpg)
<!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>
![Page 45: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/45.jpg)
El día después…
![Page 46: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/46.jpg)
![Page 47: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/47.jpg)
![Page 48: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/48.jpg)
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.
![Page 49: Desarrollo y diseño de un sitio de noticias. Del boceto al producto final](https://reader036.vdocuments.co/reader036/viewer/2022081413/5490fad1b4795932688b47e6/html5/thumbnails/49.jpg)
¿Preguntas?