@josedlujan. Director de Desarrollo M.T.I. José Dimas Luján Castillo

Presentación del tema: "@josedlujan. Director de Desarrollo M.T.I. José Dimas Luján Castillo"— Transcripción de la presentación:

1 @josedlujan

2 Director de Desarrollo M.T.I. José Dimas Luján Castillo ockhamti.com - @josedlujan @josedlujan

3 OCKHAM Materia 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

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

5 Curso html desde cero, CSS y principios php. @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..

6 Curso html desde cero, CSS y principios php. @josedlujan ¿Se parece? Estructura y Estilo

7 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo

8 Curso html desde cero, CSS y principios php. @josedlujan Veamos con el tamaño real, espero convencerlos. Estructura y Estilo

9 Curso html desde cero, CSS y principios php. @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

10 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo

11 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Analicemos con firebug….

12 Curso html desde cero, CSS y principios php. @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..

13 Curso html desde cero, CSS y principios php. @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í. //Esto es una div con nombre encabezado Así de sencillo… Revisa como se ve en un explorador decente, Firefox y Chrome.

14 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Vamos a ponerle un color y tamaño al div para que sea mas evidente nuestro cuadrado. 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.

15 Curso html desde cero, CSS y principios php. @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…

16 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Seria algo así: 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.

17 Curso html desde cero, CSS y principios php. @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.

18 Curso html desde cero, CSS y principios php. @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 hacemos lo siguiente: 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.

19 Curso html desde cero, CSS y principios php. @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; }

20 Curso html desde cero, CSS y principios php. @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.

21 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Vamos a hacerlo en vivo y en directo…

22 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Entonces ya tenemos nuestro index.html que tiene dentro del body solamente esto: ¿A donde se fue nuestro estilo? En el estilo.css tenemos lo siguiente: #encabezado{ width:250px; height:250px; }

23 Curso html desde cero, CSS y principios php. @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 desde el css

24 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Nuestro estilo ahora estará así: #encabezado { //Asi le damos estilo a un div width:250px; height:250px; } P {//Asi le damos estilo a una etiqueta nativa color:#00FF00; }.textorojo{//Asi le damos estilo a una clase Color:#FF0000; }

25 Curso html desde cero, CSS y principios php. @josedlujan Estructura y Estilo Ahora en nuestro html agregamos la etiqueta nativa p y vemos que sucede. El archivo html queda así: Nuestro primer html con estilo Ahora vamos a darle el estilo de la clase.textorojo: Nuestro primer html con estilo

26 Curso html desde cero, CSS y principios php. @josedlujan Code time…. Hagamos todo en vivo y a todo color.