Repaso sobre HTML5 y CSS3

Modelos de caja en CSS- InlineLas cajas con este tipo actuará igual que el texto sin respetar márgenes.- blockEstas serán cajas que se colocan uno debajo de otro y respetan los márgenes.- inline blockReúne las características de inline y block, respetando los márgenes y actuando como el texto normal.Continuemos con nuestro códigoLa vez pasada escribimos un código CSS en el cual aplicamos pequeños estilos y colocamos nuestras imágenes.Continuaremos con los estilos, pero primero debemos colocar un “id” o un “class” como atributo de una etiqueta. id vs classLas hojas de estilo (CSS) requieren conectarse con las páginas HTML y al mismo tiempo, poder comunicarse entre sí.Para que las hojas CSS puedan enviar las instrucciones de diseño y estilos, se necesita tener un identificador en las hojas HTML para que podamos manipular cada etiqueta.Para eso, están las propiedades “id” y “class”, esto permite una conexión entre ellos y sepas exactamente qué estás manipulando. Realmente es muy sencillo:HTMLCSS#usuario1{ font-size: 16px; /* Fuente especial para usuario1 */}#usuario2{ font-size: 14px; /* Fuente especial para usuario2 */}.verde{ color: green; /* Mismo color para todos los usuarios */}Lo explicaremos con más detalle en el siguiente bloque.IDSi la etiqueta es única usamos “id”. Como su nombre lo indica, es un identificador individual, no se puede repetir.Por lo tanto, es incorrecto utilizar el mismo valor de “id” en varias etiquetas. Lo correcto siempre es tener un valor diferente:Si la etiqueta se utilizará varias veces, usamos “class”. Imagina utilizar los mismos estilos para una etiqueta que constantemente repetirás, ahorras tiempo y esfuerzo.Si la etiqueta solo se usa una vez, pues dejamos únicamente la etiqueta (sin “id” o “class”). Un ejemplo común es “header”.Se puede utilizar simultáneamente un “id” y un “class” en la misma etiqueta. Esto sucede cuando quieres incluir estilos y crear un número único. Se aplicó Se aplicó Se aplicó Cuando deseamos aplicar un estilo a un id colocamos: #un_id y luego colocamos los estilos. Para las clases colocamos: .una_clase#un_id { /* estilos */}.una_clase { /* estilos */}Normalize.cssCada navegador tiene diseños por defecto para cada etiqueta lo cual causa que nuestro diseño se vea diferente en cada navegador, para solucionar esto, usaremos normaliza.css el cual colocará estilos estándar en todos los navegadores.Reset.css lo que hace es resetear todos los diseños a cero. No es conveniente usar RESETS. Usa normalize.css.http://necolas.github.io/normalize.css/Descárgalo y aplícalo como un estilo normal en tu HTML antes de tu hoja de estilos principal. Primero el normalize, luego tu CSS principal.Retina Display: Modificando nuestras imágenes con CSS.Después de tener nuestras imágenes al doble del tamaño que deseamos, debemos modificar su tamaño con “width” de la siguiente forma:#logo { width: 80px;}“Width” modificará el ancho y el navegador ajusta el alto de la imagen de forma proporcional para que nuestra imagen quede de acuerdo a nuestro diseño.Reglas de codificación en CSS- Todos los atributos van en orden alfabético.- Orden de los estilos: - *. Pre-render - etiquetas - IDs - Clases- Orden alfabético en todos los estilos- Identar y hacer código LINDO.Herencia de CSSPara aplicar un mismo bloque de estilos a dos etiquetas, debemos colocar una coma entre etiquetas, de la siguiente forma:header figure, header h1{ display: inline-block; vertical-align:top;}Tip: La letra es más legible en un color gris oscuro cuando tenemos un fondo blanco.Solución de la tareaLa tarea era encontrar la diferencia entre “em” y “rem”.Con “em” se toma el valor de fuente más cercano, mientras “rem” toma el valor de fuente del body o por default.No es recomendable usar mucho rem ya que solo es soportado por IE9 para arriba, mientras no tengas esta limitante, no tienes problema.Tarea: Agregar el boton de home a nuestra página.Tip: Podemos colocar porcentajes (Ej: 60%) como una medida en ancho la cual se modifica según el lugar donde se muestre.FlotantesLos flotantes pueden ser a la derecha o la izquierda dentro de un bloque en donde se pondrá al lado mas a la derecha o más a la izquierda del contenedor.Ejemplo:header #avatar figcaption{ float: right;}header #avatar img{ float: left;}Tip: Los botones si no aparentan ser un botón es mejor que tengan underline. Sabemos que es feo, pero esto es un principio de usabilidad.Bordes redondeados¿Recuerdas cuándo tenías que hacer estos bordes con imágenes cortadas?Bienvenido al 2013, esto es posible con:.redondeado{border-radius: 16px;}TipografíasUstedes deben poner atención en las siguientes tipografías: EOT SVG TTF WOFF.Éstas son usadas en la web por navegadores como Chrome, IE, Safari Mobile, Safari y Opera.WOFF es la tipografía usada por la última versión de los navegadores mencionados anteriormente.Pagina de fuentes recomendada: http://www.fontsquirrel.com/Para descargar tu fuente debes darle click a webfont click (si está disponible) y deberás descargar tus fuentes para luego aplicarlas en tu CSS por medio de @font-face de la siguiente forma:@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot#') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg');}Con “font-family” será la forma en que llamemos la tipografía y el “src” será la parte en donde llamamos la tipografía que deseamos según el navegador, acá es necesario que llamemos las cuatro tipografías anteriormente mencionadas.La otra opción es Google Web Fonts en donde están las fuentes libres y más populares para la web, para usarla solo debes copiar el codigo que te indica la página.http://www.google.com/fonts/Tarea: Crear una cuenta en GitHub y descargar la aplicación según tu sistema operativo.http://www.github.com/