comunidades

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í.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

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 ...

Mobile marketing trends 2015

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 ...

Dia #3 – Estructura básica de 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 ...

Día #7 Hablemos de los Microdatos en Html5 (Microdata)

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 ...

Curso de HTML5 y CSS3 para web móvil

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 html5 tutoriales ...

INTRODUCCIÓN A HTML5

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

HTML5 y CSS3 menú responsivo

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

Tutorial de Maquetación web con HTML5, CSS3 y JQuery

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 ...

Dia #2 El nuevo DOCTYPE de 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

Curso Blogger: crea tus contenedores

En la anterior entrega aprendimos a crear nuestra primera plantilla. La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger. Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran ...

general desarrollo web html5 ...

Día #9 Formularios en HTML5. Nuevos elementos y Nuevos atributos.

Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios. En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manej ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

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 ...