Clase 1 – Maquetación Básica con HTML & CSS

Saludos,

En la primera clase se habló de la importancia de separar dos grandes lenguajes el HTML y el CSS, el primero dijimos que se trataba de un lenguaje para estructurar y el segundo para dar estilo a la estructura. Son conceptos básicos que tenemos que tener en cuenta a la hora de programar y complementar con una apariencia gráfica (Interfaz de usuario) agradable.

 

 

En el primer código de ejemplo encontramos una estructura básica pero con estilo, ubicada en el sector “encabezado” del sitio que estamos diseñando. Se trata de 3 bloques (Etiquetas <div></div>) iguales que encierran: un encabezado (<h1>), un párrafo (<p>) y un hipervínculo (<a>).

De ahora en adelante vamos a tener en cuenta varios aspectos a la hora de “programar en web” el primero es que debemos dejar de ser tan programadores y untarnos de varias cositas que nos pueden ayudar en el proceso de Diseño y Desarrollo de cualquier tipo de software.

Como programadores (la gran mayoría) nos hemos dado cuenta que podemos hacer un software totalmente funcional pero patéticamente sin estilo gráfico, para nuestra fortuna (desgracia para algunos) existe una manera de trabajar diseño gráfico sin dejar de programar (CSS), pero para obtener resultados significativos debemos tener conceptos básicos de estructuras gráficas, en cristiano: saber donde colocar cada cosa, de que color, tipo de fuente, tamaño, interlineado y otros detallitos que hacen que nuestro HTML primitivo se convierta en una interfaz de usuario agradable.

En esta clase no voy a definir teóricamente cada uno de los elementos de cada lenguaje solo vamos a mencionar palabras claves que nos permitan ubicar las principales características:

 

HTML
Este lenguaje nos permite como muchos lo llaman “maquetar” nuestros sitios y desarrollos web, la palabra lo describe todo maquetar = hacer maqueta, entonces de esto concluímos que es el lenguaje que estructura nuestro sitio web.

(no voy a profundizar demasiado en este lenguaje porque además que hay millones de tutoriales se puede dominar en una semana).

CSS
Esta tecnología fue desarrollada para separar la estructura – maqueta (HTML) de la presentación (UI – User Interface) o interfáz de usuario, el css no solo nos permite dar estilo a nuestra estructura sino también implementar estándares de presentación para cualquier tipo de navegador.

Entonces es bueno que empecemos a leer algunos tutoriales básicos de CSS (Suponiendo que ya dominamos básicamente HTML) para entender un poco el primero de muchos ejercicios que vamos a trabajar.

Este ejercicio es un pequeño abrebocas de lo que verémos en el primer módulo básico de este semillero, para los que no pueden asistir los Martes de 10 a 12 a.m. este blog se estará actualizando constantemente con las noticias y cada uno de los contenidos de las clases con sus respectivos archivos para que los desnuden en casa y no se pierdan el hilo del asunto.

 

Archivos del ejercicio:
Ejercicio Clase 1

Datos Curiosos:
¿Qué lenguaje de programación provoca más insultos?

Fuente: mundogeek.net

Anuncios

4 comentarios en “Clase 1 – Maquetación Básica con HTML & CSS

  1. Hola en un mismo sitio es conveniente trabajar con más de una hoja de estilo? Entiendo que debe cambiar según el tamaño del sitio, pero saben más o menos que cantidad de elementos (class, id, compuesto) es aconsejable por hoja de estilo?
    Desde ya muchas gracias!

  2. Saludos Guou, esto es muy relativo, lo que yo personalmente recomiendo es que para cada página donde se utilicen estilos haya una hoja css, esto también depende mucho de la estructura del software, por ejemplo yo trabajo en un sitio que tiene 10 páginas y cada página tiene un css diferente, pero también tiene un css que es igual en todas las páginas, entonces lo qué hago es cargar el estilo que no difiere en todas las páginas y guardar el css propio de cada página en una hoja a parte.

    Espero que te sea de ayuda

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s