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

 Hoy he terminado mi proyecto de base de datos, donde he puesto en practica todo lo aprendido durante el trimestre. Este proyecto se basado en inventarnos una empresa y el modelo E/R sobre ella, creando una documentación de el cliente, el objetivo que queremos conseguir poniendo en funcionamiento una base de datos y los mas importante la creación de un diagrama con sus respectivas entidades y relaciones. Desde mi punto en comparación con el proyecto de lenguaje de marcas, el de Bases de Datos me ha dado mas guerra, ya que tenia que utilizar la imaginación para crear la empresa y eso me fue lo mas complicado. Pero al final acabe concentrándome y sacando el proyecto con sus respectivas entidades y relaciones, detallando cada uno de sus atributos y consiguiendo el objetivo por el que se creaba la base de datos en esa empresa.

 Hoy terminado mi proyecto de lenguaje de marcas, donde he puesto en practica todo lo aprendido durante todo el trimestre. Este proyecto se ha basado en crear cuatro documento añadiendo diferentes etiquetas con un tema principal que era la creación de un curricular. También hay que destacar la creación de un gran formulario con diferentes tipos. Si quieres visitar el resultado final visa esta pagina. La verdad que lo peor que he llevado realizando los dos documentos es la estructura ya que visualmente no es muy bonita ya que de momento no hemos implementado Css, pero como soy un maniático me gusta seguir una estructura para que quedara lo mas bonito posible. Al final me ha salido un proyecto desde mi punto de vista bonito, implementando el mayor numero de etiquetas para conseguir esa estructura ordenada. Por lo demás me ha sido sencillo gracias también a  esta  pagina y experimentar en HTML5. También se me ha hecho sencillo gracias al entorno o IDE en el que he trabajado...

 La semana antes del examen el profesor nos enseño el funcionamiento de un ejercicio de E/R. Nos puso en clase a intentar solucionar un ejercicio identificando las diferentes entidades y sus relaciones. Una vez identificadas teníamos que hacer el diagrama en papel, apoyándonos con el ejercicio resuelto. Una vez ya aprendido como hacer ejercicios el profesor nos mando mas ejemplos de ejercicios y que nos pusiéramos a practicar aunque no entrara en el examen.  También nos mostro un programa para realizar los diagramas en el ordenador y así poder realizar el proyecto. Para la instalación y el funcionamiento me he apoyado en este video:

 El día de hoy, nuestro profesor  nos ha explicado el proyecto de lenguaje de marcas de este primer trimestre. En esta explicación nos ha aclarado que componentes tenemos que incluir en nuestro proyecto. Estos componentes son diferentes etiquetas para ponerlas en practica en tres paginas web, haciendo un modelo de currículum.  En este día también hemos aprendido a utilizar los formularios dentro de HTML 5. Primero hemos empezado con lo mas básico hasta ver los diferentes tipos de formularios y las diferentes formas de hacer un formulario. Nos hemos apoyado en una pagina que la recomiendo ya que te enseña diferente etiquetas con ejemplos poniéndolas en practica. La pagina es w3schools.com . Hemos utilizado esta pagina para ver los diferentes atributos  de los formularios y diferentes tipos que podemos insertar.  He puesto en practica esos nuevos formatos y aquí esta el resultado.

El día 10/11/2020 en la clase de lenguaje de marcas hemos instalado diferentes plugins y que facilidades nos aportan al funcionamiento del IDE. Visual Studio Code permite instalar múltiples plugins que facilitan el desarrollo de programas. En la barra vertical izquierda hacemos clic sobre el icono correspondiente a Extensiones. Los diferentes plugins instalados: Open in Browser: esta extensión nos permite abrir el documento en nuestro navegador web, de forma directa desde el código que escribimos en el propio IDE. Ayu: su única función es modificar el tema del propio programa IDE, haciendo al IDE mas modificable visualmente. Color HighLight: sirve para seleccionar y mostrar un color dentro del propio editor. Live Server Preview: lo que hace esta extensión es previsualizar la salida conforme vamos escribiendo y guardando código en el editor. Auto Rename Tag: lo que hace esta extensión es que cuando modificas una etiqueta no hace falta que lo hagas en la en la otra et...