Descubre el mundo de Flex Box, Listas y Enlaces

1. ¿QUÉ CONOCES DE FLEXBOX?

Manz (2016). Flexbox, explicación en español del "nuevo" sistema de elementos flexibles de #CSS [Imagen]. Recuperado de: https://www.scoopnest.com/es/user/Manz 738049500833538048-flexbox-explicacin-en-espaol-del-34nuevo34-sistema-de-elementos-flexibles-de-css

Flexbox es un sistema de elementos flexibles que llega con la idea de olvidar estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la que los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los diseños. Está especialmente diseñado para crear, mediante CSS, estructuras de una sóla dimensión.

1.1 Conceptos

• Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles. Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex establecemos las propiedades al elemento padre.
• Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, es en horizontal (en fila).


• Eje secundario: De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical, y viceversa.
• ítem: Cada uno de los hijos flexibles que tendrá el contenedor en su interior.

Para activar el modo flexbox, se utiliza sobre el elemento contenedor la propiedad display y se especifica el valor flex o inline-flex (dependiendo de como queramos que se comporte el contenedor):

• inline-flex: Establece un contenedor en línea, similar a inline-block (ocupa solo el contenido).
• flex: Establece un contenedor en bloque, similar a block (ocupa todo el ancho del padre).

1.2 Dirección de los ejes

Existen dos propiedades principales para manipular la dirección y comportamiento de los ítems a lo largo del eje principal del contenedor. Son las siguientes:

• flex-direction -> row | row-reverse | column | column-reverse: Cambia la orientación del eje principal.
• flex-wrap -> nowrap | wrap | wrap-reverse: Evita o permite el desbordamiento (multilinea).

Mediante la propiedad flex-direction podemos modificar la dirección del eje principal del contenedor para que se oriente en horizontal (por defecto) o en vertical. Además, también podemos incluir el sufijo -reverse para indicar que coloque los ítems en orden inverso.

• Row: Establece la dirección del eje principal en horizontal.
• Row-reverse: Establece la dirección del eje principal en horizontal (invertido).
• Colum: Establece la dirección del eje principal en vertical.
• Colum-reverse: Establece la dirección del eje principal en vertical (invertido).

Por otro lado, existe otra propiedad llamada flex-wrap con la que podemos especificar el comportamiento del contenedor respecto a evitar que se desborde (nowrap, valor por defecto) o permitir que lo haga, en cuyo caso, estaríamos hablando de un contenedor flexbox multilinea.

• nowrap: Establece los ítems en una sola línea (no permite que se desborde el contenedor).
• wrap: Establece los ítems en modo multilínea (permite que se desborde el contenedor).
• wrap-reverse: Establece los ítems en modo multilínea, pero en dirección inversa.

1.3 Propiedades de alineación

Ahora que tenemos un control básico del contenedor de estos ítems flexibles, necesitamos conocer las propiedades existentes dentro de flexbox para disponer los ítems dependiendo de nuestro objetivo. Vamos a echar un vistazo a 4 propiedades interesantes para ello, la primera de ellas actua en el eje principal, mientras que el resto en el eje secundario:

• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly (Eje 1)
• align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch (Eje 2)
• align-items: flex-start | flex-end | center | stretch | baseline (Eje 2)
• align-self: auto | flex-start | flex-end | center | stretch | baseline (Eje 2)

De esta pequeña lista, hay que centrarse en primer lugar en la primera y la tercera propiedad, que son las más importantes (las otras dos son casos particulares que explicaremos más adelante):

• justify-content: Se utiliza para alinear los ítems del eje principal (por defecto, el horizontal).
• align-items:Usada para alinear los ítems del eje secundario (por defecto, el vertical).

Consejo: para profundizar mejor cada propiedad sobre el eje principal y secundario consulta la biliografia a continuación.

REFERENCIAS BIBLIOGRAFICAS

Manz. (2021). Flexbox CSS. Recuperado de Lenguaje CSS: https://lenguajecss.com/css/maquetacion-y-colocacion/flexbox/

2. --- APRENDIENDO ACERCA DE LISTAS Y ENLACES ---

2.1 Listas HTML

Francesc Ricart (2020). Listas HTML. Etiquetas ol, ul, li, dl, dt, dd. [Imagen]. Recuperado de: https://francescricart.com/listas-html-ordenadas-no-ordenadas/

Las listas en HTML nos permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número, los tipos de listas son los siguientes:

• Listas ordenadas
• Listas desordenadas
• Listas de definiciones

2.1.1 Listas ordenadas

Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden, Las listas en HTML ordenadas se representan mediante el elemento OL.

Es decir --- < ol> ... < /ol>---

Cada uno de los elementos de la lista ordenada se representará mediante el elemento LI.

< ol> < li>Elemento 1 < /li> < li>Elemento 2 < /li> < li>Elemento N < /li> < /ol>

Que produciría el siguiente efecto: 1. Julio, 2. Carmen, 3. Ignacio y 4. Elena

Generalidades

• Número de inicio de la lista: start
  • El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por defecto las listas ordenadas en HTML empiezan por el número 1. De esta forma, si queremos que la lista empiece por el número 5, escribiremos el siguiente código:

    < ol start="numero"> ... < /ol>

• Tipo de lista ordenada: type

• De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar. Entre los tipos de listas que podemos representar tenemos:
  

• 1 - Listas decimales
• a - Listas alfabéticas en minúsculas
• A - Listas alfabéticas en mayúsculas
• i - Listas de números romanos en minúsculas
• I - Listas de números romanos en mayúsculas

Los valores indicados al principio son los que le podemos asignar al atributo type de la lista ordenada en HTML. Es decir: < ol type="tipo"> ... < /ol>

• Listas en orden inverso: reversed

  • En HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa. Para utilizarlo simplemente indicamos el atributo reversed sobre el elemento OL.

    < ol reversed> ... < /ol>

2.1.2 Listas Desordenadas

Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado, Para definir una lista desordenada en HTML utilizamos el elemento ul y para representar los elementos de la lista desordenada utilizamos el mismo elemento que con las listas ordenadas, es decir, el elemento li.

--Tipos de lista desordenada--

En el caso de las listas en HTML desordenadas en HTML no podemos indicarle el tipo de lista mediante HTML. En este caso tenemos que recurrir a CSS para poder indicar el tipo de lista utilizando el atributo list-style-type

2.1.3 Listas de Definiciones

Las listas en HTML de definiciones en HTML nos sirven para montar listas en las que tenemos la estructura valor y definición. Suelen ser listas para definir términos, como si fuese un diccionario, si bien pueden ser cualquier par valor-definición. Las listas en HTML de definiciones en HTML se construyen mediante el elemento dl.

< dl> ... < /dl>

En este caso, dentro de las listas en HTML de definiciones tenemos dos elementos anidados, el que representa al valor dt y el que representa a la definición dd. De esta forma la estructura de las listas de definiciones es la siguiente: (Por defecto los navegadores dejan el término y en la siguiente líne, junto con un tabulador, la definición.)

< dl> < dt>Término1 < dd>Definición 1 < dt>Término 2 < dd>Definición 2 < dt>Término N < dd>Definición N < /dl>

2.1.4 Listas Anidadas

Cuando estemos manejando listas podemos anidar unas en otras independientemente del tipo de lista que estemos anidando. Para crear listas anidadas en HTML simplemente tenemos que hacer que el elemento de una de las listas sea a su vez una lista.

Hay que tener cuidado de poner el elemento li dentro de la lista anidada, ya que si no lo ponemos estaremos generando un código incorrecto. Las anidaciones de listas puede ser de cualquier tipo de lista y sin límite de anidación.

Consejo: para profundizar mejor el tema de listas consulta la biliografia a continuación.

REFERENCIAS BIBLIOGRAFICAS

Manual Web . (2021). Listas HTML. Recuperado de Manual Web : http://www.manualweb.net/html/listas-html/

2.2 Enlaces HTML

norfipc.com (2021). Como usar enlaces, vínculos o anclajes en HTML. [Imagen]. Recuperado de: https://norfipc.com/codigos/como-usar-enlaces-vinculos-anclajes-html.php

Lo más importante de los documentos HTML son los enlaces. Ya que mediante los enlaces en HTML podemos comunicar una página con otra. De esta forma, enlazando documentos HTML podemos acabar tejiendo lo que es Internet.

Para crear un enlace en HTML utilizamos el elemento A con la siguiente sintaxis: < a>Contenido del enlace< /a>

Pero solo con esto el enlace no tendrá mucha utilidad ya que el principal objetivo del enlace es enlazar a un destino. Para poder indicar el destino de un enlace utilizamos el atributo href. En valor del atributo href puede ser cualquier URI que represente un recurso. Es decir, una página, una parte de una página, una URL genérica, un archivo,… De esta forma el enlace en HTML lo crearemos con la sintaxis: < a href="URI" > Contenido del enlace < /a>

2.2.1 Destino del enlace

Pero, ¿dónde se abre el enlace? Pues por defecto y si no hemos configurado nada en el navegador web que estemos utilizando el enlace se abre en la misma ventana en la que tengamos el enlace. Si bien, en el enlace, podemos indicar el destino que queremos darle a dicho enlace. Eso lo podemos hacer mediante el atributo target. Los posibles valores que admite el atributo target son:

• _blank: El agente de usuario intentará abrir el enlace en una nueva ventana. La nueva ventana no tendrá nombre.
• _self: El agente de usuario intentará abrir el enlace en el mismo marco donde está en código actual.
• _parent: El agente de usuario intentará abrir el enlace en el frameset inmediatamente superior al que se encuentra la página. Esto suele suceder cuando tenemos el enlace en un área de frames.
• _top: El agente de usuario intentará abrir el enlace en la ventana padre. En el caso de que exista un frameset lo eliminará y se hará con toda la ventana.
• nombre_marco: Se podrá indicar el nombre de un frame. En este caso el agente de usuario intentará abrir el enlace en el frame que coincida con el nombre. En el caso de no existir un frame con ese nombre lo abrirá en una nueva ventana, asignándole dicho nombre.

2.2.2 Título de los enlaces

El enlace en HTML, tal y como lo hemos visto hasta ahora, sirve para enlazar contra un recurso de la web: servidor, directorio, dominio,… Y lo que en mayor o menor medida describe lo que enlazamos es el contenido que encontramos entre las etiquetas A. Si bien el elemento A nos ofrece un atributo llamado title. En el atributo title podemos describir de una forma textual el destino del enlace. Esto servirá no solo al usuario para que pueda obtener más información de dónde va, si no a las máquinas a la hora de asignar un nombre a la URI sobre la que estamos enlazando.

Un ejemplo sería: < a href="http://www.manual.net" title="Web de Manuales y Tutoriales de Programación">Ir a Manual Web < /a>

2.2.3 Enlaces en HTML a una parte del documento

Hasta el momento lo que hemos visto es como montar enlaces en HTML a documentos. Ya sea porque enlazamos directamente al documento o bien porque enlazamos a un servidor o directorio que nos dará un documento.Pero otra capacidad que tenemos en HTML es la de enlazar a una parte concreta del documento. Imagina que en un documento tenemos un título y varios capítulos. Y lo que queremos hacer desde otro documento HTML o bien desde el mismo documento es enlazar directamente al inicio de un capítulo.

Consejo: para profundizar mejor acerca de marcación, enlazar en una parte del documento, enlaces con imagenes, enlaces para descargar fichero, entre otros. Consulta la biliografia a continuación.

REFERENCIAS BIBLIOGRAFICAS

Manual Web . (2021). Enlaces HTML. Recuperado de Manual Web : http://www.manualweb.net/html/enlaces-html/