Primer video de la serie “Desarrollo de un sitio web paso a paso con HTML5 y CSS3”

Partimos con los bocetos de estructura y de diseño, organizamos el material en la carpeta del sitio y posteriormente creamos el HTML5 y la CSS3 de la estructura general.

La importancia de estudiar HTML5 y CSS3

Gran parte de las empresas españolas utilizan lenguajes de programación para desarrollar su actividad. Y esto es algo que va en aumento. Es por ello que el conocimiento y dominio de estos lenguajes influyen en gran manera a la hora de acceder al mundo laboral.

Existen multitud de lenguajes de programación, cada uno de ellos tiene su finalidad. Aunque HTML y CSS  no son exactamente lenguajes de programación, son los encargados de desarrollar páginas web, entre otras cosas. Por ello, es muy importante que los conozcas si tu intención es trabajar en un sector relacionado con Internet.

Qué puedo hacer con HTML5 y CSS3

Como he comentado, su uso más conocido y generalizado es la creación, edición y actualización de sitios web. Pero, incluso si utilizas editores web como WordPress, el conocimiento de HTML y CSS te permite añadir contenidos y realizar cambios. Además, podrás limpiar código basura que generan los editores para que tus páginas carguen más rápido y se posicionen mejor.

También se utiliza HTML y CSS para generar parte del contenido del desarrollo de aplicaciones informáticas.

Puedes diseñar y editar ebooks. El programa de maquetación profesional Indesign permite crear libros electrónicos y genera código HTML y CSS que luego podrás editar, si tienes conocimientos de estos lenguajes.

Otro de sus usos puede ser el diseño de emails. La mayoría de editores de mailing utilizados para marketing online permiten editar el código HTML y CSS.

Como puedes ver, sus usos son muchos, así que, una buena formación de estos lenguajes, va a reforzar tu cv y te ayudará a encontrar el hueco que estás buscando en el mercado laboral.

Por supuesto, estudiar con profesores cualificados es muy importante. ¿Te plantearías estudiar Inglés por tu cuenta? No, ¿verdad?. Pues esto es lo mismo. Una buena base de aprendizaje te permitirá seguir formándote en estas materias a medida que estos lenguajes evolucionen. Piensa que el mundo Web cambia y lo hace muy rápido, por lo que tendrás que ir actualizando tus conocimientos. La buena noticia es que tanto HTML5 como CSS3 son lenguajes muy estables, por lo que seguirán siendo esenciales.

Para quien es útil aprender estos lenguajes

HTML5 y CSS3 no sólo es útil para los diseñadores. Editores, comunicadores, publicistas, informáticos, es decir, todo aquel que, de una manera u otra, se relacione con el mundo de Internet, podrá sacar partido de ellos.

Qué son exactamente HTML5 y CSS3

HTML5 es la última versión del lenguaje HTML. Este nos permite insertar textos, imágenes, videos y sonidos como contenido. Al tratarse de un lenguaje, la base del aprendizaje es el dominio de la sintaxis y de la semántica y de la correcta aplicación de las mismas.

CSS3 es la última versión del lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML5, es la mejor forma de separar los contenidos de su presentación y es imprescindible para crear páginas Web complejas.

Para que veas todo esto más claro, he preparado una serie de videos en los que iré desarrollando paso a paso un sitio web desde cero

En cada video plantearé una parte del proyecto, sin entrar en explicaciones teóricas extensas. Únicamente pretendo que, esta serie de videos, sea una muestra de lo que puedes conseguir con nuestro curso de Desarrollo web.

Si estás interesado en conocer en profundidad estos lenguajes, visita nuestros cursos de Diseño y Desarrollo Web

Video 1. Primeros pasos para desarrollar un sitio web con html5 y css3

En el primer video de la serie empiezo el proyecto con los bocetos de estructura y de diseño:

• De los bocetos de estructura nos interesan los tamaños de las cajas que componen cada zona de página y la disposición de las mismas.
• De los bocetos de diseño nos interesa la información de colores y tipografías.

Continuaré organizando el material en la carpeta del sitio y posteriormente pasaré a crear el HTML5 y la CSS3 de la estructura general.

Como he comentado en el video, los bocetos te pueden ayudar a desarrollar el sitio de manera más rápida. Además, es una forma más profesional y efectiva de presentar tus ideas a otras personas. Recuerda, “una imagen vale más que mil palabras”.

Programas de diseño como Illustrator, Photoshop e Indesign te pueden ayudar en esta tarea.

Si estás interesado, visita nuestros cursos de Diseño y Desarrollo Web

? Tutorial Primeros pasos creación web con Html5 y Css3 Dreamweaver Ilustrator CIPSA Lara Acebes

A continuación, te avanzo el contenido de los próximos videos de la serie:

Video/artículo 2

• Desarrollaré los contenidos de las zonas comunes, junto con los estilos de los mismos, para posteriormente generar una plantilla que luego nos va a facilitar la creación de las páginas del sitio.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Crear la Plantilla de Dreamweaver para el sitio web (2/8)

Video/artículo 3

• Contenido y estilos de la index o página de inicio. Iré mostrando como estructurar los contenidos con sistema flex y grid en función de lo que sea más apropiado en cada caso. Siempre pensando en los cambios de disposición de los elementos en la vista móvil.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Sistemas de estructura CSS – Flex y Grid (3/8)

Video/artículo 4

• Desarrollaré las páginas Productos y Marcas. Estas páginas comparten la estructura de la index, por lo que sólo necesitaré añadir estilos estéticos al contenido propio de cada página.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Optimizar la CSS (4/8)

Video/artículo 5

• En este video plantearé otra estructura grid para la página Nosotros.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: El contenido por delante del diseño. (5/8)

Video/artículo 6

• En la página Contacto nuevamente desarrollaré una estructura grid.
• Enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Formularios web. (6/8)

Video/artículo 7

• En este video me centraré en añadir efectos CSS3 de transición y animación.

Video/artículo 8

• En el último video generaré el media query para la adaptación al dispositivo móvil.