Tutorial HTML5 y CSS3

Video tutorial de maquetación HTML5 y CSS3 parte 1.

Comenzamos una nueva serie en el Blog, después de pedidos iniciamos con los video tutoriales.

Aqui el primero: Maquetación en HTML5, CSS3 y Jquery.



En esta nueva serie de videotutoriales crearemos un Website completo en HTML5, CSS3, JQuery, Javascript.
En este video hablamos sobre las etiquetas semánticas de HTML5 y como darles estilos con CSS3.
Publico aqui el esqueleto básico de maquetado de una web con HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
    <header>
    </header>
    <nav>
    </nav>
    <section id="contenedor">
        <section id="contenido">
        </section>
        <aside>
        </aside>
    </section>
    <footer>
    </footer>
</body>
</html>
Este es un esqueleto muy básico de una web que lo puedes usar como un Snipet en todos tus trabajos de desarrollo web para facilitarte la vida.
Durante los tutoriales iremos implementando el website con la inclusion de nuevas etiquetas HTML5, nuevos elementos, clases y etc.
En este primer video creamos una pagina web en HTML5 con algunos estilos en CSS3, en el próximo ya iniciaremos con las media queries y algunas animaciones y efectos con CSS3 y Jquery.
Espero les sea útil, y cualquier duda o comentario puedes usar la seccion de comentarios y intentaré solucionar las dudas.

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Etiquetas: generalvideos

Recomendamos

Relacionado

general desarrollo web html5 ...

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

general html5 programación ...

Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten ...

general curso html5 ...

Estás interesado en aprender a desarrollar webs móviles en HTML5 CSS3, Javascript, Jquery mobile y Frameworks? Hola, estoy preparando un curso por email y skype de desarrollo de webs moviles con HTML5.Que les parece la idea? Interesados, participarán por 5 cursos totalmente gratuitos. Curso por mail, resolución de dudas por skype (uno a uno) clases semanales. Sorteo día 30/04/2015. Início: 02/05/2 ...

general

Este es un pequeño y rápido tutorial de como hacer un menú para móviles con animacion con HTML5 CSS3 y JQuery. Conforme algunos pedidos de como estamos desarrollando nuestra web y el menú de navegación en móviles aqui les dejo una rápida explicación de como lo hice. 1. Primero el creamos el menú en HTML:

general

Continuamos con los tutoriales en video. En este segundo video crearemos un Menu de navegacion adaptable a tablets y móviles. Hoy aprenderemos a crear un menu de navegacion con HTML5, CSS3; JQuery adaptable a los diferentes tamaños de pantalla (smartphones, tablets, desktops) utilizando mediqueries. Este tutorial es para darles una orientación en el uso de estas tecnologia, depende de ustedes crea ...

general desarrollo web html5 ...

El nuevo <! DOCTYPE> Esto es lo primero que encontramos en un documento web. Te reto a que me nombre la cabeza el tipo de documento de XHTML 1.0 Strict o HTML 4.01. No es fácil ¿eh?. El <! DOCTYPE> para la version HTML 4.01: <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//ES" » "http://www.w3.org/TR/html4/strict.dtd"> Aqui el <! DOCTYPE> para la version ...

general html5 tutoriales ...

Bueno antes que todo estan las preguntas basicas, ¿que es?, ¿para que es?, ¿En que me beneficio?, y no pueden hacer falta en este mundo del diseño y la estructura web y especificamente en este tema de HTML5¿Que es html 5? ? Simplemente Como su nombre indica, HTML 5 es el sucesor de HTML4. Este trabajo o proyecto de HTML5 se inicio a finales de 2003 con un grupo de trabajo que se propuso a hacer un ...

general

Creamos un simple Slider con HTML5 y CSS3 sin uso de Javascript o jQuery. Seguimos con la serie de video tutoriales de maquetacion con HTML5 y CSS3. Hoy realizaremos un simple Slider usando apenas HTML5 y CSS3. Les comento que las imagenes utilizadas son de Punta del Este, Uruguay, espectacular ciudad en la cual vivo y trabajo :). Aqui damos inicio al uso de @keyframes para hacer la animacion. Es ...

general desarrollo web html5 ...

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...

general

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...