@josedlujan. director de desarrollo m.t.i. josé dimas luján castillo ockhamti.com - @josedlujan...

@josedlujan

Director de Desarrollo

M.T.I. José Dimas Luján Castilloockhamti.com - @josedlujan

@josedlujan

OCKHAMMateria correspondiente al curso:http://www.ockhamti.com/cursos/htmldesdecero/material/

Encontraran las diapositivas agrupadas por día, también el material que descargamos y algunas instrucciones dependiendo de la actividad por semana.

Recuerden nuestro sitio es:

www.ockhamti.com

@josedlujan

Curso html desde cero, CSS y principios php.

@josedlujan

Desarrollo web desde cero

Día 1, En resumen:

•La web esta hecha en html

•Es un lenguaje de etiquetas no de programación

•Los exploradores interpretan las etiquetas.

•En la web necesitamos protocolos(http,ftp)

•La compatibilidad entre navegadores puede ser un gran problema

•Existen las etiquetas nativas.(p,h1,img,a,etc.)

•Podemos crear una pagina en cualquier editor de texto.

•Trabajaremos en la versión 4 de html.


@josedlujan

Estructura y Estilo

Dos cosas importantes en html, al realizar nuestra pagina debemos tener claro la estructura y el estilo.

La estructura quiere decir a como estará nuestro sitio armado, donde ira el logo, posiciones de los banner, secciones, contenedores.

El estilo es referente a como se va a ver, fuente, colores, tamaños, y otros atributos a la vista del sitio.

Ejemplo : veamos la pagina de yahoo..


@josedlujan

¿Se parece?

Estructura y Estilo


@josedlujan

Estructura y Estilo


@josedlujan

Veamos con el tamaño real, espero convencerlos.

Estructura y Estilo


@josedlujan

¿Me creen?

La figura básica son los cuadrados- rectángulos, aunque hay paginas en donde no parece aplicar ni un bendito cuadrado, si lo están aplicando, todo se trata de combinar lo visual y la estructura del documento, es decir del html.

¿Entonces todo los diseños que haga tiene que estar basado en los cuadrados?

No… todo se puede hacer con cuadrados, pero es trabajo del código no del diseño.

Estructura y Estilo


@josedlujan

Estructura y Estilo


@josedlujan

Estructura y Estilo

Analicemos con firebug….


@josedlujan

Estructura y Estilo

Debemos pensar en DIV y CLASS

Las paginas se hacen en su mayoría con div y class.

•DIV es referente a ocupar un espacio en la pagina web, como por ejemplo los cuadrados de los que hablamos.

•CLASS son clases, si ya haz programado tienes un poco del concepto, recuerda que html no es un lenguaje de programación, pero las clases son con la idea de reciclar código y tener un “tipo” de herencia..


@josedlujan

Estructura y Estilo

Hagamos nuestro primer div.

En nuestra pagina de html sin nada, vamos a crear un div que se va a llamar encabezado.Contendrá el encabezado de nuestro sitio.

Quedaría algo así.

<div id=“encabezado”> //Esto es una div con nombre encabezado</div> <!— Recuerden siempre que abro una etiqueta la cierro -- >

Así de sencillo…

Revisa como se ve en un explorador decente, Firefox y Chrome.


@josedlujan

Estructura y Estilo

Vamos a ponerle un color y tamaño al div para que sea mas evidente nuestro cuadrado.

<div id=“encabezado” style=“width:250px;height:250px;background-color:#FF0000;”></div>

Revisa como se ve.

Tenemos que crearle un estilo para ponerle propiedades como alto, ancho y color de fondo.

Imagínate que queremos otro div encabezado tenemos que copiar y pegar el código.


@josedlujan

Estructura y Estilo

Seria algo así:



Ya tenemos 2 encabezados, pero te das cuenta que repetimos código. También es bastante incomodo estar modificando alguna propiedades o atributo de los que tenemos por que si tenemos 20 por ejemplo: color, tamaño de fuete, color de fuente, alto, ancho, etc.

¿Te imaginas el tamaño de la línea? Creo que no…


@josedlujan

Estructura y Estilo

Seria algo así:

<div id=“encabezado” style=“width:250px;height:250px;background-color:#FF0000;font-size:10px;font-family:Arial;color:#000000; margin-left: 13px;padding:10px; text-align: center;”>

</div>

Para todo esto existe CSS, quedamos que css eran las hojas de estilos, es decir los estilos de nuestra pagina se encontraran todos en un archivo terminación .css esto es para separar el código, hacerlo mas legible y que sea mas rápido la modificación de cualquier sitio, también el sitio se vuelve mas ligero al no repetir código.


@josedlujan

Estructura y Estilo

Hasta ahora sabemos que siempre tenemos un index.html que es la pagina que se muestra siempre por default.

Ahora también si queremos utilizar CSS debemos tener un archivo que termine con CSS no importa el nombre, por ahora vamos a llamarlo estilo.css

Entonces ya tenemos en nuestro servidor dos archivos.•Index.html•estilo.css

Algo bueno es que podemos tener varios .css en un sitio podemos separar los estilos para web muy grandes, así como también cambiarlo dependiendo nuestros gustos.


@josedlujan

Estructura y Estilo

Lo primero es indicarle al index.html en donde se encuentra el archivo de estilo que le corresponde.

En la etiqueta <head> hacemos lo siguiente:

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

Con esa línea le indicamos a esta pagina en donde se encuentra su estilo correspondiente. Si lo tenemos en el mismo nivel de la pagina le indicamos solo el nombre, pero si esta en otro directorio le podemos indicar la ruta como con las imágenes en la clase pasada.

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


@josedlujan

Estructura y Estilo

Nuestro archivo estilo.css tiene lo siguiente:

#encabezado {width:250px;height:250px;background-color:#FF0000;

}

El # significa que es un DIV, cuando queremos definir una clase se pone un punto. Ejemplo:.encabezado {

width:250px;height:250px;background-color:#FF0000;

}


@josedlujan

Estructura y Estilo

¿Cuándo usar un div o una clase?

DIV es cuando necesitamos reservar espacio “físico” o una posición en la pagina.

Clase la definimos cuando necesitamos darle un estilo, por ejemplo margen, color, tamaño de fuente.

Podemos tener un dentro de otro div y dentro de ese otro div.Es decir podemos anidar los divs que queramos, una buena practica como desarrollador web es tener todo en div, eso facilita las futuras modificaciones, recuerden siempre el divide y vencerás.

Esta filosofía complica todo una vez, la primera ya que es mucho trabajo, pero esto separa los buenos proyectos de los malos.


@josedlujan

Estructura y Estilo

Vamos a hacerlo en vivo y en directo…


@josedlujan

Estructura y Estilo

Entonces ya tenemos nuestro index.html que tiene dentro del body solamente esto:

<div id=“encabezado”>

</div>

¿A donde se fue nuestro estilo?

En el estilo.css tenemos lo siguiente:

#encabezado{width:250px;height:250px;

}


@josedlujan

Estructura y Estilo

Ya ahora tenemos nuestra estructura en el html y nuestro estilo en css.

Esta es la mejor practica que debemos tener siempre en mente.

Otro cosa que debemos tener en claro es que en el archivo CSS también podemos incluir las etiquetas nativas

Por ejemplo hagamos el estilo de un <p> desde el css


@josedlujan

Estructura y Estilo

Nuestro estilo ahora estará así:

#encabezado { //Asi le damos estilo a un divwidth:250px;height:250px;

}

P { //Asi le damos estilo a una etiqueta nativacolor:#00FF00;}

.textorojo{ //Asi le damos estilo a una claseColor:#FF0000;}


@josedlujan

Estructura y Estilo

Ahora en nuestro html agregamos la etiqueta nativa p y vemos que sucede.

El archivo html queda así:

<div id=“encabezado”><p> Nuestro primer html con estilo</p>

</div>

Ahora vamos a darle el estilo de la clase .textorojo:

<div id=“encabezado”><p class=“textorojo”> Nuestro primer html con estilo</p>

</div>


@josedlujan

Code time….Hagamos todo en vivo y a todo color.

@josedlujan. director de desarrollo m.t.i. josé dimas luján castillo ockhamti.com - @josedlujan...

Documents