Hasta hace unos diez años atrás de lo único que teníamos que preocuparnos los desarrolladores de sitios web era de que, nuestra web funcionara sin problemas en internet explorer y firefox (o netscape, aunque eso se usó en años más anteriores, para el 2005 ya era poco relevante), de que estuviera instalado Macromedia Flash (se podía recurrir a JavaScript para detectarlo y si no estaba entonces ofrecer contenido alterno o proporcionar un medio para descargarlo) y de que no se cayera a cada rato nuestro servidor.
Pero hoy en día el panorama es otro. Adobe Flash ahora parece haber muerto y si no ha muerto es odiado por muchos "expertos en el tema", con la llegada de los celulares y demás dispositivos que se conectan a internet los diseños clásicos para web son totalmente incompatibles, por lo que terminamos haciendo dos diseños: uno para el navegador convencional y otro para ejecutarse en un celular o tableta. Claro, no todos queremos trabajar doble, por lo que hay algunos trucos que podemos usar para simplificar el trabajo, y así mostrar correctamente el contenido, tanto en la versión normal, como en la versión móvil.
Una forma de mostrar el contenido correctamente es simular el panel "Flow Layout" que existe en entornos como Java o VB.Net. Para ello podemos usar el siguiente código fuente que en parte se baja en una pregunta similar planteado en el portal Stack Overflow (https://stackoverflow.com/questions/6838888/flow-layout-behavior-using-plain-old-html).
<html>
<head>
<style type="text/css">
.flow ul
{
float: left;
}
.flow li
{
list-style: none;
}
</style>
</head>
<body>
<form>
<div class="flow"><ul><li><input type="button" value="botón 1"></li></ul></div>
<div class="flow"><ul><li><input type="button" value="botón 2"></li></ul></div>
<div class="flow"><ul><li><input type="button" value="botón 3"></li></ul></div>
<div class="flow"><ul><li><input type="button" value="botón 4"></li></ul></div>
</form>
</body>
</html>
Como pueden ver, este código muestra cuatro botones en pantalla, todos ellos en línea recta, pero, si se redimensiona el tamaño de la ventana (tamaño menor), los botones se reacomodan y así, si el espacio es poco o mucho los botones se muestran correctamente, permitiendo visualizar el contenido correctamente en un dispositivo tradicional (navegador de escritorio) o en un dispositivo móvil.
| Procedencia de las imágenes: |
|
File: Icono HTML URL: https://www.returngis.net/wp-content/uploads/2013/05/HTML-logo.jpg Licencia: Creative Commons |
¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.
Nuestras redes (
No hay comentarios. :
Publicar un comentario