Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Diseños HTML

Los diseños avanzados de sitios web se pueden lograr utilizando una combinación de HTML y CSS. Aquí hay una visión general.
La mayoría de los sitios web y blogs modernos consisten en un encabezado, pie de página, barra de navegación, quizás otra barra lateral, y no olvidemos, el área de contenido principal. Algo como esto:
Ejemplo de diseño de un sitio web
Ejemplo de las secciones más comunes de un diseño de sitio web.
HTML tiene una serie de elementos que se pueden usar para definir cada una de estas áreas. Estos incluyen los mainheaderfooternavasidearticleelementos. Además, el divelemento es un elemento de nivel de bloque genérico que se puede usar para agrupar elementos HTML.
Así que el diseño anterior se puede marcar de la siguiente manera:
< encabezado > Encabezado </ encabezado >
< artículo > Artículo </ artículo >
< nav > Nav </ nav >
< div > Anuncios </ div >
< pie de página > Pie de página </ pie de página >
Pero esos elementos simplemente proporcionan la estructura del documento. No se ocupan de la presentación. Así que vamos a terminar con esto:
<! DOCTYPE html>
< título > Mi ejemplo </ título >
< encabezado > Encabezado </ encabezado >
< artículo > Artículo </ artículo >
< nav > Nav </ nav >
< div > Anuncios </ div >
< pie de página > Pie de página </ pie de página >
Como se mencionó anteriormente en este tutorial, CSS es lo que necesitamos para definir la presentación de nuestros documentos HTML.

CSS Grid Layout

El diseño de la cuadrícula CSS fue diseñado específicamente para diseños de sitios web. Funciona en un sistema de cuadrícula bidimensional, donde se especifica qué elementos van a qué partes de la cuadrícula.
Así que podríamos tomar el código HTML anterior y luego usar la cuadrícula CSS para posicionar cada elemento:
<! DOCTYPE html>
< título > Mi ejemplo </ título >
< estilo >
cuerpo {
  pantalla : rejilla ;
  cuadrícula-plantillas-áreas :
    encabezado encabezado encabezado
    "anuncios de artículo de navegación"
    "pie de página pie de página" ;
  cuadrícula-plantilla-filas : 60px  1fr  60px ;
  rejilla-plantilla-columnas : 20%  1fr  15% ;
  rejilla : 10px ;
  altura : 100vh ;
  margen : 0 ;
  }
# pageHeader {
  area de cuadrícula : encabezado ;
}
#pageFooter {
  área de cuadrícula : pie de página ;
}
#mainArticle {
  cuadrícula-área : artículo ;      
  }
#mainNav {
  área de cuadrícula : nav ;
  }
Si su navegador admite el diseño de cuadrícula, ese ejemplo debería verse como el ejemplo en la parte superior de esta página. Aquí está de nuevo:
Ejemplo de diseño de un sitio web
En este ejemplo, usamos la grid-template-areaspropiedad con una especie de sintaxis de "arte ASCII" para especificar a dónde va cada elemento. Ese es el bit que se ve así:
cuadrícula-plantillas-áreas :
  encabezado encabezado encabezado
  "anuncios de artículo de navegación"
  "pie de página pie de página" ;
Luego vinculamos cada elemento a cada una de esas áreas de la cuadrícula utilizando la grid-areapropiedad.
# pageHeader {
  area de cuadrícula : encabezado ;
}
#pageFooter {
  área de cuadrícula : pie de página ;
}
#mainArticle {
  cuadrícula-área : artículo ;      
  }
#mainNav {
  área de cuadrícula : nav ;
  }
#siteAds {
  área de la cuadrícula : anuncios ;
  }
El resto del código se ocupa del tamaño, las canaletas, la estética general, etc.
En este caso, en realidad cambiamos ligeramente el marcado agregando ID a los elementos. No necesitamos hacer esto, pero es una buena práctica. Al hacer esto, nos aseguramos de que las áreas de la cuadrícula estén ocupadas solo por los elementos con la ID correcta. Si no hiciéramos esto, podríamos encontrarnos con problemas importantes si alguna vez agregáramos otro elemento del mismo nombre (por ejemplo, otro headerelemento) a la página.

Diseños responsivos

Los diseños receptivos se ajustan según el tamaño de la pantalla que se utiliza para ver el sitio web. Esto significa que su sitio web probablemente se verá diferente en un teléfono móvil frente a una tableta frente a una computadora de escritorio. El sitio web se ajusta para proporcionar el mejor diseño para el tamaño de la pantalla.
Podemos modificar el ejemplo anterior para que use un diseño diferente en dispositivos pequeños como los teléfonos móviles.
Para hacer esto, agregamos una consulta de medios para probar el tamaño de la pantalla. Si es más pequeño que un cierto ancho, les mostramos el nuevo diseño.
<! DOCTYPE html>
< título > Mi ejemplo </ título >
< estilo >
cuerpo {
  pantalla : rejilla ;
  cuadrícula-plantillas-áreas :
    encabezado encabezado encabezado
    "anuncios de artículo de navegación"
    "pie de página pie de página" ;
  cuadrícula-plantilla-filas : 60px  1fr  60px ;
  rejilla-plantilla-columnas : 20%  1fr  15% ;
  rejilla : 10px ;
  altura : 100vh ;
  margen : 0 ;
  }
/ * Apilar el diseño en dispositivos pequeños / viewports. * /
@media  all  y ( ancho máximo : 575px ) {
  cuerpo {
    cuadrícula-plantillas-áreas :
      "encabezamiento"
      "artículo"
      "anuncios"
      "nav"
      "pie de página" ;
    cuadrícula-filas-plantilla : 80px  1fr  70px  1fr  70px ;  
    rejilla-plantilla-columnas : 1fr ;
El ejemplo anterior tendrá todos los elementos apilados unos sobre otros (a menos que esté viendo este ejemplo en una pantalla muy amplia). Apilar los elementos como este es ideal para dispositivos pequeños como teléfonos móviles. Haga clic en elAvance para verlo en una nueva ventana (que debería mostrar el diseño original, a menos que ya lo esté viendo en un dispositivo pequeño).
Aquí está la consulta de medios que usamos para ese ejemplo:
@media  all  y ( ancho máximo : 575px ) {
  cuerpo {
    cuadrícula-plantillas-áreas :
      "encabezamiento"
      "artículo"
      "anuncios"
      "nav"
      "pie de página" ;
    cuadrícula-filas-plantilla : 80px  1fr  70px  1fr  70px ;  
    rejilla-plantilla-columnas : 1fr ;
 }
}
Simplemente cambiamos el arte ASCII para reflejar nuestro nuevo diseño, que en este caso, simplemente apila cada elemento uno encima del otro (pero en el orden que especificamos). También cambiamos los valores de las filas y columnas según sea necesario.
Consulte el tutorial de cuadrícula si está interesado en aprender más sobre cómo trabajar con la cuadrícula.

Navegadores sin red

El diseño de cuadrícula es todavía muy nuevo, y como tal, el soporte del navegador es limitado. La buena noticia es que la mayoría de los principales navegadores comenzaron a admitir grid desde marzo de 2017, por lo que las ruedas están definitivamente en movimiento. Pero todavía hay muchos usuarios web que utilizan navegadores que no son de grilla.
Por lo tanto, hasta que grid tenga un soporte generalizado del navegador, para que sea compatible con navegadores que no sean de la red, deberá utilizar otros métodos para los diseños de su sitio web, como los flotadores de CSS (con la floatpropiedad) y / o flexbox (con flexy propiedades relacionadas).
Si esto te parece un poco abrumador, ¡no desesperes! Puede descargar cualquiera de estas plantillas HTML para su propio uso. Puedes abrir los archivos y ver cómo se construye cada uno. Y puedes modificarlos como desees.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas