La clase inicia con una introducción a las plataformas web mas utilizadas, entre ellas la que mas destaca es WordPress con su complemento Elementor.
Plataformas de estudios Moodle
Es una herramienta de gestión de aprendizajes o más concretamente de Learning Content Management (LCMS), de distribución libre, escrita en PHP. Está concebida para ayudar a los docentes a crear comunidades de aprendizaje en línea, Moodle es usada en blended learning, educación a distancia, clase invertida y diversos proyectos de e-learning en escuelas, universidades, oficinas y otros sectores de todo el mundo.
Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web
Drupal https://drupal.com
Un sistema de gestión de experiencias digitales para impulsar contenido web
y experiencias multicanal personalizadas que ayuden a su organización a conectarse con
usuarios, clientes y visitantes dondequiera que estén. Es para sitios que tienen mucho tráfico.
Sitios Web avanzados, muy seguros, sitios para gobiernos, bancos, etc. Usuarios avanzados con equipos de desarrolladores.
Diseño Responsive / Breakpionts.
Todos sabemos que nuestras webs deben ser responsive. Pero, ¿qué quiere decir exactamente tener un diseño web adaptable o responsive y por qué es importante? Por otra parte, ¿qué es un punto de ruptura o breakpoint web?
¿Qué quiere decir responsive?
El responsive design es una práctica relacionada con la experiencia de usuario (UX). Debe llevarse a cabo en cualquier página web y consiste en que nuestra web se adapte a cualquier tamaño y orientación de pantalla, con la finalidad de mejorar la experiencia de nuestros usuarios.
¿Por qué es importante el diseño responsive?
- Google premia a las páginas construidas con un diseño responsive y las coloca en una mejor posición en los motores de búsqueda. ¿Te suena la frase “mobile first”?
- Mejoras la experiencia de tus usuarios y no causas frustración a la hora de navegar por tu página web.
¿Cómo hacemos un diseño responsive?
Para conseguir un diseño adaptable utilizaremos media queries, la técnica que nos permite definir en nuestra hoja de estilos CSS cómo se va a comportar nuestro diseño en los distintos tamaños de pantalla, orientaciones y tipo de dispositivo.
¿Cuáles son los breakpoints más comunes?
Los breakpoints más comunes son:
- @media all and (min-width:1200px){ … }
- @media all and (min-width: 960px) and (max-width: 1199px) { … }
- @media all and (min-width: 768px) and (max-width: 959px) { … }
- @media all and (min-width: 480px) and (max-width: 767px){ … }
- @media all and (max-width: 479px) { … }
Hacer nuestro diseño adaptado a todos estos tamaños puede llevar algo de tiempo, tanto para el diseñador como para el programador. Así que, dependiendo de la naturaleza del proyecto, nuestros breakpoints serán unos u otros.
¿Cómo definimos los breakpoints de nuestro diseño?
Es muy difícil crear unas normas globales para todos los proyectos. Para ayudarte puedes hacerte algunas de las preguntas que nos hacemos nosotros antes de empezar un proyecto:
¿Cuántas horas podemos dedicar al proyecto?
Debemos tener en cuenta que contra más breakpoints tenga nuestro diseño, más trabajo implica tanto por parte del diseñador como por parte del maquetador.
Se trata de encontrar un diseño que se adapte fácilmente a las distintas resoluciones de pantalla. En este sentido, te recomendamos utilizar siempre una guía de estilo para tu diseño web.
¿Cuál es el número perfecto de breakpoints?
Pensar que más breakpoints será mejor para nuestro diseño no es algo realista y tampoco es cierto. Nuestro trabajo como diseñadores es pensar un diseño que se adapte en intervalos. Por norma general definimos como mínimo 3 intervalos (breakpoints) y 4 como máximo. Hablamos de un mínimo de 3 porque suelen corresponderse con los tres dispositivos más habituales: smartphone, tablet y desktop.
Es posible que algunos elementos de tu diseño no se visualicen bien en los intervalos que has definido y necesiten de otro punto de inflexión. No te preocupes, podemos tener una excepción y definir otra media query para ese elemento, aunque no abuses de las excepciones. Pensemos que también tenemos que facilitar el trabajo del maquetador.
¿Por dónde empiezo a diseñar?
Mobile first. Y esto implica no solo empezar por mobile, sino también diseñar siempre con el tamaño mínimo de un breakpoint. De esta forma nos aseguramos que nuestro diseño se visualice bien en los tamaños más grandes del breakpoint definido.
Lo más importante es ser conscientes de que cada proyecto es distinto, y de que cada equipo de diseñadores y desarrolladores encontrará la forma óptima de trabajar para conseguir siempre un diseño responsive que garantiza una excelente experiencia de usuario al usar distintos formatos y dispositivos.
Ejemplo.
https://www.smashingmagazine.com
Los breakpoints se escriben en el CSS al final del documento.
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Typical Device Breakpoints
There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five common groups:
Example
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {…}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {…}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}
Animaciones CSS
https://www.w3schools.com/css/css3_animations.asp
Qué es mobile first y cómo puede mejorar tu posicionamiento
Como su propio nombre indica mobile first o por su traducción en inglés, «los móviles primero», resume perfectamente esta filosofía de desarrollo.
Básicamente se refiere a un modo de diseñar que tenga en cuenta, en primera instancia, un dispositivo móvil. Pantallas reducidas en comparación a los monitores que usamos normalmente con los ordenadores, y tras tener la maqueta preparada, realizar un escalado, es decir, aumentar el tamaño y adaptarlo a una pantalla de escritorio.
A día de hoy, el diseño responsive, la filosofía de diseño opuesta, es un estándar.
Este tipo de páginas web, son adaptativas, es decir, al reducir la resolución se reduce el tamaño del contenido, y es, realmente, lo que tiene Google bajo su lupa.
Que nuestro sitio web sea responsive no es opcional sino obligatorio, de lo contrario nuestra visibilidad y efectividad SEO se verá reducida ya que estaremos perdiendo todas las visitas de potenciales clientes que usen dispositivos móviles para navegar.
Cuando hablamos sobre el algoritmo de Google en 2017, le dimos una gran importancia al desarrollo web para dispositivos móviles, ya que es un factor en SEO cada vez más importante y por ello fundamental en cualquier proyecto online que se lance.
Mobile First es una estrategia de diseño de interfaces de uso (UI) donde se inicia el proceso pensando primero en cómo va a aplicar a pantallas pequeñas (smartPhones o Mobile) y desde ahí hacer crecer el diseño para adaptarse a pantallas de mayor tamaño como tablets y ordenadores.
Este movimiento de diseño está también teniendo un impacto en el diseño de los servicios de atención al cliente, ya que se está promoviendo que el diseño de la experiencia en el contacto con los clientes parta también sobre cómo operativizar el servicio en el SmartPhone del cliente.
Promover que el cliente use su propio móvil para hacer gestiones con nuestra empresa puede traducirse en un mayor incremento del autoservicio y a la vez de una mayor satisfacción del cliente, siempre y cuando el diseño de la experiencia de usuario (UXD) esté perfectamente diseñada para adaptarse a los intereses y necesidades del cliente.
En los últimos años, la adopción y uso de apps en móviles por parte de los clientes ha crecido exponencialmente, por lo que saber diseñar y promover apps que permitan al cliente auto-atenderse puede traducirse en reducciones de costes muy importantes y mejoras de la experiencia y el Customer Engagement.
@media… consulta de medios. queries
Diseños dinámicos
