Mi 1er Curso de DAW

 Float y Clear Propiedad Float. El efecto de esta propiedad es bastante simple pero resulta muy útil para que el diseño de la página se adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). Propiedad Clear. Esta propiedad complementa a la anterior. Con clear se especifica que un elemento no admite un flotante sobre su izquierda, sobre su derecha o a ambos lados. También se la puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre algunos de sus costados.

 Columnas Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por eso gracias a diferentes propiedades de css podemos generar columnas y así mejorar la legitimidad del texto. La propiedad column-count establece el número de columnas a mostrar. El navegador distribuye el espacio disponible para acomodar el número de columnas solicitadas. La propiedad column-width establece el ancho de las columnas. El navegador muestra el número de columnas que quepan en el espacio disponible.

Etiqueta Position La propiedad position de CSS especifica cómo un elemento es posicionado en el documento. Las propiedades top, right, bottom, y left determinan la ubicación final de los elementos posicionados. Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute, fixed, o sticky. (En otras palabras, cualquiera excepto static). Un elemento posicionado relativamente es un elemento cuyo valor computado de position es relative. Las propiedades top y bottom especifican el desplazamiento vertical desde su posición original; las propiedades left y right especifican su desplazamiento horizontal. Un elemento posicionado absolutamente es un elemento cuyo valor computado de  position es absolute o fixed. Las propiedades top, right, bottom, y  left especifican el desplazamiento desde los bordes del bloque contenedor del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se ...

 Box Sizing La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento: content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado. border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.

 Display La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible).  Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en flow layout; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de display estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando display: flex es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. Vea la siguientes tablas para mas especificaciones individuales.

Etiquetas Semánticas Las etiquetas semánticas ayudan a definir la estructura del documento y permiten que las páginas web sean mejor indexadas por los buscadores. Una etiqueta se califica como semántica si tiene que ver el significado, es decir, si nos informa sobre lo que trata su contenido. Por ejemplo, la etiqueta SECTION nos dice que contiene una sección o capítulo dentro de la página. Frente a las etiquetas semánticas tenemos otros tipos de etiquetas como las que afectan al formato, como UL, a multimedia, como VIDEO, etc.  

Maquetación Web En HTML, la maquetación web básicamente se trata de proveer de estilo a los elementos de nuestra página web para que estos se vean lo más atractivo posible según sean los objetivos, esto implica un proceso creativo, en el que se definen colores, tamaños, márgenes, rellenos, bordes, hasta efectos especiales y mucho más.

Nuevas Etiquetas HTML (Div y Span) Los tags div y span no tienen ningún significado especial, sólo que la primera se define como un elemento bloque y la segunda es un elemento de línea.

Ejercicio practico modelo de cajas.  En el día de hoy he realizado una practica sobre los modelos de caja y probando nuevos atributos para comprenderlos mejor y poderlos aplicar en mi proyecto.

Modelo de Cajas El modelo de cajas o   "box model"   es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

Cascada y Herencia CSS significa   hojas de estilo en cascada   (cascading style sheets), y es muy importante entender la palabra   cascada . La forma en que se comporta la cascada es la clave para comprender el CSS. En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La  cascada , y el concepto estrechamente relacionado de  especificidad  son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos. También es significativo el concepto de  herencia , que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causa...

 Selectores: Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".

Unidades de Medida: relativas, absolutas y flexibles Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).

 Modelo de Cajas: Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos. En este artículo, echaremos un vistazo más de cerca al  modelo de cajas  en CSS con el que vas a poder crear diseños de compaginación más complejos con una comprensión de cómo funciona y la terminología relacionada.

 En el día de hoy hemos empezado con los estilos y como implementarlos con CSS en nuestro documento HTML. Los mas importante de esta clase es que nos iniciamos en CSS. ¿Qué es CSS? CSS es un mecanismo complementario del lenguaje HTML que  permite indicarle al navegador el estilo  que debe darle a los distintos elementos al desplegar la información de un sitio web. La pagina oficial es esta . Gracias a esto podremos mejorar nuestro proyecto y aplicar diferentes estilos en los documentos HTML. Durante la clase vimos las diferentes características  de CSS, y las diferentes maneras de aplicarlo en nuestro  documento HTML. Dimos dos maneras de aplicar el CSS: Esta primera forma es inicializarlo dentro de "head" de nuestro documento HTML, indicando los diferentes estilos y donde queremos aplicarlo. La segunda forma es implementarlo a partir de un documento adicional de CSS, donde solo se forman los estilos y luego dentro del documento HTML se enlazan para que ese docu...

 En este día hemos dado un tipo de herramienta para comprobar y validar que nuestro código de HTML esta correctamente escrito. Esta herramienta son programas de validación donde identifica los fallos del código y te muestra como corregirlos. ¿Por qué es importante escribir nuestro código de HTML correctamente? Es importante ya que esto puede provocar fallos de la pagina creada e incluso te indica etiquetas que están obsoletas, mostrándote la forma mas actual de corregir ese fallo.  La pagina de validación que nos muestra el profesor para poder escribir correctamente y corregir los fallos de código en nuestros proyectos es esta pagina. La funcionalidad de la pagina es poner el enlace de nuestra pagina web. El objetivo de enseñarnos esta herramienta es para el proyecto de la segunda evaluación presentando nuestra pagina web correctamente escrito y gracias a la herramienta de validación nos ayudara a solucionar el código mal escrito.