Video 1 Introduccin

18 de septiembre de 2012
1. Crear sitio sencillo para aprender en DW colocarle nombre, carpeta
donde se va a guardar
2. Panel de archivos del DW aparece la configuracin del sitio, en caso de
que no se vea en la opcion ventana habilitar la opcion de archivos
3. Crear archivo HTML
4. Se conoce sintaxis de HTML, etiquetas de estructura
5. La primera etiqueta que se genera de DOCTYPE informa el lenguaje de
programacin, al ser transicional permite el uso de etiquetas obsoletas
6. Para no permitir el uso de esas etiquetas errneas se cambia el DTD de
transicional a estricta y que no permita el uso de esas etiquetas vamos
en vista diseo donde se habilita un boton de panel de propiedades en la
opcin titulo/codificacin cambiar la opcion de transicional por XHTL
strict
7. Guardar pagina
8. Mirar el w3c (www.w3.org) la cual es un consorcio donde
peridicamente se publican los ltimos estndares, forma correcta de
programar, etiquetas CSS o XHTM han salido nuevas y cuales quedan
obsoletas
9. Recomendado instalar varios navegadores para ver la vista previa de
todos los navegadores ya que en cada uno se visualiza diferente
10. CSS en espaol significa hojas de estilo en cascada
11. Un estilo es una regla, que indica cmo aplicar a formato en alguna
parte de la pgina web. Estos se pueden crear en la cabecera justo
antes de la etiqueta de cierre
12. Dentro de los head el estilo debe estar siembre dentro de etiqueta style
que se abre y se cierra
13. Las partes de un estilo CSS son el selector que hace referencia a la
zona de la pgina web que se desea modificar y lo que se denomina
instrucciones hacen referencia al formato que se va a aplicar a esa
zona
14. Crear con codigo HTML un titulo con etiqueta h1 y un prrafo con
etiqueta p en el body
15. Para aplicar estilo a lo creado dentro de la etiqueta <style> que se creo
en el head se colocara el codigo
16. Para el caso se pondr el titulo en el centro de la pagina web y en azul
primero colocar el selector para el caso seria (h1) luego se abren llaves
y dentro viene el bloque de declaracin o instrucciones y cerrar llaves
17. El bloque de declaracin tiene la estructura propiedad:valor
18. Como se desea cambiar la alineacin al centro text-align seria la
propiedad y el valor es center
19. Dentro de las llaves se pueden poner varios bloques de declaracin los
cuales estn separados por punto y coma
20. Como tambin deseo colocar el texto del ttulo en azul despus del
center el punto y coma, la propiedad para este caso sera color: blue(hay
 otras formas de colocarlo como con la ayuda de paleta, su codigo bgr,
nombre en ingles si es un color comn)

Video 2 Hojas de estilo internas y externas

30 de septiembre de 2012
Hojas de estilo internas y externas I.
1. Para buscar las propiedades CSS se puede hacer en la pgina web
2. Una regla CSS no cambia la apariencia de toda una pgina web por
s sola, lo que la cambia es lo denominado hoja de estilo
3. Las hojas de estilo son el conjunto de reglas CSS. Estas pueden ser
de 2 formas. Las hojas de estilo internas: Dan formato a una
pgina web, la descarga es ms lenta porque debe leer la hoja de
estilo que estn dentro de ellas, y van dentro de la etiqueta head de
la pgina web y hoja de estilo externa: Su ventaja es que dan
formato a todo el sitio web, agilizan la descarga de las pginas web
se realizan ms rpido y van en un archivo vinculado independiente.
Tan solo es necesario agregar un archivo con las reglas CSS en su
interior para todas las pginas del sitio web
4. En el caso de que la pgina lleve codigo javascript este se coloca
tambin en el head despus que el codigo CSS porque muchas
veces el codigo javaScript apoya para hacer algunas cosas con CSS
por lo que conviene que el CSS este ledo por el navegador antes del
javaScript
5. Para construir una hoja de estilo externa y que de formato a todo el
sitio web. En el panel de archivos de DW
6. Crear dos pginas web ms con un prrafo cada una
7. No es conveniente ni acentuar el nombre de las pginas web ni dejar
espacios si el nombre es palabra compuesta
8. Para dar la misma apariencia a la 2da y 3ra hoja que la 1ra hay 2
alternativas, una es agregar la misma hoja de estilos dentro del head
para la 2da y para la 3ra (no es conveniente porque sera repetir
codigo) y otra es crear hoja de estilo externa. La otra solucin es
hacer una hoja de estilo externa poner las reglas en la hoja de estilo
externa creada y posteriormente vincular esa hoja a las pginas web
del sitio
9. Para crear la hoja de estilo por la parte de archivo en la opcion CSS
10. Al crearla por defecto DW agrega una linea que indica el tipo de
codificacin utilizado para los caracteres (utf-8) y una linea de
comentarios los cuales van /* comentario*/ para hacer anotaciones
de utilidad para quien programa en el momento y quien pueda
programar en el futuro
11. La hoja de estilo al ser externa no lleva la etiqueta style de resto todo
quedara igual
12. Ya para vincularla tanto en la 2da como 3ra pgina web creada
dentro del head antes de la etiqueta de cierre con la etiqueta link con
 varias de sus propiedades rel que indica el tipo de vnculo que para
el caso se trata de un vnculo a una hoja de estilo, el atributo type
permite al navegador saber de qu tipo de dato se trata en este caso
es un archivo css tambin se puede vincular un javascript el caso
cambiara el nombre y el atributo href que es adonde tiene que
apuntar para encontrar la hoja de estilo correspondiente.

Video 3 Hojas de estilo internas y externas 2

12 de octubre de 2012
Continuamos explicando las diferencias entre las hojas de estilo internas y
externas. Ventajas de utilizar una hoja de estilos externa cuando se pretende
cambiar la apariencia del sitio web completo
1. Crear una 4ta pgina web para agregar el link que llama a la hoja de
estilo se puede hacer desde el panel de estilos la opcion de vincular la
hoja de estilos escogerla de donde est guardada y automticamente se
coloca el vnculo evitando que uno lo escriba (para que genere la
etiqueta se escoge opcion vincular en vez de importar)
2. Si se escoge la opcion importar genera un codigo dentro de etiqueta
style donde llama por vinculo a la hoja de estilo) normalmente es el
mismo resultado que la otra opcion
3. La diferencia de lo anterior no est cuando se quiere vincular la hoja de
estilo externa a una pgina HTML, la diferencia esta cuando se quiere
vincular una hoja de estilo externa en otra hoja de estilo externa ya que
en la hoja de estilo no se puede escribir codigo html por lo que no sirve
la etiqueta style con sus atributos porque no funciona
4. La utilidad de la opcion media que aparece cuando se quiere vincular
una hoja de estilo externa es incorporar diferentes tipod de reproduccin
separados de puntos y comas

Video 4 Hojas de estilo inline

18 de octubre de 2012
Estilos inline. Ventajas/desventajas respecto a hojas de estilo internas y
externas. Cundo utilizar estilos inline. Cmo utilizar estilos inline
1. Los estilos inline son una regla CSS dentro de la etiqueta HTML puede
ser dentro de la etiqueta de apertura <h1>, o <p> antes de cerrar con el
signo > aadir <etiqueta apertura(h1,p) atributo style=propiedad:
valor;>texto que se quiera colocar</etiqueta de cierre(h1,p)> esto
servira si yo quiero dar un estilo en particular solo a una pate de la
pagina
2. Las ventajas que tiene de utilizar este atributo style dentro de la
respectiva etiqueta HTML con respecto a la utilizacin de hojas de
estilos internas y externas son que hay la posibilidad de cambiar un
nico elemento HTML de la pgina web
3. La desventaja es que es una prctica no recomendada a la hora de
disear pginas web, no utilizarla tan seguido y para todo no
consiguiendo el propsito de que el codigo quede lo ms limpio posible.
Otra desventaja es que no hay ahorro de tiempo a la hora de crear
 pginas web ni tampoco ancho de banda como las hojas de estilo
internas y externas
4. Se suele utilizar cuando se quiere escribir direcciones de email en na
pgina web que aparece una direccin de contacto a la que se le quiere
dar un formato especial, cuando se quiere colocar un copyrights
5. Diferencia entre utilizar hoja de estilo inerna y stylo inline
6. Lo primero es crearla

Video 5 Selectores 1ra parte

12 de noviembre
Primer vdeo dedicado al tema de los selectores. Selectores de etiqueta, de
clase, de ID, de grupo y universales
Selectores CSS
Los selectores sirven para especificar dentro de la pgina web a que elementos
de la misma podamos aplicar un estilo

- Selectores de etiqueta: Se refiere a si es un titulo h1, h2, h3, un prrafo

p
- Selectores de clase: Permite establecer un estilo de clase al elemento
que se desee dentro de la pgina web. Tienen la caracterstica de que
comienzan por un . seguido del nombre del Selector que tiene la
caracterstica que no puede comenzar ni por nmero ni por un smbolo
extrao, es case sensitive es decir que distingue entre maysculas y
minsculas luego se abre llave dentro las respectivas propiedades:
valores separadas por punto y coma y cerrar llave. Esto se hace dentro
de la etiqueta style en el head. Despus se localiza el prrafo al que se
va aplicar dentro de la etiqueta de apertura de p se usa el atributo html
class:nombreSelector que el dw lo reconoce. Para el caso puede
aplicar otras caractersticas que no se han sealado en el estilo de clase
como la negrita y cursiva esto se debe al tema cascada, herencias, entre
otros, esto los est cogiendo del estilo de etiqueta p. Esto se puede
aplicar a cualquier selector de etiqueta
- Selectores de ID: Es bastante parecido al selector de clase solo que se
diferencia de este es que mientras el selector de clase se puede ir
aplicando a cualquier elemento que se quiera (h1, p, h2), el estilo de ID
se utiliza para especificar el formato de un elemento en concreto de la
pgina web como una barra de navegacin, un rea de descargas, zona
a la derecha donde aparezca un men, una tabla, o cualquier elemento
en concreto de la pgina para diferenciarlo de los dems. Crea una tabla
y en la hoja de estilos interna se anota para distinguirlo empieza con un
# seguido por el nombre del selector abrir parntesis propiedades con
sus valores y cerrar parntesis. Para aplicarlo sera igual ir al selector de
etiqueta para el caso table adicionar el atributo id=nombreSelector,
para el caso de la tabla ya tendra algunos se adicionara ese no importa
orden. Dw utiliza este tipo de selector para capas (ver mas adelante)
 - Selectores de grupo: Su finalidad es aplicar un conjunto de estilos a
unas cuantas etiquetas, simplemente en la hoja de estilo se colocan
todas las etiquetas a las que se les va aplicar el estilo separadas por
comas
- Selector Universal: Aplicar las caractersticas que se desee a todos los
elementos de la pgina web. Este se aplica colocando un * significa que
para todos los elementos de la pgina web seguido de la apertura de los
parntesis propiedades con valores y cerrar parntesis

Video 6 Selectores 2da parte

8 de marzo de 2013

En este vdeo vemos el tema de los selectores descendientes.

- Selectores descendientes: Es necesario tener claro la jerarqua de
etiquetas del lenguaje HTML, etiquetas que se consideran ms
importantes que otras o padres de las otras etiquetas. Hay etiquetas
padres como HTML, etiquetas hijo como puede ser la etiqueta head y
body y asi hacia abajo, head y body son hermanas porque en la
jerarqua estn a la misma altura. Aplicar un estilo por ejemplo a vnculos
que estn dentro de etiquetas de listas no teniendo en cuenta los
dems. En la hoja de estilo colocar la etiqueta donde se encuentran los
vnculos para el caso(li a) abrir llave ya las propiedades con sus
respectivos valores. Se coloca una palabra en negrita dentro de un
vnculo con la etiqueta strong, si se desea que todas las palabras que
estn en negrita con esa etiqueta dentro de una lista las coloque en otro
color se usa tambin los selectores descendientes teniendo en cuenta
jerarqua para el caso sera (li a strong) se refiere a cambiar todo lo que
este dentro de una etiqueta strong que a su vez sea vinculo (etiqueta a)
que a su vez este dentro de etiqueta lista (li)
A la hora de trabajar con estilos descendientes no es necesario trabajar con
etiquetas se puede combinar con estilos de clase, id. Para el ejemplo se crea el
estilo de clase en head y despus de la etiqueta strong que est en el prrafo
se adiciona el class=nombre y ya. Si queremos escoger una palabra aplicarle
el formato de clase pero que no est en negrita con la etiqueta span que no
aplica formato alguno se hace y dentro de esta la etiqueta class.
Se quiere subrayar las palabras que le hallamos aplicado el estilo de clase pero
que estn dentro de la etiqueta strong ah tambin se usa los selectores
descendientes combinndolo con estilo de clase se hace de la siguiente forma
strong .nombreClase{ propiedades: valores} no olvidar decirle en el prrafo que
el estilo de clase desciende de la etiqueta strong. El class se coloca dentro de
etiqueta span para que tenga efecto. Para no tener que colocar el span cada
vez que se quiera hacer eso es colocar la instruccin strong .nombreClase
junta eliminar espacio entre el strong y el punto que identifica que es un
selector de clase ah estara diciendo que subrayara los estilos de clase que
han sido aplicados como atributo de la etiqueta strong no como descendiente

Video 7 Selectores 3ra parte

19 de marzo de 2013
En este vdeo tratamos las pseudoclases psuedoelementos. Veremos cmo
modificar el estilo css de los vnculos.
1. Como crear estilos para modificar vnculos para que no tengan por
defecto el formato que les da el navegador, visitados recientemente de
una forma y no visitados de otra. Desde css es posible darle el estilo que
puede tener un vinculo
2. Los diferentes estados que puede tener un vnculo son:
- Link: Hace referencia al estilo que tiene el vnculo en reposo
- Visited: estilo del vnculo cuando ya ha sido visitado
- Hover: estilo del vnculo cuando se pasa el raton por encima de este
- Active: estilo del vnculo cuando se est haciendo clic
3. Con las pseudoclases o pseudoelementos en css se puede para dar un
estilo a unos estados y a otros, esto consiste para el caso en agregar el
estado correspondiente al vnculo al selector del enlace. Si el selector
del vinculo es a despus se agregan dos puntos y especificar el estado
a modificar en ese momento concreto de los mencionados antes luego
abrir llaves las propiedades y valores y cerrar llaves
4. Para que funcione en la hoja de estilos siempre que se utilicen los 4
estados a la vez tienen un orden link, Visited, hover, active (truco love
hate) l y v de love y h y a de hate para no olvidar orden
5. Los seudocdigos no solo se aplican a vnculos, se aplican de igual
forma a prrafos listas, etc
Video 8 Practica guiada 1
21 de marzo de 2013
Prctica guiada utilizando los conceptos aprendidos hasta ahora. Aplicamos
todo lo visto sobre selectores.
1. Lo primero es darles formato a los prrafos, alineacin, letra, distancia
desde borde izquierdo hasta el texto, color para eso
- Crear hoja de estilo interna porque solo se le dar formato a una pagina
- Para color, tamao de fuente, tipo de fuente, alineacin (no se aprecia
hasta que no se quite como ancho de pantalla el ancho total de la
pagina), margen desde el contenedor de los prrafos con un selector de
tipo p
2. Estilo a ttulos h1, h2 y h3 para color, fuente, linea superior
3. Formato a los prrafos resaltados con selector de clase, color de fondo,
bordes punteados, distancia a los bordes, color de la palabra ATENCION
diferente al resto

Video 9 Practica guiada 1b

21 de marzo de 2013
Continuacin de la prctica guiada del vdeo anterior. Terminamos el
documento aplicando selectores descendientes y selectores hermanos.
1. Estilo descendiente para todo lo que esta dentro del selector de clase
atencin pero que tenga a su vez la etiqueta strong para el caso es el
color solo de la palabra atencin
2. Estilo descendiente al cuerpo de la pagina web para darle color de fondo
a esta y colocarle la imagen encima de ese color
3. Selector de id para aplicarlo al body aadiendo color, border, imagen
para fondo y propiedades para fondo. Decir que ancho no es 100% de la
pantalla
4. Selector hermano para el 1er prrafo para eso indica modificar el p que
esta despus de una etiqueta h1 se hace iniciando h1+p{..} modifica
los p que estn inmediatamente despus de la etiqueta h1

Video 10 Herencia
4 de mayo de 2013
Herencia en CSS. Cmo el uso de la herencia ahorra tiempo a la hora de
formatear nuestras pginas web. Propiedades que se heredan y propiedades
que no se heredan.
La herencia consiste en que las etiquetas padre pasan a las etiquetas que
puedan estn estar anidadas dentro
1. Regla de estilo para las etiquetas p del documento con un selector de
etiqueta como las etiquetas strong dentro de p a lo que esta dentro de
estas tambin le modifica las propiedades que se indique con esto se
dice que hay herencia porque lo que esta dentro de strong hereda las
 propiedades que se le dieron a lo que contiene esta etiqueta strong para
el caso p
2. La herencia funciona adems de con los estilos de etiqueta con los de
clase y con los de id
3. Cuando un elemento recibe dos estilos uno por herencia y otro
especifico siempre se har caso a lo especifico se har caso al
especifico

Video 11 La cascada
12 de junio de 2013
En este vdeo nos adentramos en el tema de la Cascada. Cmo gestiona el
navegador los conflictos de estilos por herencia o por aplicacin desde
diferentes sitios.
1. Las cascadas de estilos se pueden definir como unas reglas que
determinan que propiedades de estilo se aplican a un elemento en
concreto cuando existe sobre el conflicto de estilos
2. Este existe cuando entra en juego la herencia
3. Conflicto tambin existe cuando se aplican varios estilos al mismo
elemento
4. Para el caso de que exista conflicto por aplicar varios estilos se tiene en
cuenta la tabla de puntuaciones segn aplique ganando la de mayor
puntuacin
- Un selector de etiqueta vale 1 punto
- Un selector de clase = 10 puntos
- Un selector de id = 100 puntos
- Un selector inline = 1000 puntos

Video 12 La cascada 2
23 de junio de 2013
Primera parte de la prctica guiada donde vemos a la cascada en accin.
1. Bajar los archivos
2. Crear hoja de estilos externa
3. Aadir el link de la hoja de estilos al html ya sea escribiendo la linea de
cdigo o desde el panel de estilos CSS con el boton de adjuntar que
tiene forma de cadena pequea con la opcin vincular
4. En la hoja de estilos crear un reset css para que las pginas se vean
bien en cualquier navegador al principio de la hoja la finalidad de este es
que la distancia sea igual en todos los navegadores, y en quitar
cualquier formato que puedan tener las etiquetas
5. Darle estilo con selector de id a los div para que uno quede al lado del
otro
6. Darle estilo con selector de etiqueta al body, h1 y h2
Video 13 La cascada 3
25 de junio de 2013
Continuacin de la prctica guiada donde vemos en accin la cascada.
Resolvemos conflictos de estilo.
Recordar tabla de puntuaciones
- Un selector de etiqueta vale 1 punto
- Un selector de clase = 10 puntos
- Un selector de id = 100 puntos
- Un selector inline = 1000 puntos

Video 14 Formato a texto 1

23 de julio de 2013
Seguimos avanzando en el curso. En este vdeo vemos las propiedades CSS
ms importantes para aplicar a texto. Como siempre, partimos de un archivo
sin estilos CSS que iremos confeccionando poco a poco.
1. Hoja de estilo reset interna para que todos los navegadores se vea igual
la pagina web
2. Dar las diferentes estilos para conseguir resultado deseado

Video 15 Formato a texto 2

23 de julio de 2013
Seguimos la prctica del vdeo anterior aplicando formato a texto

Video 16 Modelo caja contenedor

13 de agosto de 2013
Modelo caja-contenedor. Propiedades margin y padding.
El modelo caja contenedor consiste en que todas las etiquetas que se puedan
construir en el lenguaje html dentro de las pginas web son consideradas como
cajas o contenedores. Los elementos de estas etiquetas son
- Margin: corresponde al margen de la etiqueta. Es la distancia que hay
desde el borde del contenedor hacia lo que lo rodea por los 4 lados,
puede estar en px, en % o en em(multiplicador)
- Padding: Distancia que hay desde el contenido de la etiqueta hasta el
borde del contenedor
Se pueden programar varios tipos de caja contenedor en html.
- Block-Level: salto de linea antes y despus de la etiqueta. Tablas,
listas, elementos dic o etiquetas p son algunos ejemplos
- Inline: No crean salto de linea ni antes ni despus de la etiqueta. Las
etiquetas strong, img, a, son algunos ejemplos. Estas tienen margin y
padding derecho e izquierdo solamente, no tienen el superior e inferior
Darle los estilos a las diferentes etiquetas en la hoja de estilo interna
Se trabaja html, body, h1 y h2 hasta propiedad margin

Video 17 Modelo caja contenedor 2

14 de agosto de 2013
Continuacin de la prctica del modelo caja-contenedor.

1. Comenzando desde convertir el prrafo de nota como contenido lateral

2. Insertar etiqueta div antes del h2 correspondiente de nota que se cierre cuando finalice
el p correspondiente a ese h2
3. Etiqueta .lateral es lo nuevo
4. Utilizando estilo en cascada se puede utilizar un estilo en concreto para los h2 que
estn dentro de la clase lateral

Video 18 Imgenes 1
7 de septiembre de 2013
Primera entrega de la manipulacin de imgenes con CSS. Vemos cmo
aplicar las propiedades float, border, margin y padding en las imgenes de
nuestras pginas web.
1. Etiqueta <img/> para las imgenes
 2. Background-image es para incluir imgenes de fondo esta puede o no
repetirse, colocarse en una posicion que se desea
3. Algunas de las propiedades mas usadas con imgenes son
Border: para aplicar bordes mas o menos estticos
Padding: Para aplicar rellenos
Float: Para ubicar una imagen
Margin: Para dejar espacio alrededor

Formatos de imgenes web

- GIF
Ventajas
Buena compresin
Admite transparencia
Admite animaciones
Inconvenientes
Solo maneja 256 colores diferentes
- JPEG
Ventajas
Millones de colores. Paisajes realistas
Buena compresin
Inconvenientes
Texto y reas grandes de color solido imperfectos
No admite transparencia
- PNG
Ventajas
Admite transparencia
2 tipos de formatos el PNG 8 que es similar al gif en cuento
a calidad y el PNG 24/32 que es similar al JPEG en cuanto
a calidad
Inconvenientes
Algunos navegadores antiguos no representan bien este
formato

Video 19 Imgenes 2
7 de septiembre de 2013
Manipulamos imagen y pie de imagen utilizando un contenedor div.
No hay nada nuevo que anotar

Video 20 Imgenes 3
16 de septiembre de 2013
Seguimos trabajando con imgenes. En este vdeo vemos cmo crear una
galera de imgenes sencilla con CSS. Utilizamos la etiqueta html div como
contenedor de imgenes.
Video 21 Imgenes 4
29 de septiembre de 2013
Seguimos trabajando con imgenes. Vemos en este vdeo el potencial de la propiedad
background-image.

1. Dar color de fondo utilizando imagen de fondo como por defecto se repiten en mosaico
tanto en vertical como horizontal para el caso solo la quiero en horizontal
2. Establecer formato de contenedor principal, primero color de fondo blanco y luego
imgenes de fondo wat VEZ que no se repita
3. Empujar el banner t los anuncios hacia abajo est en estilos de clase id
4. Darle subrayado con una imagen a etiquetas h2 que estn en el contenedor llamado
principal y no repetir y modificar la posicion de la imagen de fondo y al h2 darle padding
para que las letras no estn encima de la imagen
5. Cambiar las vietas por defecto de la etiqueta ul por una imagen

Video 22 Imgenes 5
29 de septiembre de 2013
Continuacin de la prctica anterior.
1. Fondo a contenedor de la barra lateral izquierda
2. Pergamino parte superior h2
3. Pergamino parte media contenedor anuncio

Video 23 Vnculos 1
8 de octubre de 2013
Comenzamos en este vdeo el trabajo con vnculos. Vemos los 4 estados de un
vnculo y como manipular el aspecto de los mismos con propiedades CSS.
1. Los vnculos con etiqueta <a href></a>
2. Tienen 4 estados
- Reposo: link
- Visitado: Visited
- Rollover: hover (pasar el mouse por encima cambia formato)
- Click:active
3. Si se utilizan todos los estados se debe hacer en el orden mencionado
4. Se recuerda ese orden con love/hate tomado la l y v de love y la h y a de hate
5. Cuando se quiere especificar en css el formato que va a tener un estado en concreto
se hace con pseudo-clase por ejemplo a:link{}

Video 24 Vnculos 2
8 de octubre de 2013
Terminamos la prctica que comenzamos en el vdeo anterior. Vemos cmo
aplicar formato a vnculos especficos utilizando diferentes selectores CSS.
1. a[href^='http://'] {}quiere decir se le da formato a todo lo que empiece
por (^ indica empiece por)
2. a[href$='.pdf'] quiere decir se le da formato a todo lo que termine por ($
este smbolo es el que dice que termine por lo que se le indica para el
caso .pdf)

Video 25 Vnculos Barra de navegacin

15 de octubre de 2013
Vemos en esta entrega cmo crear una barra de navegacin con CSS partiendo de una lista sin
ordenar.

1. Barras con css el archivo final resulta liviano

2. Convertir etiqueta inline (sin espacios) en etiqueta blockline se utiliza la propiedad
display con el valor block
3. Tcnica sliners doors

Video 26 Vnculos 4 Barra de navegacin 2

15 de octubre de 2013
Terminamos en este vdeo la creacin de la barra de navegacin. Una vez
terminada la convertimos en barra horizontal, no sin alguna dificultad por mi
parte.
1. Selector de grupo
2. Para pasar la barra de vertical a horizontal lo primero es quitar ancho
que se puso en selector barra
3. Luego decirle a cada vinculo que se situ a continuacin del anterior con
la propiedad float para ello crear selector descendiente al que tambin
se le coloca un ancho para darle ancho al boton
4. Colocar el borde inferior
5. Linea que sobra a la derecha no aparezca
6. Duplica borde izq cambiarr instruccin border-bottom con los mismos
valores por border:left
7. ir al selector descendiente barra a cambiar instruccin border-botton:
none por border-left:none
8. adicionar una propiedad overflow: hidden en el selector barra

Video 27 Tablas
22 de octubre de 2013
En esta entrega vemos un ejemplo de cmo aplicar estilos css a tablas html.
Utilizamos la propiedad border-collapse para jugar con los bordes de la tabla.
Seguimos utilizando los conceptos aprendidos hasta ahora para aplicarlos en
tablas.
1. Darle estilo al selector id inventario
2. Colocarle una tipo de fuente y un with de 100%
3. Darle formato al texto tabla 1 En almacn que se encuentra dentro de
etiqueta caption que sirve para darle estilo a ttulos de tablas
4. Crear selector descendiente para #inventario caption aumentarle
tamallo, moverlo a la derecha, darle algo de espacio con propiedad
padding-top asi se desplaza la tabla un poco hacia abajo
5. Agregar bordes a la tabla crear selector descendiente y de grupo para
etiquetas filas y columnas al cual le asignamos un tamao de letra un
borde
6. Si se desea que separacin entre celdas desaparesca en el selector
inventario se aplica la propiedad border-colapse con el valor collapse se
colapsan los bordes y hacer que separacin existente entre difirentes
celdas desaparezca
7. En el selector de grupo aplicar padding para dar algo de espacio
 8. Destacar los encabezados de las tablas esta es etiqueta th se utiliza
cascada crear selector descendiente para th (#inventario th) en este es
colocar texto de los encabezados en mayuscula, colocar texto a la
izquierda, y aca entra en juego la cascada se debe crear un poco de
separacin por la parte de arriba de la celda con la propiedad padding-
top que en el selector de arriba se estableci como 3px pero se
masacacha cambindola a 8px y tambin hacerlo por abajo del selector
de grupo hereda tamao de letra y borde y cambia los padding
exactamente el top y button, darle imagen de fondo y cambiarle color a
la letra
9. Crear selector descendiente y de clase para darle color a celdas una si y
la otra no y por eso se aplica estilo de clase a las filas a las que se le da
formato y que este sea a la vez selector descendiente para que sean las
etiquetas tr de esas filas las que tengan el formato que ser color de
fondo se crea el selector (#inventario tr.alternas td) celdas que se
encuentren dentro de las filas que tienen un estilo de clase llamado
alternas que se encuentren dentro del selector id inventario y agregar
color de fondo a esas filas

Video 28 Formularios
23 de octubre de 2013
Vemos en esta entrega cmo aplicar caractersticas CSS a formularios web.
Utilizamos la propiedad float para establecer columnas y vemos cmo modificar
la apariencia tanto de botones como de otros elementos de formulario con
CSS.
1. Selector id subForm para cambiarle el tamao de letra a los label del
formulario
2. El formulario tiene etiqueta, botones de texto, botones de radio, men
desplegable, entre otros
3. Establecer dos columna una para los textos o etiquetas y otra para los
elementos del formulario para eso estos textos deben estar dentro de
etiqueta label
4. Crear selector de clase descendiente #subForm .etiq que le aplicara a
los elementos html dentro del formulario que tengan el atributo clase etiq
algunas propiedades como float para que las etiquetas se coloquen a la
izquierda y lo que sigue es dcir los cuadros de texto y elementos de
formulario aparezcan a continuacin y tambin ancho no olvidar aplicar a
las etiquetas el selector de clase etiq
5. Para el caso de la etiqueta con los botones de radio como no esta dentro
de etiqueta label se debe utilizar una etiqueta que no aplica formato
ninguno que es span y dentro de esta colocar class etiq
6. Ahora colocar un text-align a la derecha para que las etiquetas queden
cerca de su correspondiente cuadro de texto, tambin aadir un margin-
right para que no quede tan pegado y colocarlo en negrita
7. Ahora con el boton del formulario desplazarlo hacia el centro con la
propiedad margin-left dentro el selector id suscribe, tambin cambiarle
color de fondo y un tipo de fuente
 8. Cambiar apariencia de cuadros de texto que tienen aplicado un id
nombre, email y comentarios para eso aplicar selector de grupo darle
color de fondo, tipo de letra que aparcera en los cuadros de texto,
tamao al texto y un ancho igual para todos los cuadros, subir un poco
los cuadros con margin-top negativo y el cuadro de texto que se este
escribiendo aparezca destacado con relacin a los dems para eso
crear pseudoclase #nombre:focus

Video 29 Estructura web con CSS parte 1

28 de octubre de 2013
En este vdeo vemos cmo dar estructura a una pgina web con CSS. Utilizamos la etiqueta div
y la propiedad float para dar estructura de una manera simple y sencilla.

1. Etiqueta div es una etiqueta blocklevel quiere decir que esta etiqueta tiene salto de
linea donde se colocara contenido de barra lateral y principal
2. Crear 2 div con id de barra lateral y principal
3. Hoja de estilo interna que tendra un selector id de barraLateral con propiedad float,
witdh, margin-top
4. Crear estilo para el id de principal agregando propiedad de margin-left
5. Crear otro div con id=secundario
6. Y crear el selector de id en la hoja de estilo para darle estilo con propiedades float,
witdh y un backgroud
7. Selector para todas las etiquetas dentro del id secundario que se le colocara color de
letra
8. Selector descendiente que aplique las caractersticas a etiqeutas h3 dentro del id
secundario se le da pripiedad de tamao de texto y color de fondo y el pading
9. Darle estilo a los h4 tamao de letra y margin
10. Darle estilo a los prrafos

Video 30 Estructura web con CSS parte 2

2 de noviembre de 2013
1. Continuamos viendo en esta entrega cmo estructurar una pgina web con CSS. En
esta ocasin utilizamos mrgenes negativos en la propiedad margin para re-ubicar los
contenedores div.
2. Diseo a 3 columnas
3. Se tiene un gran contenedor con un selector id en el div que engloba a lo dems en la
etiqueta body
4. Tiene 3 contenedores (principal, noticias, navegacin) que son las 3 columnas, el
banner que va en la parte de arriba y el pie de pgina abajo esos 5 contenedores
estarn dentro del contenedor
5. Agregar hoja de estilos
6. Utilizar selector id para contenedor con propiedades border a la derecha e izquierda,
ancho y margen, background
7. Selector de etiqueta body con propiedades background y margin
8. Selector id principal, con propiedades float y witdh, paddon-left y border-left y margin-
left
9. Selector noticias, con propiedades float y witdh y margin negativo
10. Selector nav con propiedades float y witdh
11. Div legal tendra propiedades clear, margin-right,, padding, border-top, font-weight y
color

Video 31 Posicionamiento CSS parte 1

6 de noviembre de 2013
Comenzamos a ver en este vdeo el tema de los posicionamientos con CSS.
Trabajamos con la propiedad position y los valores absolute, relative y fixed.
Propiedad position con diferentes valores que son
- Absolute: Lo que hace es sacar del flujo HTML el elemento al que se le
da ese valor. Colocado en un punto concreto tomando como referencia
el contenedor padre
- Relative: posicionamiento respecto a donde debera estar segn flujo
HTML. Deja un hueco en su posicion original dentro del flujo HTML
- Fixed: Posicionamiento fijo e inalterable dentro del contenedor padre.
Aunque nos desplacemos por la web con las barras de desplazamiento
el elemento fixed permanece fijo. Utilizado para barras de men,
banners
- Static: posicionamiento por defecto. Sigue el flujo de etiquetas HTML.
Es lo mismo que no poner nada. La nica utilidad es sobrescribir la
herencia
Colocar relativo el banner para que si sus elementos se coloquen en absoluto
con respecto al banner y no a la pagina web

Video 32 Posicionamiento CSS parte 2

6 de noviembre de 2013
Seguimos en esta entrega elaborando la prctica del vdeo anterior en la que
estbamos trabajando con los posicionamientos absolute y relative.
1. Meter imagen dentro de div
2. Eliminar atributo alighn right
3. Flotar div a la derecha
4. Trabajar con posicionamientos para conseguir que el pie aparezca
donde debe ser

Video 33 Pagina web impresa parte 1

11 de noviembre de 2013
Vemos en esta entrega cmo crear estilos CSS que actan nicamente sobre
la pgina web impresa en papel, dejando su aspecto en pantalla intacto.
Medios diferenciadores en CSS
ALL: Todos los dispositivos
Screen: solo monitor. Se ignoran si se imprime la pagina
Print: solo papel Se ignorarn en la presentacin de la pagina en la pantalla
Tcnicas para diferentes medios
- Aadir hojas de estilo dependientes de los medios
<link rel = StyleSheet type=text/css media=print href=ruta>
- Especificar el tipo de medio en una hoja de estilos
Arroba media print {estilos para impresora}
 - Valor !important para resolver conflictos de cascada y especificidad
1. Logotipo en el centro
2. Eliminar barra de navegacin
3. Eliminar barra lateral y pie son link que no llevan a ningun sitio si se
imprime la pagina
4. Crear 2da hoja de estilo externa para estilo en papel

Video 34 Pagina web impresa parte 2

11 de noviembre de 2013
Terminamos en esta entrega la prctica anterior, dando los ltimos retoques a
la pgina web impresa
Nada se coloco aca del video

Video 35 Novedades CSS3

19 de noviembre de 2013
En este vdeo vemos novedades en cuanto a selectores y propiedades que trae
CSS 3
Novedades
Selectores
- De atributo: a[href^=http://www.nombrepagina.com]{}
^ significa que se le da formato a todo lo q comience por la url
a[href$=.pdf]{propiedad:valor} $ da formato a todo lo que termina para
el caso en .pdf
- De hijos: etiquetas dentro de otras. Se puede aplicar formato
1er hijo(first-child), ul :first-child{}
ultimo(last-child) ul :last-child{}
etiquetas alternas(bth-child(odd) por ejemplo a filas impares.lo que va
entre parntesis varia segn el casa
ol :nth-child(odd){} // empieza por el 1ro y da formato en filas
alternas lo que equivale a filas impares
ol :nth-child(even){}// empieza por el 2do y da formato en filas
alternas lo que equivale a filas pares
ol :nth-child(3n+2){} //le da valor a los elementos resultado de una
ecuacin cualquiera donde n tomara valor desde 0 hasta que ya el
resultado sea mayor que la cantidad de elementos de la lista
- De tipo:
First-of-type: aplica formato a los hijos con un tipo especifico de
etiqueta para el 1ro pero de un tipo de eiqueta en concreto
#nombreSelector p:first-of-type{}
Last-of-type: igual que el anterior pero para la ultima instancia
#nombreSelector p:last-of-type{}
Nth-of-type: a elementos alternos con atributo odd, even segn sea el
caso
#nombreSelector p:nth-of-type(odd){}
Opacidad: Controla la opacidad de un elemento asi de esta forma opacity:
valor; Los valores oscilan entre 0(invisible) y 1 (opaco). Utilizandolo con
 a:hover se pueden obtener interesantes efectos de rollover que antes tocaba
hacerlo con javaScript o flash. Solo funcionan con las ultimas versiones de los
navegadores
Efecto rollover
a img{opacity: .5;}
a img:hover{opacity:1;}
Color RGBA: La conocida propiedad de color rgb{valor1,valor2, valor3} sus
valores oscilan entre 0 y 255 correspondientes al codigo del color y seria la
cantidad de rojo, verde, azul respectivamente. Se puede agregar un cuarto
valor que es a y se refiere a la opacidad quedara rgba{valor1, valor2, valor3,
valor4} El valor 4 ira entre 0 y 1
Sombra a texto: es la propiedad text-shadow que agrega sombra al texto y
necesita 4 parmetros text-shadow: -4px 4px 3px #99999}. Se pueden agregar
todas las sombras que queramos para obtener efectos vistosos. Despues del
color se volvera a empezar con los 4 parmetros separados por comas cada 4
parmetros
-4px desplazamiento horizontal de la sombra
4px desplazamiento vertical
3px nitidez de la sombra
#9999 color de la sombra
Text-shadow{-3px 2px 4px #5555, -5px 4px 2px #9999 }
Esquinas redondeadas
Imagen de borde:
Libertad de fuente: Existe la posibilidad de descargarse una fuente que no se
tiene en el navegador
arrobafont-face{font-family: Lavoisier;
src: url(fuentes/Lavoisier.otf);}
Para evitar la descarga en ordenadores que ya la tengan
arrobafont-face{font-family: Lavoisier;
src: local(Lavoisier),
url:(lavoiser.otf);}
Algunas propiedades CSS
Text-align: Alineacin del texto
Color: color del texto
Font-family: tipo de fuente que se utiliza para el texto
Font-size: tamao de la fuente en pixeles se coloca el nmero y px
Text-decoration: para decorar el texto (subrayado)
Background-color: Da color de fondo
Address: Sirve para especificar direcciones copyright y automticamente
lo coloca en cursiva
Font-style: estilo de fuente cursiva
Font-weight: estilo de fuente negrita
Border-color: color de un borde por ejemplo de una tabla
Margin-left: Distancia desde el texto al contenedor
Border-top: propiedades para borde superior
Border-top-color: color de la linea superior
 Letter-spacing: Espacio entre las letras
Padding-top: Distancia del contenido o texto al borde superior del
contenedor. Padding solo es para todos los bordes del contenido a cada
uno de los 4 bordes
Border: para todos los bordes
Background-image: imagen como fondo por defecto esta se repite en
mosaico en horizontal, se necesita repeticin en vertical, sale en la
izquierda se necesita en el centro
Margin: distancia del borde del contenedor al texto que precede y procede,
linea del siguiente prrafo. El valor auto centra el contenido.
Background-repeat: Repetir la imagen como yo desee
Background-position: En que parte estar ubicada la imagen primer valor
para horizontal y 2do para vertical
Text-tranform: transformacin de texto por ejemplo uppercase para
colocarlo en mayuscula
Width: ancho con respecto de 100% de la pagina web
Float: efecto de que lo que se le aplique sea rodeado por el texto, si es
right se coloca a la derecha rodeado por lo que este a continuacin de este
Line-height: Interlineado (%)
Overflow: con el valor hidden indica que propiedades de bordes de la
etiqeta se oculta si se topa con otra etiqueta
Background-image: Para incluir imgenes de fondo
List-style: Los valores se refieren a la vieta que trae la etiqueta li por
defecto
Display: Con el valor block convierte etiqueta inline en etiqueta block
Border-collapse: con el valor collapse lo que hace es colapsar los bordes,
eliminar separacin entre celdas de una tabla