Codificación de una plantilla de sitio web de una página CSS3 y HTML5

El desarrollo web es un área en la que debe mantenerse al día con las últimas tecnologías y técnicas, para estar en la cima de su juego. Y no es de extrañar, esta es un área que cambia a un ritmo asombroso. Lo que es el estándar ahora quedará obsoleto en solo un par de años.

Pero los cambios no vienen de la nada. Los primeros usuarios ya están usando lo que vamos a usar día a día dentro de unos años. Una de estas tecnologías es HTML5 - la nueva versión del lenguaje fundamental de la web.

Hoy estamos haciendo un HTML5 plantilla web, usando algunas de las nuevas características que trae CSS3 y jQuery, con el scrollTo enchufar. Dado que HTML5 aún es un trabajo en progreso, puede descargar opcionalmente una versión XHTML. de la plantilla aquí.

Paso 1 - El Diseño

Cada proceso de diseño comienza con una idea inicial sobre la que luego se construye. En esta etapa, los diseñadores suelen usar programas como Photoshop para trabajar en los detalles y ver cómo encaja todo.

Después de esto, el diseño se codifica a mano con HTML y CSS yendo de la mano, pasando del diseño del fondo, los colores y las fuentes, al trabajo detallado en la sección de contenido.

Paso 2 - HTML

Es un buen momento para tener en cuenta que HTML5 es todavía un trabajo en progreso. Lo seguirá siendo probablemente hasta alrededor de 2022 (Hablo absolutamente en serio sobre esto). Sin embargo, algunas partes del estándar están completas y se pueden usar hoy .

En este tutorial, estamos usando algunas de las etiquetas introducidas con esta nueva versión de HTML:

  • encabezado - envuelve el encabezado de su página;
  • pie de página - ajusta el pie de página;
  • sección - agrupa el contenido en secciones (por ejemplo, área principal, barra lateral, etc.);
  • artículo - separa los artículos individuales del resto de la página;
  • navegación - contiene su menú de navegación;
  • figura - generalmente contiene una imagen utilizada como ilustración para su artículo.

Estos se usan exactamente como usaría divs normales. Con la diferencia de que estas etiquetas organizan tu página semánticamente. En otras palabras, puede presentar su contenido de tal manera que el tema de su página pueda determinarse más fácilmente. Como resultado, los servicios, como los motores de búsqueda, le traerán visitantes más específicos y, por lo tanto, aumentarán sus ingresos (y los de ellos en realidad).

Sin embargo, hay algunas implicaciones en el uso de HTML5 hoy. Uno de los más notables es la familia de navegadores IE, que no admite estas etiquetas (aunque se puede arreglar con un simple archivo de inclusión de JavaScript). Es por eso que debe basar su decisión de cambiar a HTML5 en la audiencia de su sitio. Y solo con este propósito, también estamos lanzando una versión XHTML pura de esta plantilla.

template.html - Sección principal

<!DOCTYPE html> <!-- The new doctype -->

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>

    <link rel="stylesheet" type="text/css" href="styles.css" />

    <!-- Internet Explorer HTML5 enabling script: -->

    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">

            .clear {
                zoom: 1;
                display: block;
            }

        </style>

    <![endif]-->

</head>

Puede notar el nuevo en la línea uno, que le dice al navegador que la página se creó con el estándar HTML5. También es mucho más corto y más fácil de recordar que los tipos de documentos más antiguos.

Después de especificar la codificación del documento y el título, pasamos a incluir un archivo JS especial que permitirá que Internet Explorer (cualquier versión) represente correctamente las etiquetas HTML5. Nuevamente, esto significa que si un visitante está usando IE y tiene JavaScript deshabilitado , la página va a mostrar todo desordenado . Por eso, dependiendo de tu audiencia, deberías considerar la versión XHTML normal de esta plantilla, que funciona en cualquier navegador. y se publica gratis para todos nuestros lectores aquí.

template.html - Sección del cuerpo

<body>

    <section id="page"> <!-- Defining the #page section with the section tag -->

    <header> <!-- Defining the header section of the page with the appropriate tag -->

        <h1>Your Logo</h1>

        <h3>and a fancy slogan</h3>

        <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->

            <ul>

                <li><a href="#article1">Photoshoot</a></li>
                <li><a href="#article2">Sweet Tabs</a></li>
                <li><a href="#article3">Navigation Menu</a></li>

            </ul>

        </nav>

    </header>

Aquí usamos la nueva sección etiquetas, que dividen su página en secciones semánticas separadas. Más exterior es la sección #page que se establece en un ancho de 960px en la hoja de estilo (un ancho bastante estándar teniendo en cuenta las pantallas de computadora más antiguas). Después de esto viene la etiqueta de encabezado y la etiqueta de navegación.

Observe el href atributos de los enlaces - la parte después del símbolo hash # corresponde al ID del artículo queremos desplazarnos.

plantilla.html - Artículo

    <!-- Article 1 start -->

    <div class="line"></div>  <!-- Dividing line -->

    <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->

        <h2>Photoshoot Effect</h2>

        <div class="line"></div>

        <div class="articleBody clear">

            <figure> <!-- The figure tag marks data (usually an image) that is part of the article -->

                <a href="https://tutorialzine.com/2010/02/photo-shoot-css-jquery/">
                    <img src="https://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>

            </figure>

            <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p>

        </div>

    </article>

    <!-- Article 1 end -->

El marcado anterior se comparte entre todos los artículos. Primero está la línea divisoria (la mejor solución semánticamente sería un


línea, que en HTML5 tiene la función añadida de un elemento divisorio lógico, pero lamentablemente es imposible diseñarla de forma cruzada, por lo que nos quedaremos con un DIV ). Después de esto tenemos el nuevo artículo etiqueta, con una identificación única , que utiliza la navegación para desplazarse por la página .

Dentro tenemos el título del artículo, dos párrafos y la nueva figura etiqueta, que marca el uso de imágenes en el artículo.

template.html - Pie de página

        <footer> <!-- Marking the footer section -->

            <div class="line"></div>

            <p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->
            <a href="#" class="up">Go UP</a>
            <a href="https://tutorialzine.com/" class="by">Template by Tutorialzine</a>

        </footer>

    </section> <!-- Closing the #page section -->

    <!-- JavaScript Includes -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
    <script src="script.js"></script>

    </body>

</html>

Por último, tenemos el pie de página etiqueta, que hace exactamente lo que esperas que haga. En la parte inferior de la página están el resto de JavaScript incluidos, que agregan la biblioteca jQuery y el desplazarse a plug-in, que vamos a utilizar en los próximos pasos.

Paso 3 - CSS

Como estamos usando HTML5, tenemos que tomar algunas medidas adicionales con el estilo. Las etiquetas que introduce esta nueva versión de HTML aún no cuentan con un estilo predeterminado. Sin embargo, esto se soluciona fácilmente con un par de líneas de código CSS y la página funciona y se ve como se supone que debe hacerlo:

estilos.css - Parte 1

header,footer,
article,section,
hgroup,nav,
figure{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}

article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}

footer .line{
    margin:2em 0;
}

nav{
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
    padding:0 5px;
    position:absolute;
    right:0;
    top:4em;

    border:1px solid #FCFCFC;

    -moz-box-shadow:0 1px 1px #333333;
    -webkit-box-shadow:0 1px 1px #333333;
    box-shadow:0 1px 1px #333333;
}

nav ul li{
    display:inline;
}

nav ul li a,
nav ul li a:visited{
    color:#565656;
    display:block;
    float:left;
    font-size:1.25em;
    font-weight:bold;
    margin:5px 2px;
    padding:7px 10px 4px;
    text-shadow:0 1px 1px white;
    text-transform:uppercase;
}

nav ul li a:hover{
    text-decoration:none;
    background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

Básicamente necesitamos configurar la pantalla valor de las nuevas etiquetas a bloquear , como se puede ver en el primer par de líneas. Después de esto, podemos diseñarlos como lo haríamos con divs normales.

Diseñamos las líneas horizontales, los artículos y los botones de navegación, con estos últimos organizados como una lista desordenada dentro del nav etiqueta. En la parte inferior asignamos el border-radius propiedad para cuatro tipos diferentes de elementos de una vez, lo que ahorra mucho código.

estilos.css - Parte 2

/* Article styles: */

#page{
    width:960px;
    margin:0 auto;
    position:relative;
}

article{
    background-color:#213E4A;
    margin:3em 0;
    padding:20px;

    text-shadow:0 2px 0 black;
}

figure{
    border:3px solid #142830;
    float:right;
    height:300px;
    margin-left:15px;
    overflow:hidden;
    width:500px;
}

figure:hover{
    -moz-box-shadow:0 0 2px #4D7788;
    -webkit-box-shadow:0 0 2px #4D7788;
    box-shadow:0 0 2px #4D7788;
}

figure img{
    margin-left:-60px;
}

/* Footer styling: */

footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;
}

footer p{
    margin-bottom:-2.5em;
    position:relative;
}

footer a,footer a:visited{
    color:#cccccc;
    background-color:#213e4a;
    display:block;
    padding:2px 4px;
    z-index:100;
    position:relative;
}

footer a:hover{
    text-decoration:none;
    background-color:#142830;
}

footer a.by{
    float:left;

}

footer a.up{
    float:right;
}

En la segunda parte del código, aplicamos estilos más detallados a los elementos. Un ancho para la página sección, un pasador propiedad para la figura etiqueta y estilos para los enlaces dentro del pie de página. También hay algunos estilos que no están incluidos aquí, pero puedes verlos en styles.css .

Ahora continuemos con el siguiente paso.

Paso 4 - jQuery

Para mejorar la plantilla, crearemos un efecto de desplazamiento suave una vez que se haya hecho clic en un enlace de navegación, usando el botón scrollTo Complemento jQuery que incluimos en la página anterior. Para que funcione, solo necesitamos recorrer los enlaces en la barra de navegación (y el enlace ARRIBA en el pie de página) y asignar un evento onclick que activará el $.srollTo() función, que está definida por el complemento.

secuencia de comandos.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('nav a,footer a.up').click(function(e){

        // If a link has been clicked, scroll the page to the link's hash target:

        $.scrollTo( this.hash || 0, 1500);
        e.preventDefault();
    });

});

¡Con esto nuestra plantilla está completa!

Envolviéndolo

En este tutorial, aprovechamos las nuevas funciones semánticas proporcionadas por HTML5 para diseñar y codificar una plantilla web de una página. Puede usarlo de forma gratuita tanto personal como comercialmente, siempre que deje intacto el enlace de regreso.

Si le gusta este tutorial, asegúrese de consultar también nuestro flujo de Twitter, donde compartimos los últimos y mejores enlaces de diseño y desarrollo.