Introducción al desarrollo web responsive con html y css

Inicio » Introducción al desarrollo web responsive con html y css

Css responsive media queries

¡Lleva tu diseño al navegador! En este curso, Javier Usobiaga te enseñará a crear páginas web con las herramientas más fundamentales: HTML y CSS. Aprenderás a escribir tu propio código y a cambiar la forma de ver (y diseñar) la web, entendiendo cómo funciona por dentro y cómo diseñar una web responsive para que sea más efectiva. Y si el diseño no es lo tuyo, este curso puede ser una buena base para iniciarte en el mundo del Desarrollo Web Front-end.

Este curso parte de un conocimiento nulo de HTML y CSS. Incluye las etiquetas HTML fundamentales y las propiedades tipográficas de CSS, herramientas de maquetación como Floats o Position, fondos, bordes, esquinas redondeadas, sombras, Web Fonts y herramientas clave de Desarrollo Responsive como Media Queries.

El proyecto final consiste en la creación de una web responsive (la web de una cafetería ficticia) a partir de un diseño proporcionado como síntesis de las diferentes asignaturas que veremos a lo largo del curso.

Introducción a html y css

El diseño web responsivo (RWD) o responsive design es un enfoque del diseño web que pretende que las páginas web se visualicen bien en una variedad de dispositivos y tamaños de ventana o pantalla, desde el mínimo al máximo, para garantizar la usabilidad y la satisfacción[1][2][3][4].

Un diseño responsivo adapta el diseño de la página web al entorno de visualización[1] utilizando técnicas como las cuadrículas basadas en proporciones fluidas,[5][6] las imágenes flexibles,[7][8][9] y las consultas de medios de CSS3,[3][10][11] una extensión de la regla @media,[12] de las siguientes maneras:

Aunque muchos editores han implementado diseños responsivos, uno de los retos para la adopción de RWD era que algunos banners publicitarios y vídeos no eran fluidos[29]. Sin embargo, la publicidad de búsqueda y la publicidad gráfica (de banners) llegaron a admitir la segmentación por plataformas de dispositivos específicos y diferentes formatos de tamaño de anuncios para ordenadores de sobremesa, smartphones y dispositivos móviles básicos. Se han utilizado diferentes URLs de páginas de aterrizaje para diferentes plataformas,[30] o se ha utilizado Ajax para mostrar diferentes variantes de anuncios en una página.[31][23][32] Las tablas CSS permitían diseños híbridos fijos y fluidos.[33]

Construir un sitio web sensible con html & css tutorial

Añadirás varios proyectos a tu portafolio para demostrar tu habilidad y crecimiento a lo largo de esta Especialización. Creará páginas web utilizando elementos básicos para controlar el diseño y el estilo, utilizará los principios del diseño web responsivo para llevar un sitio desde el wireframe hasta el sitio web, implementará características de seguridad y creará experiencias colaborativas multiusuario. Al igual que cualquier desarrollador web profesional de pila completa, usted construirá la accesibilidad y la usabilidad en sus sitios web de respuesta.Preguntas frecuentes¿Más preguntas? Visite el Centro de Ayuda al Estudiante.

Campamento de código gratuito

En los primeros tiempos del diseño web, las páginas se construían para un tamaño de pantalla concreto. Si el usuario tenía una pantalla más grande o más pequeña de lo que el diseñador esperaba, los resultados iban desde barras de desplazamiento no deseadas hasta longitudes de línea demasiado largas y un mal uso del espacio. A medida que se fueron ampliando los tamaños de pantalla, apareció el concepto de diseño web responsivo (RWD), un conjunto de prácticas que permite que las páginas web modifiquen su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma de diseñar para una web multidispositivo, y en este artículo te ayudaremos a entender las principales técnicas que debes conocer para dominarla.

Estos dos enfoques solían dar como resultado un sitio web que se veía mejor en la pantalla de la persona que lo diseñaba. El sitio líquido daba lugar a un diseño aplastado en las pantallas más pequeñas (como se ve a continuación) y a longitudes de línea ilegibles en las más grandes.

Cuando la web móvil empezó a ser una realidad con los primeros teléfonos móviles, las empresas que deseaban adoptar el móvil solían crear una versión especial de su sitio para móviles, con una URL diferente (a menudo algo como m.ejemplo.com, o ejemplo.mobi). Esto significaba que había que desarrollar y mantener actualizadas dos versiones distintas del sitio.

Ir arriba