Creación de un proyecto web y fundamentos de los CMS

¿Cómo crear una estrategia de contenidos en un proyecto web?

Una pequeña síntesis de lo que me ha parecido más relevante sobre las competencias profesionales necesarias para crear un proyecto web, y algunas de mis notas con conceptos clave e identificación de los fundamentos de los CMS para poder revisarlo a futuro y que quiero compartir contigo. Os enlazo los cursos y enlaces con herramientas al final del documento.

1. Creación de un proyecto web.

Gestión de la estrategia de contenidos en el proyecto web de Creación de un proyecto web. Análisis del proceso por y Armando Sotoca

Diseño web:

- El término 'diseño web' en la actualidad es un concepto que engloba todas las disciplinas y las aúna desde la idea inicial del proyecto hasta la presentación final. Disciplinas como el grafismo, "interface", estrategia de contenidos, arquitectura de información, desarrollo, optimización de motores de búsqueda, el desarrollo de la parte "front", de la parte "back", la arquitectura, etc. 

• El objetivo es crear la mejor experiencia del usuario posible. Para el propietario facilitarle la capacidad de trasnmitir información al usuario final. Y para el usuario, la capacidad de econtrar, consumir y entender la información que busca.

• Mantra del diseño web: mis sentimientos son irrelevantes. Estoy aquí para proporcionar la mejor experiencia al usuario final, sin importar mi contexto sino el suyo y cómo el usuario ha decidido acceder a la información.
• Dos ideales a seguir: mejora progresiva y el contenido es el rey (por encima del diseño)

Estrategia de contenidos:

• Concepto persona: usuario final rasgos y atributos. ¿Para quién estamos montando la web?Crear 3 personas como mínimo.
• Auditoría de contenidos: Inventario inicial, verificación y validación.
• Jerarquía del contenido: prioridades y jerarquía. 


• Global 1º (Home, contacto, ...), 2 (servicios, blog,  ...), 3 (Legal, sitemap)
• Por página 1º (Título, CTA, ...), 2 (promociones), 3 (redes sociales , ...), ...
• Arquitectura de la información: diagrama. 

• Testeo Card sorting: los usuarios definen la jerarquía, categorías y taxomías, y arquitectura de la información.

• Prototipado: wireflames o esqueleto. Prioridades. Pensar en mobile.

• Testeo wireframes y patrones. Permitir que el usuario resuelva el ejercicio, o se que de atascado.

Fase de desarrollo:

• Se recomienda trabajar en líneas paralelas de trabajo y no secuenciales.
• Disponer de una guía de estilo solventa muchos problemas.
• La estructura del contenidos. Mapa de plantillas basado en la arquitectura de la información.
   
• Prioridades del desarrollo: Estándares web "código correcto" , accesibilidad "cualquier persona puede acceder" , mobile-first "diferentes soportes"
• Accesibilidad: Probar ver html respeta los estándares. Ver sin css ni javascript. Navegación por teclado. Texto a voz o deficiencias visuales. 
• Responsive: Mobile-first, después aprovechar el mayor espacio de otros dispositivos. Definir puntos de corte predefinidos. Diseñar directamente en el navegador.

Test y revisiones:

• Listado: 
• Test de accesibilidad (ver herramientas)
• Test de estrés (desactivar hojas de estilo, js, ...)
• Test de usuarios - Feecback
• Test de anomalías - Páginas de error
• Mensajes de formularios
• Seguridad

Optimizar la experiencia del usuario:

• Parte técnica
• Tiempo de carga = factor crítico
• Optimizado - Minimizar código
• Cacheado
• Redes de distribución de contenido (CDN) - youtube para vídeos.
• ¿Responsive y Accesible?
• Seguridad y backup
• SEO
• Calidad del contenido y factor de confianza "https"
• Accesibilidad 
• Tiempo de carga
• Calidad de código
• Buenas prácticas
• Texto alternativo imágenes
• Meta descripción
• Sitemaps a enviar a motores de búsquedas
• Activar verificaciones sitios web (google "search console", bing)
• Analíticas
• Establece objetivos medibles
• Analiza si el tráfico de usuarios fluye por las páginas que quieres.
• Fuentes de información:
• RRSS, Google Analitycs, CMS
• Test a/b
• Feedback y control de errores
• 
  

2. CMS

[en desarrollo]

Enlaces más información y herramientas:

https://www.linkedin.com/learning/creacion-de-un-proyecto-web-analisis-del-proceso/gestion-de-la-estrategia-de-contenidos-en-el-proyecto-web 

Usabilidad:
http://www.nosolousabilidad.com/articulos/cardsorting_unicauca.htm
https://www.usableyaccesible.com/

Responsive:
https://mediaqueri.es/
https://bradfrost.github.io/this-is-responsive/

Diseño en webapp:
https://webflow.com/
https://froont.com/
https://readymag.com/

Accesibilidad:
https://www.tawdis.net/
http://examinator.ws/
http://validator.w3.org/
https://achecker.ca/checker/index.php

Optimizar:

https://es.wordpress.org/plugins/w3-total-cache/  (Caché)

https://cssminifier.com/ (CSS) ... también Javascript

https://tinypng.com/ (Imágenes)

https://kraken.io/ (Interfaz de optimización web)

https://browserdiet.com/es/ (Como perder peso en el navegador - Buenísima)