Cómo crear un sitio web en minutos usando HTML5 Boilerplate

Cuando esté creando un nuevo sitio web, en estos días querrá que sea compatible con HTML5. Pero tampoco querrás pasar un tiempo innecesario aprendiendo las complejidades de HTML5 desde cero, ¿verdad??

Afortunadamente, la plantilla de HTML5 Boilerplate puede ayudar. Es una plantilla de interfaz de usuario simple que puede utilizar para crear un sitio web HTML5 en solo unos minutos. Pero también es lo suficientemente potente como para usarlo como la base de un sitio complejo con todas las funciones..

Este tutorial de HTML5 Boilerplate repasará lo que viene en la plantilla, los conceptos básicos que necesita saber sobre cómo usarla y algunos recursos para aprender más. También te mostraré cómo usé la plantilla para crear un sitio muy básico con solo unas pocas líneas de HTML.

La plantilla HTML5

Cuando descarga la plantilla de HTML5 Boilerplate, obtiene una serie de carpetas y archivos. Aquí están los contenidos del archivo ZIP:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- vendedor --- jquery.min.js --- modernizr.min.js .editorconfig .htaccess 404.html browserconfig.xml favicon.ico humans.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

No revisaremos todos los elementos de la plantilla aquí, solo lo básico. Sin embargo, para asegurarnos de tener los recursos para usar todos los archivos, comenzaremos con los documentos de ayuda..

Documentación de ayuda de HTML5

Boilerplate tiene una colección de documentos de ayuda alojados en GitHub. Esta es una gran ayuda cuando tiene preguntas técnicas o se pregunta por qué algo fue diseñado de la manera en que fue.

Casi todo en la documentación también está incluido en la carpeta de documentos de la plantilla. Verá una serie de archivos de Markdown (.md) que son una gran ayuda para descubrir cómo construir su sitio Boilerplate.

Si desea leer todo, comience con TOC.md y siga los enlaces desde allí a otros archivos de Markdown. Si está buscando ayuda en un problema específico, busque el archivo que parezca que podría estar relacionado; use.md es un buen lugar para comenzar.

Comenzando con HTML5 Boilerplate's CSS

La plantilla HTML5 Boilerplate viene con dos archivos CSS: main.css y normalize.css.

El segundo archivo, normalize.css, ayuda a los diferentes navegadores a representar elementos de manera consistente. Para obtener más información sobre cómo funciona, consulte el proyecto normalize.css en GitHub.

Mientras tanto, main.css es donde colocará cualquier código que necesite para formatear su sitio con CSS 10 Ejemplos de código CSS simple que puede aprender en 10 minutos 10 Ejemplos de código CSS simple que puede aprender en 10 minutos Revisaremos cómo crear una hoja de estilo en línea para que puedas practicar tus habilidades de CSS. Luego pasaremos a 10 ejemplos básicos de CSS. A partir de ahí, tu imaginación es el límite! Lee mas . El CSS estándar incluido con la plantilla es el resultado de una investigación realizada por desarrolladores y la comunidad HTML5 Boilerplate. Es legible y se muestra muy bien en diferentes navegadores.

Si desea agregar su propio CSS, puede agregarlo a la sección Estilos personalizados del autor. Agregaré un poco de estilo de enlace para nuestra página de ejemplo:

También hay una serie de clases de ayuda útiles incluidas en la base CSS. Algunos de ellos ocultan elementos de navegadores estándar y lectores de pantalla (o alguna combinación).

También en main.css encontrará soporte para un diseño receptivo y configuraciones de impresión útiles.

Todos estos elementos están claramente explicados por los comentarios en el CSS:

En general, puedes comenzar con el CSS base..

Agregando su propio HTML a la plantilla

Boilerplate incluye dos archivos HTML: 404.html e index.html.

La página de índice es donde creará su página de inicio (o su única página, si va a buscar un solo sitio web de solo una página: 3 razones por las que puede funcionar para su idea Solo un sitio web de una sola página: 3 Razones por las que puede funcionar para su idea Leer más).

Si abre la página de índice en un navegador, verá una sola línea de texto. Pero mirar en el HTML revela mucho más escondido en el código. Lo único que realmente debe preocuparse por cambiar es el código de Google Analytics. Su guía de Google Analytics. Su guía de Google Analytics. ¿O cuál de tus páginas es la más popular? Leer más (encontrar el texto “UA-XXXXX-Y” y reemplazarlo con su propio código de seguimiento).

El resto del HTML en la página de índice incluye información para aplicaciones web, notificaciones para navegadores antiguos y JavaScripts útiles. Cuando estés empezando, no deberías tener que meterte con nada de esto..

Sin embargo, tenerlos ya rellenados previamente es una buena manera de asegurarse de que su sitio esté preparado para aprovechar al máximo HTML5.

Para crear su página, inserte su HTML entre las Etiquetas en el archivo. Aquí hay algo de información básica que agregaré sobre mí:

¿Quieres crear más páginas? Cree copias de este archivo y cámbielas para que no tenga que copiar y pegar todo el HTML. Luego agrega tu contenido.

Si desea personalizar su página 404, simplemente modifique el archivo HTML. ¿No estás seguro de qué poner en tu página 404? Vea estos excelentes ejemplos de diseño de la página 404 Cómo hacer una gran página de error 404 y 10 ejemplos Cómo hacer una gran página de error 404 y 10 ejemplos Una página de error 404 diseñada inteligentemente puede ser la diferencia entre un sitio web aburrido y un sitio web memorable. Lee mas .

Añadiendo un Favicon (y otros iconos)

¿Quieres reemplazar tu favicon? Entonces, favicon.ico es el archivo que necesitarás reemplazar..

Si aún no tienes uno, deberás crear uno. Puede utilizar un generador de favicon en línea o diseñar el suyo propio. Solo asegúrese de que tenga 16 x 16 píxeles y tenga el tipo de archivo .ico.

Es una buena idea pensar un poco en tu favicon. Usa estos famosos favicons Tus íconos favoritos: 14 Favicons que sobresalen de la multitud Tus íconos favoritos: 14 Favicons que sobresalen de la multitud Una vez que comienzas a notar los favicons, te das cuenta de cuánto difieren. La mayoría son aburridos, predecibles y olvidables al instante. Pero algunos son lo suficientemente buenos como para destacar entre la multitud. Lea más para guiar su lluvia de ideas. Asegúrese de que cuando agregue el nuevo favicon se llame favicon.ico.

Puede observar que hay otras tres imágenes en el directorio raíz de su sitio: icon.png, tile.png y tile-wide.png. Para que son?

• Se usa icon.png para los iconos táctiles de Apple. Si crea una aplicación web, este icono se utilizará cuando un usuario de iPhone o iPad agregue la aplicación a su pantalla de inicio.
• tile.png y tile-wide.png son para Windows ' “alfiler” Funcionalidad, y se mostrará en Windows 10..

Es una buena idea proporcionar iconos para todos estos casos, pero si no está creando una aplicación web, puede ser una prioridad más baja..

Añadiendo más funcionalidad

Una vez que haya agregado su HTML y un favicon (así como cualquier CSS que desee incluir), su sitio está listo para ser publicado. Así de fácil es usar HTML5 Boilerplate. Sube a tu servidor, y listo.!

Así es como se ve nuestra página:

Como puede ver, solo unas pocas líneas de texto han creado un sitio web completamente funcional (aunque un poco soso). No es mucho, pero solo tardó unos minutos. Y es altamente extensible con HTML5. Ese es el poder de la plantilla de Boilerplate..

Pero hay mucho más que puedes hacer con la plantilla de Boilerplate si quieres. Si está buscando algo específico, es muy probable que lo encuentre en la documentación de ayuda..

Si no está seguro de lo que puede hacer con HTML5, pero le gustaría descubrirlo, hay muchos tutoriales de diseño web por ahí ¿Necesita un tutorial de diseño de sitio web? Utilice estos 10 recursos impresionantes ¿Necesita un tutorial de diseño de sitios web? Utilice estos 10 recursos asombrosos El diseño web es una gran habilidad, ya que le permite crear su propio sitio web y puede ser un gran camino hacia una nueva carrera. Aquí es cómo aprender lo básico. Leer más para ayudarte.

Explorar más sobre: ​​Tutoriales de codificación, HTML5.