Herramientas Web – Máster Anual de Dirección y Gestión de Comunicación, Marketing y Publicidad – IED

Dominios y alojamientos. Opensource.

Dominios

  • Distinción entre hosting y dominio
  • Criterios para escoger un dominio: Corto, memorable, específico. (ver este videoejemplos aquí y aquí, y esta herramienta).
  • Distintos lista de TLD, domain hacks, uso de subdominios.
  • Configuración de DNS.
  • Configuración de registros y subdominios.
  • Configuración de emails.
  • Redirecciones si se hace un cambio de dominio.

Hosting

  • Criterios para escoger un proveedor de hosting (seguridad, velocidad, tecnologías, copias de seguridad, staging, control de versiones, soporte técnico, “extras”: CDNs, SSL)
  • Criterios para escoger un plan de hosting: compartido, virtual o dedicado (ancho de banda, concurrencia, escalabilidad, espacio en disco, ubicación)

Opensource

  • Tipos de licencias de Software: Propietario VS GPL
  • Origen del GPL (la impresora de Stallman) y 4 libertades
  • Herencia (viralidad) de la licencia GPL
  • Ventajas técnicas (Transparencia, seguridad, comunidad, disponibilidad de desarolladores)
  • Consideraciones éticas (libertad, propiedad de contenidos, neutralidad de la web)

Backend VS Frontend

  • Qué sucede en nuestro navegador, qué sucede en el servidor.
  • Consideraciones de optimización, escalado y velocidad en cada lado.
  • Consideraciones de seguridad (XSS, LFI, SQL inyection) y validación de datos.

Planificación y lanzamiento de un proyecto:

  • Escoger la tecnología y la plataforma adecuada. Elegir un hosting en consonancia.
  • Análisis previa del nicho de mercado y la competición (Google Trends)
  • Análisis de datos previos de tráfico si se trata de un rediseño
  • Establecer un público objetivo y definir palabras clave y objetivos de conversión
  • Prototipado frontend: Wireframes (herramientas)
  • Prototipado backend: Arquitectura de datos
  • Aplicación de imagen corporativa a Wireframes
  • Desarrollo frontend y backend: Control de versiones.
  • A/B testing con usuarios reales para detectar problemas en usabilidad y embudo de conversión
  • Despliegue en un servidor de producción y cambio de DNS o registros A si fuera necesario
  • Análisis de tráfico, conversión e iteraciones.

El frontend: XHTML, CSS, JS y FTP

  • Ver el código fuente de una página y usar el inspector de Chrome (previsualizador responsive). User Agent Switcher.
  • HTML: La base del internet. Semántica. Cheatcheet. ejemplo: DeathtoBullshit)
  • CSS: Separación de estilo y contenido. Cheatsheet de propiedades. Cheatsheet de selectores. (ejemplo CSS Zen Garden)
  • Javascript: Interacción y manipulación del DOM + AJAX
  • XML y Json: Archivos de datos
  • Novedades de HTML5: Video, audio, geolocalización, notificaciones push, validación de formularios, etiquetas semánticas.
  • Novedades de CSS3: Webfonts, animaciones & transiciones, mediaqueries, columnas, efectos 3D, Flex  & Grid layouts, selectores complejos. (Más detalles aquí y aquí)
  • Herramientas para demos en vivo: JsFiddle y CodePen
  • Transferencias de archivos a un servidor: FTP, SFTP, SSH. Filezilla.
  • Editores de código (IDEs): Sublime Text, PHP Storm, Text Wrangler, Coda, Dreamweaver.
  • Preprocesadores SASS.
  • Automatizaciones: GRUNT y GULP.
  • Herramientas online > www.codepen.io

HTML5/CSS3 en dispositivos móviles

  • Responsive VS Adaptative VS Liquid (ejemplo)
  • Detección de user agent (javascript) VS detección de viewport (mediaqueries)
  • Redirección a versiones móviles (en un subdominio).
  • Device-specific mediaqueries.
  • Uso de mediaqueries para impresión (visibilizar links)
  • Consideraciones de limitaciones de ancho de banda para fotos y videos.
  • Consideraciones de UI  en móviles> NO: Desplegables, Ventanas modales o efectos de Rollover. SI: Gestos táctiles, position:fixed, zonas accesibles (mediaqueries verticales).
  • Menú hamburguesa sí, menú hamburguesa no.
  • Simplificación del flujo de navegación para optimizar la conversión en móvil.
  • Aprovechamiento del hecho que es un teléfono (llamada directa o compartir por whatsapp)

Ejercicios con código

  • Introducción al inspector de Chrome y a CodePen.io
  • HTML tags, semántica, atributos, clases, IDs
  • CSS. Externo, VS <style> VS Inline. Selectores, Herencia, Especificidad. Imágenes, Box Model, Layouts.
  • JS: Interacción, manipulación del DOM. Interacción con APIs, Json, AJAX.
  • FTP: Programas y Configuración. SFTP, SSH.
  • PHP: Revisión de las plantillas php de un tema de WordPress.
  • MYSQL: Importación, serializado, MD5, PHPMyAdmin.

Lenguajes de Backend y CMSs

  • Páginas estáticas VS Páginas dinámicas
  • Lenguajes de servidor (.net, php, node, ruby)
  • Bases de datos. Modelado de datos. Coste y cacheado de consultas.
  • CMS – Self hosted opensource VS 3rd Party propietary platforms.
  • Cacheado, SSL, CDNs.
  • Seguridad. Up to date, monitorizado, backups.
  • Robots.txt (casa Real)

WordPress

  • Software libre (GPL) mantenido por una comunidad.
  • Versátil (CMS, ecommerce, CRM) & Estándar (PHP+MYSQL)
  • WordPress.org VS WordPress.com
  • WordPress trademark. Automattic (akismet, gravatar, jetpack).
  • Temas VS Plugins. Presentación VS funcionalidad (ejemplo CPTs)
  • Extensible (CPTs, Custom Taxonomies, Tax & Post meta, REST API)
  • Flexible: Child themes, hooks & pre_get_posts().

Sistemas de pago online

  • Bitcoin, TPV, Paypal, Stripe, cotrareembolso, transferencia.
  • Configuración y requerimientos técnicos.
  • Comisiones (para comprador y vendedor), porcentajes fijos + variables, devoluciones, disponibilidad.
  • Pagos recurrentes, notificaciones al usuario.

Métricas y control de tráfico.

  • Analytics
  • Google trends
  • Google search console

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *