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

Alvaro Gómez Velasco – MrFoxtalbot –

Estudio fotografía en el WAES de Londres y en 2002 empiezo a trabajar como fotógrafo y retocador. En 2006 llego a Madrid y hasta 2009 trabajo como director de arte y animador flash para varias agencias de publicidad (RNL, Shackelton, Wunderman, BBDO). Desde 2010 dirijo mi propio estudio de desarrollo web especializado en WordPress, donde coordino un equipo de freelances especialistas en distintos campos: SEO/SEM, UX/UI, Branding, ilustración producción de audio/video, desarrolladores front y back, sysadmins. Soy parte del equipo organizador del MeetUp de WordPress Madrid así como del evento WordCamp Madrid 2017.

https://mrfoxtalbot.wordpress.com
https://profiles.wordpress.org/mrfoxtalbot
flickr.com/photos/mrfoxtalbot

Entrevista.

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 > http://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

Leer más “Herramientas Web – Máster Anual de Dirección y Gestión de Comunicación, Marketing y Publicidad – IED”

Acceso al gestor y primeros pasos en WordPress.com

Existen tres maneras distintas de editar/modificar tu página en WordPress.com. Desde cada uno de ellos se pueden hacer cosas distintas y cada una tiene sus ventajas e inconvenientes:

  1. El editor por defecto (llamado Calypso)
  2. El editor “clásico” (llamado wp-admin)
  3. El personalizador (en inglés “customizer”)

El editor por defecto: Calypso

Es el que os va a mostrar WordPress.como cuando creéis vuestra web. Es el más sencillo de utilizar y el más rápido a la hora de escribir y publicar contenidos.

También es el que os mostrará si pincháis “editar” cuando estéis visitando una entrada en vuestra web (con sesión iniciada, se entiende).

Para mis gusto personal este editor es un tanto incompleto y por eso prefiero usar el clásico.

El editor clásico “wp-admin”

Este editor es el “clásico” y es el que os encontraréis si más adelante trabajáis con una instalación propia (self-hosted o WordPress.org). Por este motivo yo recomiendo usarlo siempre, en lugar de Calypso. Para acceder a él antes había un botón directo, pero recientemente lo quitaron :

A día de hoy la única manera es escribir, detrás de la dirección de vuestra web “wp-admin”, de esta manera:

vuestraweb.wordpress.com/wp-admin

Una vez accedáis tendría que mostrarlos algo así:

El Personalizador

Se utiliza principalmente para cambiar el diseño de la página (colores, tipografías, logos e imágenes de cabecera), aunque también es posible gestionar desde él los menús y los widgets. Se puede acceder a él desde Apariencia > Personalizador (en el WP-Admin) o desde el botón de “Personalizar” que se muestra abajo a la derecha cuando visitamos nuestra página.