Archivo de la categoría: Página Web

Una página web es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, etc

Adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web

Html, Lenguaje de programación, Página Web, Programación

Formulario

07 de octubre de 2024 secarcam

Formulario

Un formulario es necesario en cualquier página web, pues permiten al usuario enviar datos al servidor

El ejemplo más común es el formulario de registro o login

Los formularios utilizan el elemento form

Dentro de este elemento estarán los controles que componen el formulario y será de esos controles de los que se extraerá la información que recibirá el servidor

A la hora de definir un formulario debemos indicar la URL la cuál recibirá los datos y qué tipo de método HTTP queremos utilizar

Disponemos de los siguientes atributos:

id
es un identificador único, es muy útil para reconocer el elemento desde JavaScript o para procesarlo desde el servidor
name
este será el nombre del dato que será enviado con la petición HTTP, podrá ser accedido desde JavaScript o desde la URL que se indicó en el atributo action para recibir los datos en el servidor
action
normalmente contiene la URL de la aplicación que recibirá la respuesta en el servidor

Por ejemplo un script en PHP, aunque también podría ser un archivo de código JavaScript
method
tipo de método HTTP para enviar los datos al servidor

Puede ser:
- GET
  envía la información al servidor como parámetros dentro de la URL indicada en el atributo action
  
  Estos parámetros serán visibles en la barra de navegación y sólo es posible enviar hasta 500 bytes
  
  Por seguridad, se desaconseja utilizar este método, ya que los datos enviados quedan expuestos en la barra de navegación y alguien ajeno al usuario, podría manipularlos antes de ser procesados por el servidor
- POST
  envía la información al servidor en la misma petición HTTP
  
  No tiene la limitación de tamaño en los datos enviados
  
  Permite enviar archivos adjuntos y los datos enviados no son visibles en la barra del navegador
  
  Se recomienda utilizar este método por seguridad, ya que dificulta la de los datos manipulación antes de ser procesados por el servidor, aunque sigue siendo posible

Elementos input

El elemento input sirve para crear la gran mayoría de los controles que pueden usarse en un formulario

Dependiendo de sus atributos podremos crear botones, casillas de verificación e incluso adjuntar archivos

La gran mayoría de estos controles son nuevos gracias al estándar HTML5 como el control de fechas, colores, etc; y funcionan a través de cuadros de diálogo específicos para cada navegador

A causa de esta circunstancia, es posible que difieran de un navegador a otro o incluso que no sean soportados si el mismo es muy antiguo o no soporta HTML5

Dispone de atributos generales que todos los elementos input poseen y atributos específicos para cada tipo de elemento

Atributos generales:

id
es un identificador único, es muy útil para reconocer el elemento desde JavaScript o para procesarlo desde el servidor
name
este será el nombre del dato que será enviado con la petición HTTP, podrá ser accedido desde JavaScript o desde la URL que se indicó en el atributo action para recibir los datos en el servidor
type
es el tipo específico de control, este atributo le dice al navegador qué debe pintar en pantalla y qué atributos adicionales podría contener

Así que es importante que si tiene atributos específicos para ese tipo, los elijamos correctamente o el navegador los ignorará al no entenderlos
form
identificador del formulario, enlaza el control con el formulario mediante el valor de su atributo id

Atributos específicos:

checked
indica que el control ha sido seleccionado

Se utiliza sólo con las casillas de selección y las casillas de opción
autocomplete
indica al navegador que complete el campo con los datos introducidos por el usuario anteriormente

No puede utilizarse ni con las casillas de selección, ni con las casillas de opción, ni con los botones
list
sirve para definir una lista de valores por defecto que se mostraran al usuario como posibles entradas al usuario

No puede utilizarse ni con las casillas de selección, ni con las casillas de opción, ni con los botones

Se utiliza asociando el identificador del control a un elemento datalist en el cuál enumeraremos los elementos que componen la lista

Estos valores son de sólo lectura, el usuario no puede modificarlos ni añadir nuevos

El elemento datalist no tiene asociada ninguna visualización, sin embargo puede asociarse mediante su id un elemento label con el que podremos visualizar el valor elegido de la lista
maxlenght
indica la longitud máxima que podemos utilizar en el texto introducido

Se utiliza con los controles de cuadro de texto o aquellos similares a él (text, password, email, url, tel, search, etc)
placeholder
permite añadir un texto por defecto para dar una idea al usuario del tipo de control que es o de qué se espera que introduzca en el mismo

Cuando se utiliza, no suele usarse el elemento label
pattern
indica una expresión regular que será utilizada por el navegador para validar el valor introducido en el campo

En caso de que el valor introducido no se ajuste a la expresión regular, mostrará un mensaje de error al usuario indicandolo

Se utiliza con los controles de cuadro de texto o aquellos similares a él (text, password, email, url, tel, search, etc)
multiple
se utiliza con los tipos email y file

Permite incluir más de una dirección de correo electrónico o adjuntar más de un archivo
readonly
impide que el campo sea modificado por el usuario

El navegador lo mostrará ensombrecido para indicar al usuario que no puede ser modificado

El valor del campo se recogerá obligatoriamente del atributo value, por lo que es necesario que tenga algún valor
required
indica al navegador que el campo es obligatorio que tenga algún valor

Es muy útil para realizar validaciones porque en caso de que el campo no haya sido rellenado, mostrará un mensaje de error al usuario

Cuadros de texto

Para crear un cuadro de texto al atributo type le asignaremos el valor text

Dispone del atributo específico value en el cuál se guardará el valor por defecto que será mostrado al usuario

No tiene etiqueta de cierre

<form>
    <input type='text' id='texto' name='Texto' value='Escribe algo aquí' />
</form>

En el ejemplo se ha especificado un esqueleto de formulario sin atributos, ya que no necesitamos que sea funcional para mostrar los distintos controles. Lo vamos a hacer con todos los ejemplos a partir de ahora

También se ha incluido un control de cuadro de texto con el atributo value con el valor por defecto Escribe algo aquí

Es una buena practica rellenar este valor para que el usuario tenga una ayuda visual de qué se espera que rellene en el control

Quedando como resultado:

También podemos utilizar el elemento datalist para mostrar al usuario una lista de valores por defecto como posibles entradas al control de texto

<form>
    <input type='text' id='texto' name='Texto' list='opciones'/>
    <datalist id='opciones'>
        <option label='Red' value='Red' >
        <option label='Green' value='Green' >
        <option label='Blue' value='Blue' >
    </datalist>
</form>

En el ejemplo se ha especificado una lista de colores que mediante el atributo list cuyo valor es el atributo id del datalist

Además podemos usar el atributo label para que se visualice una etiqueta con el contenido del valor seleccionado

Una vez seleccionado un valor, podemos comprobar que no podemos modificarlo ni añadir un valor nuevo, pero si borrarlo para elegir otro valor de la lista

Quedando como resultado:

Etiquetas descriptivas

En el ejemplo anterior veíamos como crear un cuadro de texto, pero para el usuario podría no quedar claro qué se esperaba que rellenase en el control

Para solucionarlo usamos el atributo value para mostrarle un valor por defecto

Pero podemos hacerlo mediante una etiqueta descriptiva, mediante el elemento label

Una etiqueta label estará asociada siempre a un elemento input

Podemos utilizar dos métodos para realizar esta asociación:

insertando el control dentro de la etiqueta label

<form>
    <label>Nombre: <input type='text' id='texto' name='Texto' value='Escribe algo aquí' /></label>
</form>

Quedando como resultado:

utilizando su atributo for que tendrá como valor el atributo id del control que queremos asociarle

<form>
    <label for='texto'>Nombre: </label><input type='text' id='texto' name='Texto' value='Escribe algo aquí' />
</form>

Quedando como resultado:

Contraseñas

Es similar al cuadro de texto pero para crear una contraseña al atributo type le asignaremos el valor password

<form>
    <label for='pass'>Contraseña: </label><input type='password' id='pass' name='Pass' pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}' />
</form>

En el ejemplo podemos ver que la principal característica de este control es que el contenido del cuadro de texto se camufla

Sin embargo, si utilizamos el método GET esa contraseña será visible en la barra del navegador

Por eso es aconsejable usar el método POST si vamos a introducir contraseñas

Tambien se ha incluido el atributo pattern que corresponde con una expresión regular que añade más seguridad en la validación si no cumple el formato de la expresión

En la expresión del ejemplo se ha forzado que al menos haya un número, una letra en minúscula, otra en mayúscula y que su longitud sea de ocho caracteres

Quedando como resultado:

Correo electrónico

Es similar al cuadro de texto pero para crear un correo electrónico al atributo type le asignaremos el valor email

<form>
    <label for='mail'>Email: </label><input type='email' id='mail' name='Mail' pattern='[a-z0-9]+@[a-z0-9]+\.[a-z]' />
</form>

En el ejemplo podemos ver que la principal característica de este control es que el contenido del cuadro de texto se valida y si se introduce una dirección de correo no válida, el navegador mostrará un mensaje de error

Tambien se ha incluido el atributo pattern que corresponde con una expresión regular que añade más seguridad en la validación si no cumple el formato de la expresión

En la expresión del ejemplo se ha forzado que al menos haya un número o una letra en minúscula antes de la @, al menos haya un número o una letra en minúscula antes del . y dos o tres letras despues del .

Quedando como resultado:

URL

Es similar al cuadro de texto pero para crear una URL al atributo type le asignaremos el valor url

<form>
    <label for='url'>URL: </label><input type='url' id='url' name='Url' />
</form>

En el ejemplo podemos ver que la principal característica de este control es que el contenido del cuadro de texto se valida y si se introduce una URL no válida, el navegador mostrará un mensaje de error

Quedando como resultado:

Teléfono

Es similar al cuadro de texto pero para crear un teléfono al atributo type le asignaremos el valor tel

<form>
    <label for='tel'>Teléfono: </label><input type='tel' id='tel' name='Tel' />
</form>

En el ejemplo podemos ver que no hay ninguna diferencia significativa con respecto al cuadro de texto

Sólo podría aparecer algún icono o imagen especial generada por el navegador o mediante una hoja de estilo CSS

Quedando como resultado:

Búsqueda

Es similar al cuadro de texto pero para crear una búsqueda al atributo type le asignaremos el valor search

<form>
    <label for='search'>Búsqueda: </label><input type='search' id='search' name='Search' />
</form>

En el ejemplo podemos ver que no hay ninguna diferencia significativa con respecto al cuadro de texto

Sólo podría aparecer algún icono o imagen especial generada por el navegador o mediante una hoja de estilo CSS

Quedando como resultado:

Casillas de verificación

Para crear un conjunto de casillas de verificación al atributo type le asignaremos el valor checkbox

En este caso, el valor que aparece junto al botón será el mismo del atributo name y hay que usar el mismo para formar el grupo de selección exclusiva

No tiene etiqueta de cierre

<form>
    <label>Sexo</label>
    <label for='man'>Man:</label><input type='checkbox' id='man' name='sex' />
    <label for='woman'>Woman:</label><input type='checkbox' id='woman' name='sex' checked />
</form>

En el ejemplo se ha especificado la elección de sexo y se ha marcado el sexo Woman por defecto usando la palabra reservada checked

Quedando como resultado:

Hay que tener en cuenta que si marcamos una casilla permanecerá marcada hasta que volvamos a desmarcarla, si queremos el efecto de que se desmarquen las opciones no elegidas, deberemos usar JavaScript

Casillas de opción

Para crear un conjunto de casillas de opción al atributo type le asignaremos el valor radio

En este caso, el valor que aparece junto al botón será el mismo del atributo name y hay que usar el mismo para formar el grupo de selección exclusiva

No tiene etiqueta de cierre

<form>
    <label>Colores</label>
    <label for='red'>Red:</label><input type='radio' id='red' name='color' />
    <label for='green'>Green:</label><input type='radio' id='green' name='color' checked />
    <label for='blue'>Blue:</label><input type='radio' id='blue' name='color' />
</form>

En el ejemplo se ha especificado un grupo de colores y se ha marcado el color Green por defecto usando la palabra reservada checked

Quedando como resultado:

Botones

Los botones normalmente se utilizan para controlar el envío y reinicio del formulario

Podemos añadir nuevas funcionalidades a nuestro formulario usando los botones para activarlas al pulsarlos

Para ello usaremos o una imagen o un botón genérico al que luego le asignaremos JavaScript o usaremos Jquery para facilitarnos la programación

Para crear un botón al atributo type le asignaremos el valor button

No tiene etiqueta de cierre

<form>
    <input type='button' id='button' name='Button' value='Botón genérico' onclick='alert("Has pulsado el botón");'/>
</form>

En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo

Y el atributo onclick que es un evento que permite al botón ejecutar código JavaScript, en este caso un aviso para el usuario de que el botón ha sido pulsado

Quedando como resultado:

Enviar el formulario

Para crear un botón para enviar el formulario al atributo type le asignaremos el valor submit

No tiene etiqueta de cierre

<form>
    <input type='submit' id='submit' name='Submit' value='Enviar' />
</form>

En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo

Este ejemplo no enviará nada al servidor porque no se han usado los atributos action indicandole la URL de destino ni method indicando el método GET o POST

Quedando como resultado:

También podemos simular el comportamiento de un botón submit a partir de una imagen

<form>
    <input type='image' id='imagesubmit' name='ImageSubmit' src='/wp-content/uploads/2019/09/server_go.png' />
</form>

En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo

Este ejemplo no enviará nada al servidor porque no se han usado los atributos action indicandole la URL de destino ni method indicando el método GET o POST

Quedando como resultado:

Resetear el formulario

Para crear un botón para resetear el formulario al atributo type le asignaremos el valor reset

No tiene etiqueta de cierre

<form>
    <label for='texto'>Nombre: </label><input type='text' id='texto' name='Texto' value='Escribe algo aquí' />
    <input type='reset' id='reset' name='Reset' value='Reiniciar' />
</form>

En el ejemplo se ha usado el atributo value para mostrar al usuario un texto y pueda reconocerlo

Si escribimos algo en el cuadro de texto podremos comprobar que si pulsamos el botón reiniciar el contenido del cuadro de texto vuelve a ser su valor por defecto

Quedando como resultado:

Adjuntar archivos

Para crear un botón que permita adjuntar archivos al atributo type le asignaremos el valor file

Este botón sólo será útil si hemos elegido el método POST y hayamos incluido al elemento form el atributo enctype=’multipart/form-data’

Además del botón aparece una etiqueta con el estado del archivo adjunto, que nos dirá si hay un archivo adjunto y en caso de haberlo su nombre y extensión

Al pulsar el botón se abrirá un explorador de archivos del sistema del usuario con el que podrá seleccionar el archivo que desea adjuntar

No tiene etiqueta de cierre

<form name='formfile' method='POST' enctype='multipart/form-data' >
    <label for='file'>Adjuntar una imagen: </label><input type='file' id='file' name='image' acept='image/jpeg, image/png' />
</form>

En el ejemplo se adjunta una imagen al formulario aunque no es funcional porque no se ha añadido el atributo action ni tiene un botón para enviar el formulario

Se ha usado el atributo acept para indicarle al navegador qué tipos MIME puede recibir el navegador cuando pulsemos el botón

En este caso sólo puede recibir imagenes de tipo jpeg y png

Quedando como resultado:

Números

Para crear un cuadro que fuerce al usuario introducir un número al atributo type le asignaremos el valor number

No tiene etiqueta de cierre

<form>
        <label for='number'>Número: </label><input type='number' id='number' name='Number' min='0' max='10' step='2' value='0' />
</form>

En el ejemplo se han usado los atributos:

min
valor numérico mínimo que admite el cuadro
max
valor numérico máximo que admite el cuadro
step
controla el incremento en los números, si se omite, por defecto es 1
value
valor numérico por defecto

Quedando como resultado:

Rangos

Para crear un rango de números que fuerce al usuario introducir un número aproximado al atributo type le asignaremos el valor range

No tiene etiqueta de cierre

<form>
    <label for='range'>Rango: </label><input type='range' id='range' name='Range' min='1' max='5' step='1' value='3' />
</form>

En el ejemplo se han usado los atributos:

min
valor numérico mínimo que admite el rango
max
valor numérico máximo que admite el rango
step
controla el incremento en los números, si se omite, por defecto es 1
value
valor numérico por defecto

Quedando como resultado:

Paleta de colores

Para asignar un color a partir de una paleta al atributo type le asignaremos el valor color

No tiene etiqueta de cierre

<form>
    <label for='color'>Color: </label><input type='color' id='color' name='Color' value='#FF0000' />
</form>

En el ejemplo se ha utilizado en el atributo value el valor por defecto hexadecimal #FF0000

Quedando como resultado:

Calendario

Para asignar una fecha a partir de un calendario al atributo type le asignaremos el valor date

No tiene etiqueta de cierre

<form>
    <label for='date'>Date: </label><input type='date' id='date' name='Date' step='1' min='2019-01-01' max='2019-12-31' value='2019-01-01' />
</form>

En el ejemplo se han usado los atributos:

min
valor de fecha mínima que admite el rango de fechas
max
valor de fecha máxima que admite el rango de fechas
step
controla el incremento de fechas en el calendario, si se omite, por defecto es 1
value
valor de fecha por defecto

Hay que tener en cuenta que el formato para fechas que admite el control es AAAA-MM-DD, es decir, A para un año con 4 dígitos, M para un mes de 2 dígitos y D para un día de 2 dígitos todos ellos separados con el símbolo –

Quedando como resultado:

Oculto

En ocasiones hay información que el desarrollador no quiere que el usuario sea capaz de ver, para ello se usan los campos ocultos

Son campos que el usuario no puede ver, pero que son enviados junto al formulario al servidor

Para asignar campo oculto al atributo type le asignaremos el valor hidden

No tiene etiqueta de cierre

<form>
    <input type='hidden' id='session' name='Session' value='1' />
    <input type='hidden' id='machine' name='Machine' value='Win32' />
    <input type='hidden' id='navigator' name='Navigator' value='Chrome' />
</form>

En el ejemplo se envian tres campos ocultos dando al servidor información sobre el cliente, sin que aparezca esa información en el navegador del usuario

Quedando como resultado:

No deberíamos poder ver ninguno de los campos ocultos en el navegador, pero si usamos la opción de nuestro navegador Ver código, podremos ver que efectivamente, esos campos existen

Cuadro de texto de varias líneas

Es similar al cuadro de texto pero permite escribir más de una línea para ello utilizaremos el elemento textarea

<form>
    <label for='textarea'>Comentarios: </label>
    <textarea id='textarea' name='TextArea' rows='4' cols='50' maxlenght='100'>Escribe aquí tu comentario</textarea>
</form>

En el ejemplo podemos ver que la diferencia más significativa con respecto al cuadro de texto es que podemos usar más de una línea

Además hemos especificado con el atributo rows el número de filas a 4, con el atributo cols el número de columnas a 50 y con el atributo maxlength el máximo de caracteres a 100

Quedando como resultado:

Listas de selección

El elemento select sirve para crear una lista desplegable de selección

Su esquema es muy similar a los cuadros de texto, aunque su contenido no puede ser modificado, sólo seleccionado

Los elementos option forman la lista y al servidor se enviará en valor de su atributo value

<form>
    <label for='select'>Selecciona un color</label>
    <select id='select' name='select'>
        <option value='red'>Red</option>
        <option value='green' selected>Green</option>
        <option value='blue'>Blue</option>
    </select>
</form>

En el ejemplo se ha especificado una lista de selección de colores y se ha marcado el color Green por defecto usando la palabra reservada selected

Quedando como resultado:

Agrupaciones de elementos

El elemento fieldset sirve para agrupar elementos relacionados

<form>
    <legend>Login de Usuario</legend>
    <label for='user'>Usuario: </label><input type='text' id='user' required />
    <label for='pass'>Contraseña: </label><input type='password' id='pass' required />

    <input type='submit' id='submit' name='Submit' value='Enviar'>
</form>

En el ejemplo creado un grupo para contener el control de acceso de usuario mediante login

Se ha usado el elemento legend que sirve de título o leyenda del grupo

Se ha usado el atributo required para que los campos user y pass sean obligatorios y si tratamos de enviar el formulario, el navegador nos mostrará un mensaje de error

El resultado es un cuadro que contiene todos los controles y que tiene como título Login de Usuario

Quedando como resultado:

Html, Lenguaje de programación, CSS, Programación, Página Web

CSS

07 de octubre de 2024 secarcam

CSS

Las Hojas de estilo en cascada (Cascading Style Sheets, CSS), son un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado, normalmente páginas web escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etc. También permite aplicar estilos no visuales, como las hojas de estilo auditivas

Una hoja de estilos no es más que un archivo de texto con extensión .css. Aunque las hojas de estilo se definieron a mediados de los años noventa, han tenido especial repercusión a partir de su última versión (CSS3), en combinación con HTML5

Se pueden aplicar distintas hojas de estilo dependiendo del dispositivo en el que mostremos nuestra página web (una pantalla grande, un móvil, papel impreso, etc)

Integración de estilos en una página

Existen varias formas de integrar estilos en una página. Pero normalmente usaremos una de estas dos:

Incluida como etiqueta que forma parte del HTML
```
<p style="color: red;">texto</p>
```
El problema de esta opción es bastante obvio. Si en un futuro quisiéramos modificar el color de los párrafos que contienen el texto, tendríamos que buscar uno por uno todas las apariciones y cambiarlos manualmente

Definida como una regla de estilo en la cabecera

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type="text/css">
            p { color: red; }
        </style>
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>

En una página web real usaremos más de una regla de estilo, por lo que tampoco será una buena opción añadirlas una a una en la cabecera

Definida con la etiqueta <link> a un fichero externo

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel="stylesheet" type="text/css" href="./css/fichero.css">
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>

Normalmente usaremos más de una regla de estilo, por lo que será una buena opción añadirlas desde un fichero externo de extensión .css y enlazarlas en la cabecera del HTML con la etiqueta <link>

Estructura de una hoja de estilo

Una hoja de estilo define una o más reglas que se aplicarán a los elementos que cumplan dicha regla

Cada regla se compone de dos partes:

Selector: indica a qué elementos vamos a aplicarle la regla. Pueden escribirse más de un selector para la misma regla separados por comas
Lista de declaraciones: los estilos que se van a aplicar a los elementos que cumplan la regla. Corresponden a un par propiedad:valor, separados por punto y coma

p {
    color: red;
    font-family: Verdana;
    text-aling: center;
}

En el ejemplo se ha definido una regla que se aplica a todos los elementos p de párrafo del HTML. Además el texto se ha definido de color rojo, su fuente como Verdana y su alineación de párrafo es centrada

De forma adicional, podemos añadir comentarios, que aparecerán escritos entre /* y */

También podremos añadir directivas at (que empiezan por @), las cuales modifican la forma de aplicar las reglas

El árbol DOM

El document object model (DOM) es la representación estructurada, en forma de árbol, de todos los elementos escritos en un documento HTML

Por ejemplo, cualquier documento HTML empieza por la etiqueta , conteniendo además las etiquetas y , con su respectivas etiquetas de cierre

Por su parte, dentro de la cabecera (etiqueta <head>) contendrá a su vez elementos con las etiquetas <meta>, <link>, <title>, etc

Y el cuerpo (etiqueta <body>), contendrá a su vez más elementos y así sucesivamente hasta llegar a sus etiquetas de cierre

A la estructura jerárquica resultante en informática se la denomina árbol

En concreto, el árbol que representa la estructura de un documento HTML es el DOM

Gracias a esta estructura en forma de árbol, podemos identificar de forma única cada elemento del documento HTML, según cómo estén relacionados entre sí esos elementos, podremos aplicarles distintas reglas de estilo

Las relaciones que podemos identificar son:

Descendientes: son todos los elementos contenidos (directa o indirectamente) por un elemento
Por ejemplo, <head>, <meta> o <body> son descendientes de <html>
Hijo directos: son los descendientes de primer nivel
Por ejemplo, <head> es hijo de <html>
Hermanos: descendientes que tienen un padre común
Por ejemplo todos los elementos <meta> son hermanos entre si

Gracias a estas relaciones dentro del DOM, en el ejemplo que usamos anteriormente que afectaba sólo a los elementos <p>, podríamos aplicárselo también a los elementos contenidos en una división <div> que contuviera una clase o un identificador concreto

O podríamos crear reglas para los hermanos con los que compartiera un nodo

Apoyándonos en el lenguaje JavaScript y en el DOM, podremos modificar el contenido de los elementos una vez cargada la página web en el navegador

Cascada de estilo

Gracias al DOM podemos identificar los elementos concretos de un documento HTML y por eso podemos aplicarle las hojas de estilo

Una hoja de estilos puede contener diferentes reglas que configuren el mismo elemento, incluso podemos tener varias hojas de estilo con reglas contradictorias

body {
    background-color: black;
    color: red;
}

p {
    color: blue;
}

En este ejemplo, nuestras reglas dicen que para todo elemento del <body>, incluidos sus descendientes, se le van a aplicar el color de fondo negro y el color de texto rojo

En la siguiente regla, le indicamos que en el elemento <p> de párrafo, el texto ha de ser de color azul

El documento final tendrá todos los elementos de color de fondo negro y el texto de color rojo, pero además los párrafos tendrá color azul

Las reglas se han ido aplicando unas sobre otras, en forma de cascada. Por eso tienen el nombre de cascadas de hojas de estilos (cascade style sheets, CSS)

En general, los estilos se heredan. Primero se establecen la propiedad del elemento padre y sus descendientes los heredan, para finalmente aplicar los suyos, que a su vez son heredados por sus descendientes, hasta que llegar al último nodo de descendientes de la hoja de estilos

En el caso de que tengamos dos elementos que son hermanos y haya conflicto por ver quien hereda qué propiedad, se aplica el más específico y en el caso de que tengan las mismas propiedades, se aplicará el último estilo definido

Es decir, si una regla está definida en dos hojas de estilo externas, se aplicará la regla de la hoja que se incluyó más tarde en el documento HTML. Por eso, el orden en el que las incluyamos es muy importante

Primero incluiremos las hojas más generales y después aquellas que sean más específicas

En el caso de haber incrustado en el HTML alguna regla, el estilo que se ha definido, será el que tendrá mayor prioridad que la regla que esté incluida en la cabecera del HTML

Resumiendo, se aplicarán las siguientes prioridades a la hora de aplicar una regla a un elemento concreto:

Se buscan todas las declaraciones aplicables al elemento
Si no existen reglas, se usará el valor heredado

Si no hubiera valor heredado, el navegador aplicará el valor por defecto
Si existen reglas, se aplicará la de mayor prioridad de acuerdo a los siguientes criterios:
- Se asigna un peso según su origen: hoja de estilos del autor, del usuario o del navegador
- Atributos con la palabra clave !important: tendrán mayor prioridad
- Selectores específicos: tendrán mayor prioridad
- Dos reglas con la misma prioridad: se aplica la indicada en último lugar

CSS Reset

Cada navegador posee su propia hoja de estilos por defecto

Esto implica que el estilo por defecto de algunos elementos puede ser diferente para cada navegador

Por esta razón es recomendable realizar un reinicio de los estilos aplicados a los elementos añadiendo una CSS especial (la CSS Reset) al principio de nuestras páginas web

Existen múltiples CSS que realizan esta tarea (como las utilizadas en los frameworks de Yahoo YUI, HTML5 BoilerPlate o Normalize), pero uno de los más populares es la de Eric Meyer considerado como uno de los gurús de las CSS

Para añadirla sólo has de guardar el archivo en la carpeta css contenida en la raíz de tu sitio web y definirla con la etiqueta <link> en la cabecera de tu HTML:

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>

Html, Lenguaje de programación, CSS, Página Web, Programación

Selectores

07 de octubre de 2024 secarcam

Selectores

Los selectores sirven para identificar los elementos a los que se aplicará el formato definido en la lista de declaraciones

Hay distintos tipos de selectores que pueden ser utilizados para definir las reglas CSS

Vamos a describirlos de los más generales a los más específicos (desde el punto de vista de menor a mayor prioridad)

Selector Universal

Se define con * y se aplica a todos los elementos de la página:

* {
    margin: 0;
    font-family: Verdana;
}

En el ejemplo se han configurado los márgenes y la fuente del texto, que suelen ser algunas de las reglas más usadas

Selector de etiqueta HTML

Indica el estilo que se va a aplicar a un elemento o una etiqueta concreta

Su hay más de uno, serán separados por comas

h1, h2, h3, h4, h5 {
    font-size: large;
}

En el ejemplo se han configurado las etiquetas 1 a 5 de título, aplicándoles la fuente del texto de tamaño grande

Como puede apreciarse, podemos prescindir de < y de > de la etiqueta

Selector de clase

Algunos elementos HTML tienen el atributo class que indica que las clases a las cuales pertenece el elemento

Este atributo nos permite tratar a esa «clase» de elemento de una manera concreta, tanto en la aplicación de estilos CSS como en su comportamiento mediante programación con JavaScript

Para aplicar el selector de clase, usaremos etiqueta.class

.cabecera{
    color: blue;
}

En el ejemplo se han configurado el texto en color azul para todos los elementos de la clase cabecera, ya que si no especificamos una etiqueta, se usará por defecto el selector universal *

h1.cabecera{
    text-aling: center;
}

En el ejemplo se han configurado la alineación del texto centrada solo para los elementos de la clase cabecera que pertenecen a la etiqueta de título <h1>

Debemos tener especial cuidado en no dejar espacios entre la etiqueta, el punto y el nombre de la clase, ya que ese espacio es significativo, como veremos más adelante

Selector de identificador

Algunos elementos HTML tienen el atributo id que indica que ese identificador único pertenece a ese elemento concreto

Para aplicar el selector de identificador, usaremos etiqueta#id

Al igual que con las clases, es muy importante el uso de los espacios

p#destacado{
    background-color: yellow;
}

En el ejemplo se han configurado el color de fondo del texto como amarillo, en aquel párrafo que tenga el identificador destacado

Selectores descendientes y adyacentes

Estos selectores permiten seleccionar elementos contenidos dentro de otros de acuerdo a la estructura del árbol DOM

Aquí es donde toman importancia los espacios, ya que si separamos dos selectores con un espacio, entonces estaremos aplicando la regla a todos los descendientes del primer selector

section p{
    text-font: Verdana;
}

En el ejemplo se han configurado la fuente del texto como Verdana para todos los elementos <p> que son descendientes del elemento <section > (recordemos que pueden ser los descendientes de cualquier nivel, ya que esa regla será heredada)

Se pueden mezclar indistintamente selectores descendientes de clase o de identificador

section .error{
    color: red;
}

En el ejemplo se han configurado el color del texto como rojo para cualquier elemento de la clase error que sea descendiente del elemento

Si en vez de aplicarlo a todos los descendientes queremos que sólo se aplique a los descendientes directos (los hijos), entonces usaremos el simbolo >

section>p{
    text-font: Verdana;
}

En el ejemplo se han configurado la fuente del texto como Verdana sólo para los elementos <p> que son hijos del elemento <section >

También podemos seleccionar los elementos hermanos, es decir, aquellos que aparecen justo después de otros elementos, entonces usaremos el simbolo +

h1 + p{
    text-indent: 1.5em;
}

En el ejemplo se han configurado la indentación del primer párrafo que aparece justo después de la etiqueta de título <h1>

Selectores de atributos

Estos selectores se utilizan para seleccionar elementos en función de sus atributos

Hay de cuatro tipos:

[atributo]: elementos que tienen un atributo llamado atributo independientemente de su valor
[atributo=valor]: elementos que tienen un atributo llamado atributo con el valor especificado
[atributo^=valor]: elementos que tiene un atributo llamado atributo y cuyo valor empieza por el valor especificado
[atributo$=valor]: elementos que tienen un atributo llamado atributo y cuyo valor termina con el valor especificado

a {
    color: red;
}

a[href^https] {
    color: blue;
}

En el ejemplo se han configurado un enlace que queremos en un color distinto si lleva a una url con HTTP seguro

Pseudoclases

Existen selectores especiales para especificar elementos que tienen unas determinadas propiedades

Son clases virtuales, ya que no se especifican en el HTML, pero representan las posiciones o estados en los que se puede encontrar un elemento mientras se visualiza en el navegador

ul li:first-child {
    color: green;
}

En el ejemplo se han configurado para que se aplique solo si un elemento es el primer hijo de su padre, para ello hemos usado la pseudoclase first-child, solo el primer elemento <li> de una lista de viñetas (<ul>) aparecerá en color verde

Existen otras pseudoclases que nos ayudarán a seleccionar a un hermano concreto de entre los hijos de un elemento:

:nth-child(n) : representa el n-ésimo hermano
Permite incluir una forma más compleja como:
- :nth-child(even) : que representa los hijos que ocupan posiciones pares
- :nth-child(odd) : que representa los hijos que ocupan posiciones impares
(por ejemplo para hacer que las filas impares de una tabla tengan distinto color de fondo y tener un efecto cebreado en una tabla)
:nth-last-child(n) : similar al anterior, pero empezando a contar desde el final

Hay también pseudoclases dinámicas, que indican el estado de los elementos cuando el usuario interactúa con ellos:

:hover : se utiliza para establecer el estilo cuando el usuario coloca el ratón sobre el elemento
:active : se utiliza para establecer el estilo cuando el usuario pincha sobre el elemento o mantiene el botón del ratón pulsado sobre él
:focus : se utiliza para establecer el estilo cuando el elemento tiene el foco

También son muy típicas las pseudoclases relacionadas con los los enlaces:

a:link : establece el estilo del enlace cuando aún no se ha visitado o cuando el usuario aún no lo ha pulsado
a:hover : establece el estilo cuando el usuario coloca el ratón sobre el elemento de enlace
a:active : establece el estilo cuando el usuario pincha sobre el enlace
a:visited : establece el estilo cuando el usuario ya lo ha visitado

a:link {
    color: green;
    text-decoration: none;
}
a:visited {
    color: red;
}
a:hover {
    color: blue;
}

En el ejemplo se han configurado el estado de los enlaces sin visitar, visitados o cuando pasemos el ratón sobre ellos

Al usar este CSS, los enlaces del documento aparecerán sin subrayar y en verde

Al situar el ratón sobre ellos pararán a azul y, una vez visitados, pasarán a rojo

Ejemplo de Selectores en acción

En el siguiente ejemplo se ha incluido una página HTML y varios de los selectores explicados anteriormente

Puedes comprobar el resultado visualizándolo por ti mismo en tu navegador y si no utilizas un CSS reset, podrías tener resultados distintos en otros navegadores

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de ejemplo</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/ejemploSelectores.css" />
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <header>
             Ejemplo de Selectores en acción <span> en este caso CSS3</span>
        </header>
        <nav>
            <a href="index.html">Inicio</a>
            <a href="info.html">Información</a>
            <a href="login.html">Acceso</a>
        </nav>
        <div id="index">
            <article>
                <p>Las tecnologías más utilizadas en el front-end son:</p>
                <ul class="cebreada">
                   <li>HTML5</li> 
                   <li>CSS</li>
                   <li>JavaScript</li>
                   <li>Jquery</li>
                </ul>
            </article>
            <aside>Barra lateral</aside>
        </div>
        <footer>Este es el pie de página</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Ahora mostramos el contenido del fichero ejemploSelectores.css

* {
    margin: 0;
    font-family: Verdana;
}

header {
    height: 10%;
    bacground-color: lightblue;
    font-size: 30px;
}

header>span {
    font-size: 20px;
    color: grey;
    margin-left: 20px;
}

nav {
   background-color: lightgray;
   padding: 5 px;
}

nav a {
    margin-left: 15px;
    padding: 5px;
    background-color: white;
}

nav a:first-child {
    background-color: darkgray;
}

a {
   text-decoration: none;
   color: blue;
}

a:visited {
    color: lightblue;
}

a:hover {
   background-color: beige;
}

a[href^=https] {
   font-style: italic;
}

#index {
   display: flex;
   align-items: stretch;
}

article {
   width: 80%;
   bacground-color: lemonchiffon;
   min-height: 80%;
}

ul.cebreada {
   list-style-type: none;
   width: 100%;
   text-align: center;
}

ul.cebreada>li:nth-child(odd) {
   background-color: beige;
}

aside {
   width: 20%;
   bacground-color: lightsalmon;
   min-height: 80%;
}

footer {
   bacground-color: lightgreen;
   height: 5%;
}

Html, CSS, Lenguaje de programación, Página Web, Programación

Posicionamiento de elementos

07 de octubre de 2024 secarcam

Posicionamiento de elementos

El posicionamiento ‘clásico‘ de elementos se basa en el modelo de bloques, los cuales se van colocando para llenar el espacio de la página de izquierda a derecha y de arriba abajo

Sin embargo, este modelo no se adapta bien en los dispositivos móviles, donde nos encontraremos con problemas con el tamaño, la orientación en el navegador e incluso en la reordenación de los elementos para que se ajusten al tipo de dispositivo

Para solucionar estos problemas apareció el modelo de posicionamiento flexible, el cual simplifica esas tareas considerablemente

Sin embargo, este modelo es demasiado detallado para organizar la estructura general de la página web

Por esa razón, se está imponiendo el modelo de rejilla, el cual divide el espacio en una rejilla virtual y crea una matriz dividida en celdas dentro de esa rejilla, asignando los elementos a una celda concreta que ocuparan tantas celdas adicionales dependiendo del tamaño y orientación del dispositivo

Estos dos modelos admiten además el denominado diseño adaptativo (responsive desing), el cual permite que nuestra página web se adapte al dispositivo en el que será visualizada: teléfonos inteligentes, tabletas o PCs de escritorio

Modelo de bloque

Las cajas de los elementos se colocan por defecto siguiendo el ‘flujo normal‘, es decir, empujando las cajas hacia la izquierda y hacia arriba

Puede utilizarse la propiedad position para modificar el ‘flujo normal‘:

position: static es el modo de posicionamiento por defecto
La caja ocupará la posición del ‘flujo normal‘
position: relative utilizando la propiedades top, right, bottom y left desplazamos su posición
Estas dimensiones indican el espaciado que se deja a cada lado de acuerdo con la posición original de la caja
El resto de las cajas no se ven afectadas por este desplazamiento, por lo que respetan su espacio reservado
position: absolute se elimina la caja del flujo normal y se coloca la nueva caja en una posición fija con respecto a su caja contenedora
Admite las propiedades top, right, bottom y left
Puede superponerse a otros elementos porque no se respeta su espacio reservado
position: fixed similar al posicionamiento absolute, pero se especifica la posición con respecto a la ventana
Esto implica que la caja mantiene su posición y que no se moverá cuando se use la barra de desplazamiento
position: float la caja se desplazará hacia un lado usando la propiedades left o right, desplazandola hacia uno de los extremos de la caja contenedora o hasta la primera caja flotante que encuentre en esa dirección
Puede superponerse a otros elementos que no sean cajas flotantes
clear sólo será aplicable si hay cajas flotantes, fuerza a que el elemento se muestre debajo de la caja flotante de un determinado tipo con las propiedades left o right; o de cualquiera con both

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='a'></div>
       <div id='b'>
           <div id='c'></div>
       </div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Maoires est voluptas dolorem quod id neque
       esse doloribus saepe ut reprehenderit possimus fugit.
       Laudantium distinctio doloribus repellendus quibusdam
       voluptatem recusandae aut</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Doloremque nam illum eveniet iste commodi culpa
       vel quibusdam sint veniam itaque provident sed ipsum
       reiciendis labore beatae impedit vitae earum aut</p>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body> 
</html>

Vamos a usar este html de ejemplo para poder comprobar el uso del modelo de bloque, para ello usaremos como base, la siguiente hoja de estilos de ejemplo:

div#a {
    background: blue;
    width: 2em;
    height: 4em;
}

div#b {
    background: red;
    width: 4em;
    height: 2em;
}

div#c {
    background: pink;
    width: 1em;
    height: 1em;
}

p{
    font-size: 80px;
    background: yellow;
    margin: 0;
    padding: 0;
}

Se ha usado una tamaño de fuente grande de forma intencionada para forzar el uso del scroll. Ahora realiza el siguiente ejercicio para que puedas comprobar por ti mismo como funciona el modelo de bloques:

Cambia el posicionamiento del bloque a a relative y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero el espacio reservado que debería haber ocupado el bloque azul, se conserva
Cambia el posicionamiento del bloque c a relative y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque rosa cambiará su posición con respecto a su contenedor (el bloque rojo)
Cambia el posicionamiento del bloque a a absolute y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero como no se ha reservado espacio para el bloque azul, el rojo se colocará en la esquina superior izquierda
Y si hacemos scroll, los bloques dejarán de ser visibles
Cambia el posicionamiento del bloque a a fixed y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero como no se ha reservado espacio para el bloque azul, el rojo se colocará en la esquina superior izquierda
Y si hacemos scroll, veremos que el bloque azul ha quedado fijo en su posición con respecto a la ventana
Cambia el posicionamiento del bloque a a float: right

El bloque azul se superpondrá al resto de elementos, se habrá colocado en el borde derecho de la pantalla y no se ha reservado espacio para ese bloque
Cambia el posicionamiento del bloque c a float: right

El bloque rosa se pegará al lado derecho de su contenedor, el bloque rojo
Cambia el posicionamiento del bloque b a float: right

El bloque rojo se pegará al lado derecho del elemento flotante anterior, el bloque azul
Cambia el posicionamiento del bloque a a float: left y añade a p la propiedad clear: right

El párrafo se colocará debajo del bloque rojo, pero se superpondrá al bloque azul
Cambia el posicionamiento de p a clear: both

El párrafo se colocará debajo del bloque azul

Modelo flexible

El posicionamiento flexible permite acomodar los elementos de la página según cambien las dimensiones y orentación de la página

Nos permite hacer un diseño adaptativo para que nuestras páginas web se visualizen correctamente en cualquier dispositivo

Este estándar es relativamente reciente y todavía no está soportado por todos los navegadores, pero en un futuro lo estará

Como ventajas se obtiene un código más legible y simple, donde podremos cambiar el orden de los elementos independientemente del orden en el código HTML

El modelo flexible es apropiado para colocar pequeños componentes de una página web

Para realizar una disposición general de los elementos de la página, se está imponiendo el modelo de rejilla

La idea principal es que un contenedor flexible expande o comprime sus elementos para rellenar el espacio libre o ajustarse al área disponible

Así tendremos un contenedor flex (flex container) y una serie de elementos flex contenidos (flex item)

Para definir un contenedor utilizaremos la propiedad display: lex (o display: kit-web.flex si queremos compatibilidad con Safari)

Todos los elementos contenidos pasarán a ser elementos flex

En este modelo no se utilizan conceptos como ordenamiento horizontal o vertical sino que se define un eje principal (main axis) y otro secundario (cross axis)

De esta forma, el diseño se ajusta fácilmente a los cambios de orientación del dispositivo

Para cada eje podemos situar los componentes en su inicio (main-start o cross-start) y final (main-end o cross-end)

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='cont01' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont02' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont03' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont04' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este html de ejemplo para poder comprobar el uso del modelo flexible, para ello usaremos como base, la siguiente hoja de estilos de ejemplo:

.contenedor {
    width: 400px;
    border-style: solid;
    border-color: #3F51B5;
    border-width: 4px;
    margin-top: 15px;
    display: flex;
}

.contenedor>div {
    background-color: #FF4081;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 3em;
    margin: 4px;
}

Dirección de los elementos

La propiedad flex-direction especifica la dirección del eje principal, es decir, cómo se colocan los elementos dentro del contenedor

Admite los siguientes valores:

row fila
row-revese fila invertida
column columna
column-reverse columna invertida

Para comprobar su comportamiento, añade el siguiente CSS al ejemplo anterior:

#cont01 {
    flex-direction: row;
}

#cont02 {
    flex-direction: row-reverse;
}

#cont03 {
    flex-direction: column;
}

#cont04 {
    flex-direction: column-reverse;
}

Ajuste en el eje principal

La propiedad wrap establece si es necesario ajustar los elementos para mostarlos en una única fila (o columna)

Admite los siguientes valores:

nowrap ajusta los elementos a una línea
wrap ajusta los elementos pero sin cambiar su tamaño
wrap-reverse ajusta los elementos pero sin cambiar su tamaño, pero en el orden inverso de filas

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont05' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont06' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont07' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Y el siguiente CSS:

#cont05 {
    flex-wrap: nowrap;
}

#cont06 {
    flex-wrap: wrap;
}

#cont07 {
    flex-wrap: wrap-reverse;
}

Alineación del contenido

Con la propiedad justify-content podemos alinear los elementos con respecto al eje principal del contenedor

Nos permite decidir qué hacer con el espacio restante

Admite los siguientes valores:

flex-start junta los elementos al principio del eje
flex-end junta los elementos al final del eje
center centra los elementos
space-between reparte el espacio entre los elementos dejando los extremos pegados al borde
space-around todo el espacio restante se reparte alrededor de cada elemento

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont08' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont09' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont010' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont011' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont012' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Y el siguiente CSS:

#cont08 {
    justify-content: flex-start;
}

#cont09 {
    justify-content: flex-end;
}

#cont10 {
    justify-content: center;
}

#cont11 {
    justify-content: space-between;
}

#cont12 {
    justify-content: space-around;
}

Ajuste en el eje secundario

Para alinear los elementos con respecto al eje secundario disponemos de la propiedad align-items

Admite los siguientes valores:

strech para ocupar todo el ancho
flex-start alinea los elementos al principio del eje
flex-end alinea los elementos al final del eje
center centra los elementos

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont013' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont14' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont015' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont016' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Y el siguiente CSS:

.contenedorAlto {
    height: 100px;
}

#cont13 {
    align-items: strech;
}

#cont14 {
    align-items: flex-start;
}

#cont15 {
    align-items: flex-end;
}

#cont16 {
    align-items: center;
}

Propiedades de los elementos

Hasta ahora hemos visto propiedades para configurar el contenedor principal

Ahora vamos a enumerar algunas propiedades muy interesantes para manipular los elementos:

order indica el orden en el que aparece el elemento dentro del contenedor
De esta forma no será necesario modificar el HTML para reordenar los elementos, ya que lo realizaremos por código
flex-grow establece el factor de crecimiento del elemento
Es decir, cómo crece en relación a los otros elementos, siempre que el contenedor tenga espacio libre
flex-shrink establece el factor de encogimiento del elemento
Es decir, cómo decrece en relación a los otros elementos, siempre que el contenedor tenga espacio libre
flex-basis indica el tamaño por defecto (ancho) antes de que el espacio libre del contenedor sea distribuido
Normalmente se deja su valor por defecto: flex-basis: auto

Existe una forma abreviada para las propiedades flex-grow, flex-shrink y flex-basis, simplemente especificando el valor que tomarán: flex: 1 1 auto

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont017' class='contenedor'>
    <div id='item1'>1</div>
    <div id='item2'>2</div>
    <div id='item3'>3</div>
    <div id='item4'>4</div>
    <div id='item5'>5</div>
</div>

Y el siguiente CSS:

#item1 {
    order: 3;
}

#item2 {
    order: 1;
    flex-grow: 2;
}

#item3 {
    order: 2;
}

#item4 {
    order: 5;
}

#item5 {
    order: 4;
}

Modelo de rejilla

Aunque el modelo de cajas flexibles permite crear sitios adaptativos gracias a los media queries, el modelo que se está imponiendo es el de rejilla

En este modelo la pantalla se divide en una rejilla virtual y el diseñador puede elegir cuántas celdas de esa rejilla ocupará cada elemento dependiendo del dispositivo

Este diseño se ha popularizado gracias a Bootstrap creada por los desarrolladores de Twitter

En Bootstrap el espacio disponible se divide en 12 columnas de igual tamaño

Para cada elemento se indicará cuántas columnas ocupará dependiendo del tamaño del dispositivo

Por ejemplo, para una barra lateral podemos indicar que ocupe 2 columnas en un escritorio, 6 columnas (la mitad del ancho total) para tablets y 12 columnas (todo el ancho) en los dispositivos móviles

Para conseguirlo se usará un conjunto de clases, en este ejemplo serían: .col-md-2, .col-sm-6 y .col-xs-12

Los tamaños se definen en Bootstrap cómo:

xs (extra small)
Pantallas con ancho inferior a 768px
La gran mayoría de teléfonos inteligentes
sm (small)
Pantallas con ancho inferior a 992px
Si se ha definido la clase xs y el tamaño inferior a 768px, entonces se aplicará esa clase
md (medium)
Pantallas entre 992px y 1200px
Este rango representa la mayoría de los navegadores de escritorio
lg (large)
Pantallas muy grandes con ancho superior a 1200px
Normalmente son grandes pantallas de alta definición

<div class='col-xs-12 col-sm-6 col-md-8'>
    12 cols smartphone, 6 tablet, 8 PC
</div>
<div class='col-xs-6 col-md-4'>
    6 cols smartphone (y tablet), 4 PC
</div>

Como puede verse en el ejemplo, el contenido se organiza en filas (clase row) y dentro de estas filas crearemos las columnas con los tamaños deseados

Media Queries

Una media query permite utilizar las reglas de las hojas de estilo dependiendo de las caracteristicas del medio (ancho, alto y color)

Fueron añadidas a partir de CSS3, permiten que la presentación del contenido se adapte a un rasngo específico de dispositivos de salida sin tener que cambiar los contenidos y son la base del diseño adaptativo

Pueden utilizarse de dos formas: importando una hoja de estilo o aplicandolas dentro de una misma hoja de estilo

Importación de hojas de estilo

Podemos utilizar las media queries para elegir distintas CSS dependiendo del medio o las características del mismo

Actualmente sólo existen dos medios admitidos:

screen un navegador
print una impresora

<link rel='stylesheet' media='screen' href='browser.css'>
<link rel='stylesheet' media='print' href='printer.css'>
<link rel='stylesheet' media='(max-width: 800px)' href='tablet.css'>

Como puede observarse en el ejemplo, definir el tipo de medio es tan sencillo como añadir el atributo media dentro del elemento link

También es posible indicar condiciones sobre el tipo de medio, en el ejemplo le hemos dicho que se se cargue cuando el medio tenga una anchura inferior a 800px, para poder usarla con tablets

Reglas @media

Las reglas @media nos permiten indicar sobre qué tipo de medio deben aplicarse ciertas reglas CSS

Su sintasix genérica es:

@media [mediatype and] (media feature) {
   CSS-Code;
}

Los únicos mediatype admitidos son screen y print, como hemos visto anteriormente

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Como puede verse en el ejemplo, las media feature nos permiten indicar características del dispositivo y se pueden añadir condiciones utilizando los operadores lógicos and, not y only

Podemos utilizando los media feature especificar el tamaño del dispositivo, su orentación o resolución, número de colores, etc

Algunos de los más destacados son:

aspect-ratio ancho/alto del dispositivo
min-aspect-ratio mínimo ancho/alto del dispositivo
max-aspect-ratio máximo ancho/alto del dispositivo
color-index número de colores que el dispositivo puede mostrar
width ancho exacto
min-width ancho mínimo
max-width ancho máximo
height alto exacto disponible
min-height alto mínimo disponible
max-height alto máximo disponible
orientation orientación, admite los valores:
- landscape
- portrait

Diseño adaptativo con Media Queries

Vamos a ver dos ejemplos con media queries para entender cómo hacer nuestros propios diseños adaptativos, uno con el modelo flexible y otro con el modelo de rejilla

Diseño adaptativo con el modelo flexible

En siguiente ejemplo veremos que crear un diseño adaptativo con el modelo flexible es muy fácil

Ya que podemos aprovecharnos de la posibilidad de reordenar los elementos que nos ofrece esta opción

Vamos a partir de una disposición de 3 columnas con la barra de navegación, el contenido principal y una barra lateral

Cuando el tamaño del navegador sea menor que 640px pasaremos a una única columna

El código HTML que usaremos en el ejemplo es el siguiente:

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='flexible.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <header>Esta es la cabecera</header>
       <div id='principal'>
           <article>Contenido</article>
           <aside>Barra lateral</aside>
           <nav>Barra de navegación</nav>
       </div>
       <footer>Este es el pie de la página</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

El código CSS del archivo flexible.css que usaremos en el ejemplo es el siguiente:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    min-height: 80%;
}

nav {
    background-color: lightgray;
    flex: 1 6 20%;
    order: 1;
}

article {
    background-color: lemonchiffon;
    flex: 3 1 60%;
    order: 2;
}

aside {
    background-color: ligthsalmon;
    flex: 1 6 20%;
    order: 3;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

@media all and (max-height: 640px) {
    #principal {
       flex-flow: column;
    }

    article {
       order: 1;
    }

    aside {
       order: 2;
    }

    nav {
       order: 3;
    }
}

Diseño adaptativo con el modelo de rejilla

En siguiente ejemplo veremos que crear un diseño adaptativo con el modelo de rejilla es muy fácil

Una de las principales limitaciones es que ya no que podemos reordenar los elementos

Vamos a usar una rejilla de tipo Bootstrap

Para ello vamos a utilizar las clases cols-xs-12 para indicar que en tamaño pequeño el elemento ocupará 12 columnas, col-sm-8 ocupará 8 columnas para un tamaño pequeño y col-sm-2 ocupará 2 columnas para un tamaño un poco más grande

Para el cambio de tamaño pequeño a grande se ha asignado 768px

El código HTML que usaremos en el ejemplo es el siguiente:

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='rejilla.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div class='row'>
           <header class='col-xs-12 col-sm-12'>Esta es la cabecera</header>
       </div>
       <div class='row' id='principal'>
           <nav class='col-xs-12 col-sm-2'>Barra de navegación</nav>
           <article class='col-xs-12 col-sm-8'>Contenido</article>
           <aside class='col-xs-12 col-sm-2'>Barra lateral</aside>
       </div>
       <div class='row'>       
           <footer class='col-xs-12 col-sm-12'>Este es el pie de la página</footer>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

El código CSS del archivo rejilla.css que usaremos en el ejemplo es el siguiente:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    min-height: 80%;
}

nav {
    background-color: lightgray;
    height: 20%;
}

article {
    background-color: lemonchiffon;
    minheight: 80%;
}

aside {
    background-color: ligthsalmon;
    height: 20%;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

.row: after{
    clear: both;
}

.col-xs-12 {
    float: left;
    width: 100;
}

@media all and (max-height: 768px) {
    .col-sm-2, .col-sm-18, .col-sm-12 {
       float: left;
    }

    .col-sm-12 {
       width: 100%;
    }

    .col-sm-8 {
       width: 66.6667%;
    }

    nav, aside {
       height: 80%;
    }
}

Html, Lenguaje de programación, CSS, Programación, Página Web

Listas de declaraciones CSS

07 de octubre de 2024 secarcam

Listas de declaraciones CSS

Las propiedades se definen como listas de declaraciones CSS, son muy hetereogéneas y no pueden aplicarse a todas las etiquetas HTML

Podemos encontrar ejemplos en w3schools o en MDN Web Docs Mozilla

A continuación vamos a tratar algunas de las principales listas de declaraciones

Unidades de medida

Muchas propiedades aceptan como valor una unidad de medida

En general, es recomendable utilizar medidas relativas en vez de absolutas

Por ejemplo, para una página para la web podríamos indicar que queremos 20 píxeles de alto, sin embargo, si nuestros usuarios cambian de dispositivo, como por ejemplo a un móvil o a una tablet, ese tamaño seria o muy grande o el contenido aparecería desproporcionado

Para evitar ese problema u otros similares, las declaraciones CSS admiten las siguientes unidades:

Porcentaje: establece el tamaño en un tanto por ciento con respecto al valor heredado
```
* {
    font-size: 80%;
}
```
em: establece el tamaño de acuerdo a la fuente actual (o de la fuente heredada, si no se ha definido un tamaño de fuente)
```
* {
    font-size: 2em;
}
```
px: establece el tamaño en píxeles (un píxel representa un punto concreto de la pantalla que muestra nuestra página), siendo una medida absoluta, como puede generar problemas, deberíamos limitar su uso a casos concretos
```
* {
    font-size: 12px;
}
```

Podemos utilizar las declaraciones CSS para indicar la apariencia visual de la página web en distintos dispositivos, como por ejemplo una impresora. Para esos casos podemos utilizar otro tipo de medidas:

cm, mm, in: el tamaño se establece en una de las unidades internacionales (cm para centímetros, mm para milímetros e in para pulgadas)
```
header {
    font-size: 12cm;
}

body {
    font-size: 30mm;
}

p {
    font-size: 10in;
}
```
pt: el tamaño se establece en puntos (un punto equivale a \frac{1}{72} de pulgada)
```
* {
    font-size: 12pt;
}
```

El uso de medidas relativas (porcentajes o em) permiten que nuestra página se visualice correctamente en cualquier dispositivo. A esta práctica se la denomina diseño adaptativo o responsive, es decir, nuestro diseño se adaptará al dispositivo en el cual sea visualizado (un navegador, un móvil, una tablet, etc)

Colores

Otro de los elementos fundamentales para una página web es el tratamiento de los colores

Hay una lista de 140 colores básicos que podemos encontrar predefinidos, también podemos definirlos manualmente utilizando la notación RGB (Red, Green, Blue) para indicar la cantidad de rojo, verde y azul que componen ese color

Para definir el color usaremos un valor entre 0 y 255 (en su valor hexadecimal), iniciando la codificación con el simbolo ‘#’ seguido de un número hexadecimal de 6 cifras

Podemos definir el color de las siguientes maneras:

color: valor dónde valor es uno de los colores predefinidos
```
h1 {
    color: red;
}
```
color: codigo dónde código es un valor que empieza por el símbolo ‘#’ seguido de un número hexadecimal de 6 cifras
```
h1 {
    color: #FF0000;
}
```
color: RGB(entero, entero, entero): dónde RGB es una función que admite 3 valores entre 0 y 255 que corresponden a la cantidad de rojo, verde y azul que componen ese color
```
h1 {
    color: RGB(255, 0, 0);
}
```
color: RGB(entero%, entero%, entero%): igual que la anterior, pero el valor entero es un porcentaje
```
h1 {
    color: RGB(100%, 0%, 0%);
}
```
color: transparent: el color transparente también es un color válido en CSS3
```
h1 {
    color: transparent;
}
```

Propiedades de texto

Las principales propiedades que se pueden utilizar en los elementos de texto son:

color

indica el color de la fuente. Su valor es un color, ya lo hemos descrito en el párrafo anterior
```
p {
    color: #FF0000;
}
```
font-size

representa el tamaño de la fuente, como ya se ha descrito en el párrafo anterior es recomendable usar valores relativos
```
p {
    font-size: 80%;
}
```
font-style

admite un estilo de letra para el texto, podemos elegir entre uno de los siguientes estilos:
- normal es el estilo por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-style: normal;
}
```
- italic es el estilo por defecto del navegador para la letra en cursiva
```
p {
    font-style: italic;
}
```
- oblique es el estilo por defecto del navegador para la letra oblique, es similar a la cursiva, si la fuente no permite el tipo oblique tomará el estilo como italic
```
p {
    font-style: oblique;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    font-style: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    font-style: inherit;
}
```
font-weight

admite un estilo de letra en negrita para el texto, podemos elegir entre uno de los siguientes tipos de negrita:
- normal es la negrita por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-weight: normal;
}
```
- bold define la negrita con caracteres gruesos
```
p {
    font-weight: bold;
}
```
- bolder define la negrita con los caracteres más gruesos
```
p {
    font-weight: bolder;
}
```
- lighter define la negrita con los caracteres más finos
```
p {
    font-weight: lighter;
}
```
- entero define la negrita con un valor múltiplo de 100, con el valor 400 por defecto y el 700 para bold
```
p {
    font-weight: 600;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    font-weight: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    font-weight: inherit;
}
```
text-decoration-line

establece el tipo de decoración del texto para el subrayado, podemos elegir entre uno de los siguientes tipos de decoración:
- none valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    text-decoration-line: none;
}
```
- underline el subrayado será debajo del texto
```
p {
    text-decoration-line: underline;
}
```
- overline el subrayado será sobre el texto
```
p {
    text-decoration-line: overline;
}
```
- line-through el subrayado será a través del texto
```
p {
    text-decoration-line: line-through;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-line: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-line: inherit;
}
```
text-decoration-color

establece el color para la decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- color donde color es uno de los valores vistos en el párrafo anterior
```
p {
    text-decoration-color: #FF0000;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-color: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-color: inherit;
}
```
text-decoration-style

establece el tipo de decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- solid valor por defecto del navegador, si no se especifica, se tomará este valor. Mostrará la línea en una única línea
```
p {
    text-decoration-style: solid;
}
```
- double mostrará la línea con una doble línea
```
p {
    text-decoration-style: double;
}
```
- dotted mostrará la línea como una línea de puntos
```
p {
    text-decoration-style: dotted;
}
```
- dashed mostrará la línea como una línea discontinua
```
p {
    text-decoration-style: dashed;
}
```
- wavy mostrará la línea como una línea ondulada
```
p {
    text-decoration-style: wavy;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-style: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-style: inherit;
}
```
text-transform

establece el texto en letras minúsculas o mayúsculas, podemos elegir entre uno de los siguientes tipos de transformación:
- none valor por defecto del navegador, si no se especifica, se tomará este valor. No se tomarán letras mayúsculas
```
p {
    text-transform: none;
}
```
- capitalize se transforma la primera letra de cada palabra a mayúscula
```
p {
    text-transform: capitalize;
}
```
- uppercase se transforman todas las letras a mayúsculas
```
p {
    text-transform: uppercase;
}
```
- lowercase se transforman todas las letras a minúsculas
```
p {
    text-transform: lowercase;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-transform: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-transform: inherit;
}
```
letter-spacing

aumenta o disminuye el espacio entre caracteres en un texto, podemos elegir entre uno de los siguientes:
- normal valor por defecto del navegador, si no se especifica, se tomará este valor. No hay espacios extra
```
p {
    letter-spacing: normal;
}
```
- length dónde lenghth es la cantidad de espacios extra entre caracteres (también están permitidos valores negativos)
```
p {
    letter-spacing: 5px;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    letter-spacing: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    letter-spacing: inherit;
}
```
- word-spacing
  
  aumenta o disminuye el espacio entre las palabras en un texto, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    word-spacing: normal;
}
```
  - length dónde length es la cantidad de espacios extra entre palabras (también están permitidos valores negativos)
```
p {
    word-spacing: 5px;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    word-spacing: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    word-spacing: inherit;
}
```
- line-height
  
  especifica la altura de una línea, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    line-height: normal;
}
```
  - number dónde number es un valor que se multiplicará por el tamaño de la fuente actual para establecer la altura de la línea
```
p {
    line-height: 2;
}
```
  - length dónde length es la altura para esa línea (también están permitidos valores negativos)
```
p {
    line-height: 5px;
}
```
  - % es la altura para esa línea en porcentaje del tamaño de la fuente actual
```
p {
    line-height: 15%;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    line-height: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    line-height: inherit;
}
```
- text-align
  
  especifica la alineación horizontal del texto en un elemento, podemos elegir entre uno de los siguientes:
  - left el texto se alinea a la izquierda
```
p {
    text-align: left;
}
```
  - right el texto se alinea a la derecha
```
p {
    text-align: right;
}
```
  - center el texto se alinea centrado
```
p {
    text-align: center;
}
```
  - justify el texto las líneas son estiradas para que cada línea tenga el mismo ancho (como en los periódicos y las revistas)
```
p {
    text-align: justify;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-align: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-align: inherit;
}
```
- text-indent
  
  especifica la sangría de la primera línea en un bloque de texto, podemos elegir entre uno de los siguientes:
  - length dónde length es la sangría de la primera línea en un bloque de texto (también están permitidos valores negativos, en ese caso se usará una sangría a la izquierda)
```
p {
    text-indent: 5px;
}
```
  - % es la sangría de la primera línea en un bloque de texto en porcentaje del tamaño del elemento padre
```
p {
    text-indent: 15%;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-indent: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-indent: inherit;
}
```
Es muy importante definir una fuente que sea coherente con el estilo de nuestra web. Para ello se dispone de la propiedad font-family, en la cual especificaremos la fuente (verdana, arial, time new roman, etc) que será usada para ese texto

Sin embargo nos encontraremos con un problema si esa fuente en concreto no está definida en el navegador, por eso es recomendable especificar varias fuentes en caso de que no existiera alguna de ellas

Otra de las limitaciones es que sólo podremos usar fuentes que cumplan los estándares permitidos por los navegadores

Para solucionar los problemas relacionados con las fuentes existen servidores de fuentes de texto que ofrecen la posibilidad de cargar la fuente que necesitamos de ese servidor
```
<!DOCTYPE html>
<html>
    <head>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>

        
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="https://fonts.google.com/css?family=Roboto" />
    </head>

    <body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

    
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732200472&k=eff270527a3102d08c6279f8ff7124e9&__muid="></script>

</body>
</html>
```
En el ejemplo anterior hemos utilizado una de las fuentes de referencia de Google llamada Roboto y la hemos añadido a nuestra cabecera

Propiedades de fondo

Para establecer el fondo de un elemento utilizaremos la propiedad background-color

También puede utilizarse como fondo una imagen utilizando la propiedad background-image, que se repetirá vertical y horizontalmente para cubrir todo el elemento

Podemos limitar la forma en que se repite esa imagen con las propiedades background-repeat: repeat-y y background-repeat: repeat-x
```
body {
    background-image: url('fondo.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}
```
En el ejemplo anterior hemos utilizado la propiedad background-repeat: no-repeat para desactivar la repetición de la imagen, estableciendo además una posición fija, en la esquina inferior derecha, con la propiedad background-position: right bottom

Para mantenerla fija y que haga scroll en la página, se ha utilizado la propiedad background-attachment: fixed

Dimensiones y bordes

Para indicar las dimensiones de un elemento usaremos las propiedades width y height (anchura y altura)

Debemos tener en cuenta si sus márgenes son internos o externos

Para ello primero definiremos el margen desde el borde hasta los otros elementos con la propiedad margin

En segundo lugar definiremos el margen interno hasta el propio borde del elemento con la propiedad padding

Podemos asignar un margen externo para los cuatro lados con la propiedad margin o podemos indicarle un margen externo en particular para cada lado utilizando margin-top, margin-bottom, margin-left o margin-right

De forma análoga, se puede realizar para los márgenes internos utilizando padding-top, padding-bottom, padding-left o padding-right

Una vez difinidos los márgenes externos e internos, podremos configurar la apariencia que tomará el borde

Primero estableceremos el estilo con la propiedad border-style, la cual admite los valores dotted (puntuado), dashed (discontinuo), solid (sólido) o double (doble)

También es posible usar valores para crear bordes biselados, pero las guías de estilo modernas desaconsejan su uso por estar «pasados de moda»

En segundo lugar podremos personalizar la anchura del trazo con la propiedad border-width y su color con border-color

Propiedades para listas

Podemos utilizar las siguientes propiedades para manejar elementos lista:
- list-style-type: representa el tipo de marcador que se utilizará en la lista
  Existen estos valores predefinidos:
  - circle
  - square
  - decimal
  - lower-roman
  - upper-roman
  - none
- list-style-position: indica si el marcador se incluirá dentro del texto (propiedad inside) o fuera (propiedad outside), siendo esta última la más habitual
- list-style-image: permite añadir una imagen como marcador
  Podremos usar los valores none o url(‘url de la imagen’)
Otras propiedades

Además de las propiedades anteriores vamos a destacar un par más que nos serán de especial utilidad a la hora de dar formato a nuestros elementos:
- visibility: indica si el elemento está visible o no
  Puede tomar uno de los siguientes valores:
  - visible: el elemento está visible
  - hidden: el elemento está no visible
  - collapse: solo podremos usarlo con los elementos de tablas para no visualizar una fila o una columna concreta
- display: cambia el tipo de caja del elemento, puede tener los valores:
  - block
  - inline
  - none

Html, Lenguaje de programación, CSS, Programación, Página Web

Preprocesadores CSS

07 de octubre de 2024 secarcam

Preprocesadores CSS

El uso de procesadores CSS surge por un problema muy común en las hojas de estilo, muchos valores se repiten constantemente

.do-container {
    margin: 2em 1em;
    background-color: #E1E1E1;
    padding: 1em;
    border-radius: 15px;
    border-color: #C0392B;
    border-width: 1px;
}

#tableOfContents {
    list-sytle: none;
    border-left: 2px solid #C0392B;
}

a {
    color: #C0392B;
}

Como podemos ver en el ejemplo anterior, el color #C0392B se repite constantemente en el código porque es nuestro color principal en este diseño

¿Pero, y si necesitamos cambiarlo? Esa situación nos obligaria a cambiar todas sus apariciones en la hoja de estilo

@colorPrincipal = #C0392B;

.do-container {
    margin: 2em 1em;
    background-color: #E1E1E1;
    padding: 1em;
    border-radius: 15px;
    border-color: @colorPrincipal;
    border-width: 1px;
}

#tableOfContents {
    list-sytle: none;
    border-left: 2px solid @colorPrincipal;
}

a {
    color: @colorPrincipal;
}

En el ejemplo anterior se ha solucionado el problema con la variable colorPrincipal, sin embargo, esta solución no es permitida por el CSS estándar

Por eso surge la necesidad del uso de procesadores CSS, que son aplicaciones que permiten dotar al CSS de las ventajas de un lenguaje de programación, como el uso de variables, funciones, condiciones e incluso cálculos matemáticos, los cuales serán traducidos posteriomente a un CSS válido

No existe un estándar claro para este tipo de procesadores, pero tenemos las siguientes alternativas:

Sass funciona con Ruby, el cual viene preinstalado en Mac; si eres usuario de Windows necesitaras instalar previamente Ruby
Funciona mediante línea de comandos en un terminal, ya que no tiene entorno gráfico
Si quieres usarlo en modo visual, existen varias herramientas de pago que podrian interesarte
LESS está escrito en javascript, por lo que su instalación es tan sencilla como su importación directamente a nuestro documento HTML
Existen herramientas gratuitas que ayudan a compilar tus archivos escritos en LESS a un CSS válido
Aunque puede configurarse LESS para que haga el proceso de compilación ‘al vuelo‘, aunque no es recomendable porque consume tiempo de carga cada vez que recompila
Stylus necesitaremos instalar previamente Node.js, el cuál tiene su propio conjunto de repositorios que permite tener siempre la última versión estable del programa
Funciona mediante línea de comandos en un terminal, ya que no tiene entorno gráfico
Si quieres usarlo en modo visual, existen varias herramientas de pago que podrian interesarte

La sintaxis de estas herramientas es similar aunque hay pequeñas diferencias entre ellas, ya que como se ha dicho, no hay un estándar para preprocesadores CSS

LESS

Instalación

Con esta herramienta crearemos archivos .less donde se guardarán nuestras reglas CSS mejoradas

Incluiremos LESS en nuestro HTML mediante la importación de Javascript y se encargará de traducir el archivo .less en un .css válido que será cargado en la página HTML

Este tipo de instalación usada sólo en desarrollo es considerada ‘al vuelo‘ y llamada compilación, por motivos de eficiencia, en la página de producción, se añadirá el .css válido y ya traducido

Para poder realizar esta traducción ‘al vuelo‘ añadiremos las siguientes líneas en el head de nuestro HTML:

<link rel='stylesheet/less' type='text/css' href='mystyle.less' />
<script src='less.js' type='text/javascript'></script>

En el ejemplo nuestro fichero LESS se llama mystyle.less y le hemos indicado al navegador que es una hoja de estilos LESS con la referencia ‘stylesheet/less’

Despues hemos cargado la libreria Javascrip de LESS llamada less.js, que será la encargada de traducir el archivo mystyle.less al CSS válido y lo cargará en el HTML

Variables

Antes hemos visto un ejemplo para definir una variable para el color, en LESS se definen las variables con el símbolo @

@colorPrincipal = #ABABAB;
@anchoSitio = 1024px;
@estiloBorde: dotted;

body {
    color: @colorPrincipal;
    border: 1px @estiloBorde @colorPrincipal;
    max-width: @anchoSitio;
}

button {
    background-color: @colorPrincipal;
}

Mixins

Los mixins permiten que una regla CSS herede todas las declaraciones de otra

.bloque{
    margin: 10px 5px;
    padding: 2px;
}

p {
    .bloque; /* Hereda todos los estilos de .bloque */
    border: 1px solid #EEE;
}

ul ol {
    .bloque; /* Hereda todos los estilos de .bloque */
    color: #333;
    text-transform: uppercase;
}

En el ejemplo anterior hemos hecho que los elementos p, ul y ol incluyan todas las declaraciones de .bloque y así nos ahorramos el tener que volver a escribirlas en cada aparición

Los mixins también permiten la utilización de parámetros para configurarlos

@mixin error(@anchoBorde: 2px) {
    border: @anchoBorde solid #F00;
    color: #F00;
}

.error-generico {
   padding: 20px;
   margin: 4px;
   .error(); /* Se aplican los estilos de error */
}

.error-login {
   left: 12px;
   position: absolute;
   top: 20px;
   .error(5px); /* Se aplican los estilos de error pero con el parámetro @anchoBorde con el valor 5px */

En el ejemplo anterior hemos definido el mixin error donde el ancho de borde es configurable con la variable @anchoBorde

Si no hay parámetros, su valor por defecto será 2px, como se ha indicado en su definición

.error-generico llama al mixin para heredar todas las declaraciones y, como no tiene parámetros toma su valor por defecto

.error-login llama al mixin pero esta vez, como tiene un parámetro toma el valor del mismo

Código heredado

A veces surge el problema de tener varios elementos con el mismo padre, con lo que nos vemos obligados a repetir en cada aparición referencias al padre

section {
   margin: px;
}

section nav {
    height: px;
}

section nav a {
   color: #0982C1;
}

section nav a:hover {
    text-decoration: underline;
}

En el ejemplo anterior tenemos el problema comentado, section es el padre en la mayoría de los elementos de la hoja de estilo, a su vez nav es padre de varios de ellos, al igual que a

section {
   margin: px;
   nav {
      height: px;
      a {
         color: #0982C1;
         &:hover { /* En este caso, & representa el selector a */
             text-decoration: underline;
      }
   }
}

En el ejemplo anterior lo hemos solucionado escribiendo anidaciones de los hijos dentro de los elementos padre, así nos ahorramos repetir las referencias

Además permite usar el símbolo & para referirse al elemento padre inmediato dentro del elemento hijo

Funciones para el color

Las funciones para el color permiten modificar el color en tiempo de compilación

Son bastante útiles para crear degradados, oscurecer botones al pasar el ratón, etc

lighten(@color, 10%); /* Devuelve un color al 10% más claro que @color */
darken(@color, 10%); /* Devuelve un color al 10% más oscuro que @color */

saturate(@color, 10%); /* Devuelve un color al 10% más saturado que @color */
desaturate(@color, 10%); /* Devuelve un color al 10% menos saturado que @color */

spin(@color, 10%); /* Devuelve un color al 10% un tono mayor que @color */
spin(@color, -10%); /* Devuelve un color al 10% un tono menor que @color */

mix(@color1, @color2); /* Devuelve el color resultante de mezclar los colores @color1 y @color2 */

Operaciones

LESS permite operaciones matemáticas

@operacion: 100px * 2em; /* El resultado será 102px */

body {
    margin: (14px / 2);
    top: 50px + 100px;
    right: 100px - 50 px;
    left: 10 * 10;
}

Como se puede ver en el ejemplo, no tiene muchas restricciones, ya que permite hacer cosas sin sentido como mezclar distintas unidades

Media queries

Uno de los problemas de los media queries es que podemos tener distintas definiciones de la misma clase en disintos puntos del archivo CSS

.contenedor {
    width: 75%;
}

@media (max-width: 80px) {
   .contenedor {
       width: 100%;
   }
}

Podemos anidar los media queries dentro de la misma clase, solucionando el problema del ejemplo anterior

.contenedor {
    width: 75%;
    @media (max-width: 80px) {
       width: 100%;
   }
}

Html, Lenguaje de programación, Java, Javascript, Página Web, Programación

Javascript

07 de octubre de 2024 secarcam

Javascript

JavaScript, al igual que Java o VRML, surgió para extender las capacidades del lenguaje HTML y conseguir páginas web dinámicas

JavaScript no es un lenguaje de programación propiamente dicho

Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto. Nunca podrás hacer un programa escrito en JavaScript, tan sólo podrás mejorar tu página Web insertando código javascript en la misma

Utilidad de JavaScript

JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente / servidor. Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio documento HTML o la gestión de un formulario

Por ejemplo: cuando la página HTML es un formulario que permite acceder a una agenda telefónica, se puede insertar un script que verifique la validez de los parámetros proporcionados por el usuario. Esta prueba se efectúa localmente y no necesita un acceso a la red

Por otro lado, también se podrá utilizar JavaScript para efectuar varias opciones a la vez; por ejemplo, visualizar dentro de un documento HTML un vídeo o ejecutar un applet de Java…

Diferencias con Java

La principal diferencia entre JavaScript y Java, es que este último es un lenguaje de programación completo. Aunque comparten la misma sintaxis

JavaScript es un lenguaje que se integra directamente en las páginas HTML. Tiene como características principales las siguientes:

Es interpretado (no compilado) por el cliente, es decir, se ejecuta directamente el programa fuente, al contrario que en los lenguajes compilados, no se genera ni código objeto ni ejecutable para cada ordenador en el que se quiera ejecutar dicho programa
Está basado en objetos. No es, como Java, un lenguaje de programación orientada a objetos (OOP). JavaScript no emplea ni clases ni herencia, ni otras técnicas típicas de la OOP
Su código se integra en las páginas HTML, incluido en las propias páginas
No es necesario declarar los tipos de variables que van a utilizarse, JavaScript realiza una conversión automática de tipos
Las referencias a objetos se comprueban en tiempo de ejecución. Esto es consecuencia de que JavaScript no es un lenguaje compilado
No es posible trabajar directamente con ficheros, ni escribir automáticamente al disco duro. Por eso se dice que JavaScript es un lenguaje seguro para los usuarios de internet

Utilización de JavaScript en un documento HTML

La inserción de un documento HTML se realiza mediante la marca SCRIPT utilizando la sintaxis:

<script type="text/javascript" scr=url>
Código del script
</script>

Los atributos de esta marca son:

type=“text/javascript”
Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del atributo SRC
src=url
El atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional, porque el script puede insertarse directamente en un documento HTML

Podrá especificarse para insertar en un documento un script de un lenguaje determinado y que cuyo código fuente se encuentra en un archivo especificado en un determinado url. Puede sernos útil si queremos que varias de nuestras páginas web compartan los mismos scripts sin tener que insertarlos en cada una, repitiendo el código

A continuación enunciaremos algunos puntos a tener en cuenta respecto a la introducción de JavaScript en un documento HTML:

El script insertado mediante la marca SCRIPT es evaluado por el cliente tras la visualización de la página HTML. Las funciones definidas no se ejecutan inmediatamente, dependen de los eventos asociados a la página
La inserción del script mediante la marca SCRIPT puede colocarse en cualquier lugar del documento HTML pero se recomienda colocarla en la cabecera, es decir, en la zona definida por el HEAD. De este modo, el script está definido desde el principio del documento, lo que garantiza que éste sea visible en todo el documento
Si se definen, además del script mediante el atributo SRC, scripts en el propio documento, el cliente evaluará en primer lugar el insertado mediante el atributo SRC y seguidamente los incluidos en el documento
Los URL correspondientes a un JavaScript poseen generalmente la extensión .js
Es preferible delimitar los scripts insertados en un documento por comentarios HTML para asegurarse de que el contenido del script no aparecerá en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:
```
<script type="text/javascript">
<-- Disimula el contenido del script para navegadores no compatibles
Código del script
//-->
</script>
```
El lenguaje JavaScript no es case sensitive, es decir, no distingue mayúsculas de minúsculas salvo en las cadenas de caracteres literales

Por último, comentar otra forma de introducir scripts en documentos HTML, y es incluir estos script como controladores de eventos de algunas marcas, como pueden ser la marcas de imágenes, anclas, links, botones, etc. Veamos un ejemplo:

<a href="https://secarcam.webcindario.com">
Ir al índice
</a>

Ir al índice

Como puede verse, dentro de esta marca, como atributo de esta, se pone un controlador de eventos y después del signo igual y entre comillas se incluye el código de JavaScript. Ahora bien, también es posible llamar a una función desde el HEAD del documento. Se recomienda esta segunda opción ya que es una manera más limpia y clara de escribir páginas. Se conseguiría el mismo resultado que en el ejemplo anterior:

<head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->

<script type="text/javascript">
<-- Disimula el contenido del script para navegadores incompatibles
function alerta(){
    alert("Vamos a la página inicial");
}
//-->
</script>

...
</head>

<body>
<a href="/" OnClick="alerta()">
Ir al índice
</a>
...
</body>

Las versiones de JavaScript

El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications. Apareció por primera vez en el Netscape Navigator 2.0. La cual incluía JavaScript bajo el nombre de Mocha, cuando apareció esta versión de Navigator se le llamaba LiveScript. Finalmente fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995

Tradicionalmente, se venía utilizando en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación únicamente cliente, sin acceso a funciones del servidor. JavaScript se ejecutaba en el navegador del usuario al mismo tiempo que las sentencias iban descargándose junto con el código HTML. Lo que quería Netscape es que JavaScript fuera un lenguaje de guiones, fácil de usar y que cualquier persona pudiera utilizarlo. Después de 2 años JavaScript se convirtió en una de las herramientas más utilizadas por los desarrolladores web, utilizándose casi en el 90% de los desarrollos web, incluso más que Java y Activex

Netscape introdujo una implementación de script del lado del servidor con Netscape Enterprise Server, lanzada en diciembre de 1994 (poco después del lanzamiento de JavaScript para navegadores web)

En el año de 1996 Microsoft empezó a mostrar gran interés en competir con JavaScript por lo que lanzó el lenguaje llamado Jscript, que era la implementación de ECMAScript, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacian a ambas versiones incompatibles. Pero la versión 4.0 del Internet Explorer soportaba sin ningún problema, la versión 1.1 de JavaScript. Sin embargo, Jscript no pudo competir directamente con Javascript

A mediados de 1997, Netscape promocionó JavaScript y lanzó la versión 1.2. Esta nueva versión incluía nuevos componentes que daban gran potencial al lenguaje, pero lamentablemente esta versión solo funcionaba en la última versión del Navigator. Los autores propusieron que fuera adoptado como estándar de «the European Computer Manufacturer’s Association» (ECMA, con la implementación ECMAScript), que a pesar de su nombre no era europeo sino internacional, con sede en Ginebra. Poco después también fue propuesto como un estándar ISO

La versión 1.3 fue una pequeña revisión de la 1.2, que fue incluida en la versión 4.07 del Netscape Navigator

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, ó en castellano, Modelo de Objetos del Documento), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape Navigator, Opera versión 7, y Mozilla desde su primera versión

A partir de mediados de la década de los 2000, ha habido una proliferación de implementaciones de JavaScript para el lado servidor. Node.js es uno de los notables ejemplos de JavaScript en el lado del servidor, siendo usado en proyectos importantes

La llegada de Ajax devolvió a JavaScript a la fama y atrajo la atención de muchos programadores. Como resultado de esto hubo una proliferación de un conjunto de frameworks y librerías de ámbito general, mejorando las prácticas de programación con JavaScript, y aumentado el uso de JavaScript fuera de los navegadores web, con la proliferación de entornos JavaScript del lado del servidor. En enero de 2009, el proyecto CommonJS fue inaugurado con el objetivo de especificar una librería para uso de tareas comunes principalmente para el desarrollo fuera del navegador web

En junio de 2015 se cerró y publicó el estándar ECMAScript 6 (última versión hasta la fecha) con un soporte irregular entre navegadores y que dota a JavaScript de características avanzadas que se echaban de menos y que son de uso habitual en otros lenguajes como, por ejemplo, módulos para organización del código, verdaderas clases para programación orientada a objetos, expresiones de fecha, iteradores, generadores o promesas para programación asíncrona

Los comentarios en JavaScript

Los comentarios en el código permiten insertar observaciones del autor para describir las distintas partes del programa. El intérprete de JavaScript los ignora y por ello poseen una sintaxis particular

Se distinguen los comentarios en una sola línea, precedidos por la barra oblicua doble // y los comentarios en varias líneas delimitados por los símbolos /* y por */. Por ejemplo:

// esto es un comentario

/* esto es un comentario de varias líneas con
una longitud cualquiera */

Identificadores y palabras reservadas

Conocer cuál es la sintaxis de los identificadores y cuales son las palabras reservadas es algo necesario antes de empezar a escribir un programa en un lenguaje de programación determinado

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc…, que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definición

Los identificadores deben seguir las siguientes reglas:

El identificador debe empezar por una letra o por el carácter ‘_’
Los caracteres siguientes, además de letras o el carácter ‘_’, pueden ser cifras

Hay que tener en cuenta que el uso de mayúsculas o minúsculas no es importante, porque JavaScript no diferencia de los nombres de mayúsculas o minúsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:

<script type="text/javascript">
var Num_linea=0;
var aux1="";
var _exit=false;
</script>

Primeramente decir que las palabras reservadas son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores

A continuación veremos un cuadro en el que se muestran todas las palabras reservadas existentes en JavaScript, estas palabras tienen o tendrán un significado especial dentro del lenguaje:

Palabras reservadas

Abstract

Boolean

Break

Byte

Case

Cath

Char

Class

Const

Continue

Default

Double

Else

Extends

False

Final

Finally

Float

For

Function

Goto

Implements

Import

Instaceof

Int

Interface

Long

Native

New

Null

Package

Private

Protected

Public

Return

Short

Static

Super

Switch

Synchronized

This

Throw

Throws

Transient

True

Try

Var

Void

While

With

Html, Javascript, Programación, Página Web

Operadores en Javascript

07 de octubre de 2024 secarcam

Operadores en Javascript

JavaScript posee una amplia variedad de operadores

Estos operadores los podemos distinguir en dos grupos: binarios, que actúan sobre dos operandos y unarios, que sólo requieren un operando

Así, su sintaxis general es:

operando1 operador_Binario operando2

operando1 operador_unario

operador_unario operando1

Operadores aritméticos

JavaScript suministra las operaciones básicas con el único añadido del operador que devuelve el resto de la división entre el operador izquierdo y el derecho. Se carece de operadores más complejos, aunque el objeto Math definido en JavaScript posee dichas tareas

Operadores aritméticos
+	Suma
–	Resta
*	Multiplicación
/	División
%	Resto

Nota El operador + aplicado a strings, concatena ambas strings en una sola

Operadores de incremento (++) y decremento (- -)

Estos operadores son unarios y realizan el autoincremento y el autodecremento a la variable que se les aplica. Además de modificar la variable, devuelven el valor de la misma

El operador de incremento o decremento puede ir delante p detrás de la variable teniendo diferente significado

Si el operador es ++ se sitúa después de la variable se denomina post-incremento, haciendo que primero tome el valor y después se incrementa en una unidad la variable

n = k++; // El valor de k se asigna a n y luego se incrementa k

Si el operador ++ se sitúa antes de la variable se denomina pre-incremento y hace que primero se incremente en una unidad la variable y luego se tome el valor

n = ++k; // Primero se incrementa k y luego se asigna a n

Si el operador es – – se sitúa después de la variable se denomina post-decremento, haciendo que primero tome el valor y después se decrementa en una unidad la variable

n = k--; // El valor de k se asigna a n y luego se decrementa k

Si el operador – – se sitúa antes de la variable se denomina pre-decremento y hace que primero se decremente en una unidad la variable y luego se tome el valor

n = --k; // Primero se decrementa k y luego se asigna a n

Operadores relacionales

Se emplean típicamente en las expresiones condicionales. Los operadores relacionales devuelven valores booleanos. Los operandos pueden ser tanto numéricos como strings

Operadores relacionales
>	Mayor que
<	Menor que
> =	Mayor o igual que
< =	Menor o igual que
! =	Distinto que
= =	Igual que

Operadores lógicos

Los operandos lógicos está relacionados con los relacionales ya que normalmente los operandos que usan son resultado de expresiones relacionales. Los valores resultantes son booleanos

Operadores lógicos
& &	AND
\| \|	OR
!	NOT

Operadores bit a bit

La forma de trabajar de estos operadores es convertir a binario los operandos y luego operar con ellos bit a bit

Operadores bit a bit
&	AND
\|	OR
^	XOR
<<	Propagación a la izquierda Desplaza el valor hacia la izquierda introduciendo ceros, si se sale de rango se pierden valores
>>	Propagación a la derecha Desplaza el valor hacia la derecha introduciendo por la izquierda el bit de signo y eliminando los valores que se salgan por la derecha
>>>	Zero fill, propagación a la derecha Similar a << pero hacia la derecha. No introduce bit de signo

Nota Los operadores de propagación toman dos operandos: el primero es la variable a propagar y el segundo es el número de posiciones a propagar

Operadores de asignación

La asignación también es un operador que devuelve la variable modificada. El operador de asignación en JavaScript es =. Los operadores de asignación que se muestran a continuación no son sino abreviaturas que hacen más cómoda y simples las expresiones, aunque a veces sean más ilegibles

Operadores de asignación
Operador	Expresión	Equivalencia
=	A=B=C;	A=C; B=C;
+ =	A + = 4;	A = A + 4;
– =	A – = 3 * B;	A = A – (3 * B);
* =	A * = 2;	A = A * 2;
/ =	A / = 35 + B;	A = A / (35 + B);
>> =	A >> = 1;	A = A >> 1;
<< =	A << = B;	A = A << B;
>>> =	A >>> = B + 1;	A = A >>> (B + 1);
& =	A & = (C + = 3);	C = C +3; A = A & C;
^ =	A ^ = 2;	A = A ^ 2;
\| =	A \| = C;	A = A \| C;

Otros operadores

Operador de selección

Este operador se utiliza para ejecutar una operación u otra dependiendo de la condición. El formato es el siguiente:

Condición ? Exp1 : Exp2

Si se cumple la condición se evalúa y se devuelve la expresión Exp1 si no la Exp2. Podemos poner un sólo valor. Ejemplo:

i = (x!=y)?6:(k+1)

Operador new

Este operador se va a utilizar para crear una instancia de un tipo de objetos previamente definido. La sintaxis a seguir es la siguiente:

variableObjeto = new tipoDeObjeto(parámetro 1, parámetro 2, …)

Estos parámetros son los que se le pasan al constructor de dicho objeto en cuestión

Operador typeof

Este operador aplicado a una variable devuelve el tipo de objeto al que pertenece el dato contenido por dicha variable. Su sintaxis es:

typeof(variable)

Preferencia

La preferencia de los operadores va a determinar el orden en que se ejecuten en una expresión determinada. Usando paréntesis controlaremos que las operaciones se lleven a cabo según nosotros queramos. En JavaScript la preferencia de los operadores de mayor a menor es la siguiente:

Preferencia
Negación / (in / de) cremento	!	++	—
Mul / Div / Resto	*	/	%
Suma / Resta	+	–
Propagación	<<	>>	>>>
Relacionales	<	< =	>	> =
Igualdad	= =	!=
AND bit a bit	&
XOR bit a bit	^
OR bit a bit	\|
AND lógica	&&
OR lógica	\| \|
Otros operadores	?:	New	Typeof
Asignación	=	+ =	– =	* =	/ =	>> =	<< =	>>> =	& =	^ =	\| =

Html, Javascript, Programación, Página Web

Tipos de datos en Javascript

07 de octubre de 2024 secarcam

Tipos de datos en Javascript

Los tipos en Javascript son una representación de los datos, ya que no requiere que las variables declaren su tipo, porque todos los tipos se convierten de forma automática

Tipo booleano

El tipo booleano simplemente distingue entre dos estados, un estado de éxito o de activado, valor verdadero, true, y un estado de fracaso o de desactivado, valor falso, false

Tipos numéricos

Los tipos numéricos los podemos dividir en reales y enteros

Tipo numérico entero

Decimal
enteros en base 10

Tanto positivos como negativos
Hexadecimal
enteros en base 16

Se coloca antes del número en base 16 0x ó 0X
Octal
enteros en base 8

Colocamos un cero antes de dicho número en octal

Tipo numérico real

Los reales se componen de una parte entera y otra fraccionaria separada por un punto de la anterior

La parte fraccionaria puede estar compuesta por un indicador de exponente E o e seguido de un número entero que indica el valor del exponente

var1 = 20; //decimal
var2 = 0x14; //hexadecimal
var3 = 024; //octal

//real
var4 = 25.478;
var5 = 2.3E45;
var6 = 5.6E-2;
var7 = -3.789;

Tipo string

Un string es una cadena de caracteres delimitadas por comillas

Las comillas serán simples o dobles atendiendo a una determinada regla

Por defecto se usarán comillas dobles ("), pero si alguna sentencia a de ir incluida entre dichas comillas, si esa sentencia contiene un string o a su vez otra sentencia que también deba ir delimitada por dichas comillas, estas comillas serán entonces comillas simples (‘)

confirm("¿Estas seguro?");
OnMouseOver = "confirm('¿Estas seguro?');

Por otro lado, hay que tener en cuenta la escritura de caracteres especiales en lo que denominamos secuencias de escape

La secuencia de escape comienza siempre con el carácter \ y a continuación se escribe otro carácter que representa el código especial o el número en octal o hexadecimal de su código ASCII

Las secuencias de escape representan un único carácter en las strings en donde aparecen

Código	Descripción
a	Sonido
b	Blanco
f	Salto de línea
n	Nueva línea
r	Retorno de carro
v	Tabulador vertical
\	Blackslash "\"
‘	Comilla simple
"	Comilla doble
Ooo	Ascii en octal
Xhh	Ascii en hexadecimal
t	Tabulador horizontal

Arrays

Podemos crear arrays a los que le daremos un nombre y a los que accederemos con un índice que comenzará desde el elemento número 1 (no desde el 0 como en Java o en C / C++)

En los arrays al igual que con las variables no existen tipos predeterminados. Para crear un array es necesario definir una función como la que veremos a continuación:

function CreaArray(n){
    this.length = n;
    for (var i=1; i<=n; i++){
        this[i] = 0;
    }
    return this;
}

Comentar sobre la función que la palabra reservada this hace referencia a la variable a actual, es decir, a la variable que contendrá el array

Por otro lado, observar que los array tienen una propiedad length que nos muestra la longitud de dicho array

Por último mostrar el uso de dicha función:

mi_array = new CreaArray (2);
// new: Creamos una instancia del objeto, en este caso un array
// Llenamos el array
mi_array[1] = "Pepe";
mi_array[2] = 35;
longitud = mi_array.length; //longitud será 2

Objetos

Los objetos se componen de un conjunto de valores, propiedades y un conjunto de métodos aplicados a esos valores

Son estos métodos los que nos permiten modificar el estado de dicho objeto, es decir, el valor de sus propiedades

En JavaScript existen objetos predefinidos

A parte, el programador también puede crear sus propios objetos

Para hacer uso de las propiedades de un objeto basta con utilizar la siguiente notación:

mi_objeto.propiedad

Esto se verá con más claridad en el siguiente ejemplo, en el cual tenemos un objeto Universitario en el que tenemos las propiedades: Nombre, Apellido, Edad y Facultad. Suponiendo que tenemos una variable Uni1 que contiene en un momento determinado un objeto Universitario:

Uni1.Nombre = "Pedro";
Uni1.Apellido = "Navarro";
Uni1.Edad = 13;
Uni1.Facultad = "Telecomunicaciones";

Pero no sólo podemos acceder a las propiedades de un objeto mediante la notación expuesta anteriormente, ya que, existe una relación entre los objetos y los arrays, puesto que podemos acceder a un objeto como si este fuera un array y sus elementos fueran los propiedades de dicho objeto en el orden en que se definieron

Uni1[1] = "Pedro";
Uni1[2] = "Navarro";
Uni1[3] = 13;
Uni1[4] = "Telecomunicaciones";

Uni1["Nombre"] = "Pedro";
Uni1["Apellido"] = "Navarro";
Uni1["Edad"] = 13;
Uni1["Facultad"] = "Telecomunicaciones";

Este tipo de vectores se denominan arrays asociativos

Un método es una función asignada a un objeto. Así para asignar una función como método de un objeto se utiliza la siguiente sintaxis:

Podemos observar que el nombre del método es la manera en la que queremos nombrar a la función dentro del objeto

Un método puede ser llamado en un contexto mediante la sintaxis:

Objeto.nombreDelMétodo(parámetros);

La palabra reservada this nos permite referenciar al objeto actual

Por ejemplo, supongamos que la función validate permite validar las propiedades de un objeto mediante un mínimo y un máximo asociados; tendremos:

function validate(obj, lowval, hival){
    if((obj.value < lowval) || (obj.value > hival))
        alert("Valor no válido");
}

Se podrá llamar entonces a la función validate a cambio de los valores de un formulario mediante la palabra reservada this y el atributo OnChange que permite detectar los cambios de valores

Esto se hace mediante la marca HTML y el evento:

<input type = "text" name = "edad" OnChange = "validate(this,18,99)">

De manera general, la palabra this se refiere al objeto actual

El cliente y el servidor tienen un conjunto de objetos predefinidos que pueden ser completados mediante nuevos objetos

La creación de un objeto se hace en dos etapas:

Definir el objeto mediante una función
Crear un objeto mediante la palabra reservada new

Para definir un objeto, se creará una función que permita precisar su nombre, sus funciones y sus métodos asociados

Por ejemplo, si se quiere crear un objeto universitario cuyas propiedades serían nombre, apellido, edad y dni, se definirá la función genérica siguiente:

function Univers(nom, apell, edad, dni){
    this.nom = nom;
    this.apell = apell;
    this.edad = edad;
    this.dni = dni;
}  // this: propiedad del objeto a partir de los argumentos

//La instancia del objeto la crearemos de la siguiente forma:
alumno = new univers("Juan","Delgado",12,44565789);

Las propiedades de un objeto pueden describirse mediante otros objetos

function Nota_M(curso1, curso2, curso3, final){
    this.curso1 = curso1;
    this.curso2 = curso2;
    this.curso3 = curso3;
    this.final = final;
}

Hacemos que el objeto universitario tenga un propiedad del objeto Nota_Media por tanto:

function Univers(nom, apell, edad, dni, exp){
    this.nombre = nom;
    this.apellido = apell;
    this.edad = edad;
    this.dni = dni;
    this.expediente = exp;
}

Por tanto, para acceder a la nota final:

alumno.expediante.final

Cuando se define un objeto, es posible enriquecer su descripción mediante nuevas propiedades

alumno.dni = 44567234;

Ahora la propiedad dni pertenece a la instancia del objeto contenido en alumno

Esta modificación no afectará a los otros objetos del tipo universitario, ya que para añadir una propiedad a un tipo de objeto esta debe figurar en la definición del mismo

La definición de métodos asociados a un objeto puede precisarse en la definición del objeto

Por ejemplo, para el objeto universitario definimos una función que muestre el nombre, apellidos, dni y facultad de un alumno

function Datos(){
    var cadena = this.nombre + " " + this.apellido +
    " " + this.edad + " " + this.dni +
    " " + this.expediente.curso1 + " " +
    this.expediente.curso2 + " " + this.expediente.curso3 +
    " " + this.expediente.final;
    alert(cadena);
}  //this: objeto al que pertenece el método

Esta función se convierte en un método asociado al tipo realizando en su definición lo siguiente:

function Univers(nom, apell, edad, dni, exp){
    this.nombre = nom;
    this.apellido = apell;
    this.edad = edad;
    this.expediente = exp;
    this.dni = dni;
    this.Datos = Datos;
}

Su forma de uso será:

alumno.Datos();

En el siguiente ejemplo se muestra el funcionamiento del tipo universitario que hemos creado

Para ello creamos el siguiente formulario:

<center>
<form id="form1" name="form1">
<table border="1" style="font-size: 7.5px;">
    <thead>
         <tr>
             <th colspan="4"><center>Nota media de la etapa académica</center></th>
         </tr>
     </thead>
        <td><label for="nombre"><strong>Nombre:</strong></label><input type="text" id="nombre" name="nombre" value="ninguno" size="15" /></td>
        <td><label for="apellido"><strong>Primer Apellido:</strong></label><input  type="text" id="apellido" name="apellido" value="ninguno" size="15" /></td>
        <td><label for="edad"><strong>Edad:</strong></label><input type="text" id="edad" name="edad" value="ninguno" size="15" /></td>
        <td><label for="DNI"><strong>DNI:</strong></label><input type="text" id="DNI" name="DNI" value="ninguno" size="15" /></td>
    </tr>
    <tr>        
        <td><label for="nota1"><strong>Primer curso:</strong></label><input type="text" id="nota1" name="nota1" value="0" size="4" /></td>
        <td><label for="nota2"><strong>Segundo curso:</strong></label><input type="text" id="nota2" name="nota2" value="0" size="4" /></td>
        <td><label for="nota3"><strong>Tercer curso:</strong></label><input type="text" id="nota3" name="nota3" value="0" size="4" /></td>
        <td><label for="final"><strong>Nota final:</strong></label><input type="text" id="final" name="final" value="0" size="4" /></td>
    </tr>  
</table>

<input type="button" value=" Ver datos" onClick="Mostrar_Univers(this.form)"></input>
</form>
</center>

La función Mostrar_Univers(form) se define como sigue:

function Mostrar_Univers(form){
    var notas = new Nota_M(form.nota1.value, form.nota2.value,
    form.nota3.value, form.final.value);
    var alumno = new Univers(form.nombre.value, form.apellido.value,
    form.edad.value, form.DNI.value, notas);
    alumno.Datos();
}

Nota media de la etapa académica
Nombre:	Primer Apellido:	Edad:	DNI:
Primer curso:	Segundo curso:	Tercer curso:	Nota final:

Nota No se han comprobado si los datos que se insertan en el formulario son "correctos", es decir, si las notas están entre 0 y 10, si los nombres y apellidos se componen sólo de letras o la edad sea numérica

Valor nulo

En JavaScript a las variables se les puede asignar un valor que indica el valor vacío, este valor es el valor null

La conversión de tipos de datos

Antes que nada, recordar que JavaScript no necesita declaración de tipos

El contenido de la variable se convertirá automáticamente en el transcurso del programa según su uso

El esquema de conversión del tipo se basa en el principio siguiente: el tipo asociado corresponde al del operando de la izquierda

Esto se debe a que la evaluación se realiza de izquierda a derecha

Por ejemplo, supongamos la definición de las variables siguientes:

var una_string = "7";
var un_numero = 42;

Si evaluamos las siguientes expresiones

x = una_string + un_numero;
y = un_numero + una_string;

La primera expresión convertirá la variable un_numero en una cadena de caracteres porque el operando de la izquierda una_string es una cadena de caracteres

Esta expresión concatena las dos cadenas de caracteres y el resultado de x es: "742"

Por el contrario, la segunda expresión convierte la cadena una_string en un valor numérico porque el operando de la izquierda un_numero, es como su propio nombre indica, un número

Esta segunda expresión suma los dos números y el resultado de y es: 49

La conversión de tipos no puede hacerse en todos los casos posibles: ciertas cadenas de caracteres no pueden convertirse en número

Tales conversiones generan un error

Por ejemplo:

var una_string = "Pepe";
var un_numero = 578;
y = un_numero + una_string; // ERROR: Pepe no puede convertirse en número

Tabla que resume la conversión de tipos en JavaScript:

Tipo	Función	Objeto	Número	Booleano	String
Función	—	Función	Error	Error	Descompila
Objeto	Error	—	Error	True	ToString
Objeto nulo	FunObj ok	—	0	False	«null»
Número	Error	Número	—	True	ToString
Número = 0	Error	Null	—	False	«0»
Booleano = true	Error	Booleano	1	—	«true»
Booleano = false	Error	Booleano	0	—	«false»
String	Comilla simple	String	Numstr ok	True	—
String nula	Error	String	Error	False	—

Html, Lenguaje de programación, Javascript, Programación, Página Web

Estructuras de control en Javascript

07 de octubre de 2024 secarcam

Estructuras de control en Javascript

Para las estructuras de control, JavaScript posee las sentencias de control típicas de los lenguajes de alto nivel

Declaración de variables

A las variables en JavaScript no se les asigna un tipo predefinido

En JavaScript el tipo de las variables depende del valor que contengan las mismas en cada momento

Por tanto se realiza una conversión automática de tipos

JavaScript reconoce los siguientes tipos de valores:

Números
enteros y reales
Valores booleanos
true y false
Strings
El valor null
Objetos
Creados por el programador o predefinidos por el lenguaje

Dado que no existen tipos de variables a priori, no hemos de especificar el tipo de variable cuando la declaramos

La declaración de variables se hace anteponiendo la palabra reservada var al nombre de la variable

Es posible asignarle el valor cuando la declaramos

var mi_variable = 124;

La sentencia if

La sentencia if tiene la forma:

if (Condición) {
    Instrucción 1 o bloque de instrucciones;
}
[else{
    Instrucción 2 o bloque de instrucciones;
}]

Los paréntesis asociados que delimitan la condición no son opcionales

En caso de que la condición sea verdadera se ejecutará la instrucción 1; en caso contrario se ejecuta si existe la instrucción 2

El uso de la sentencia else es opcional, por eso en la definición se han utilizado los corchetes

Si se omite, sólo se tendrá en cuenta el bloque de instrucciones cuando la condición sea verdadera

Un bloque de instrucciones es un conjunto de instrucciones delimitadas por llaves

if (Condición) {
    Instrucción 1;
    Instrucción 2;
    ...
    Instrucción N;
}

Las llaves después de la sentencia if no son obligatorias

Si se omiten y la condición era verdadera, se ejecutará la siguiente instrucción

En caso contrario, se ejecutará la subsiguiente instrucción, de forma independiente al estado de la condición

De este modo, la omisión de las llaves después de la sentencia if nos permitirá escribirlo todo en una única línea terminada en ;

if (Condición) Instrucción del if;
Subsiguiente Instrucción;

La sentencia else if

También podemos utilizar sentencias if anidades mediante la sentencia else if

Las sentencias else if funcionan igual que una sentencia if

Pero sólo se ejecutarán en caso de que la condición de la sentencia if fuese falsa

if (Condición) {
    Bloque de instrucciones del if;
}
[else if (Condición) {
    Bloque de instrucciones del else if;
}]

La sentencia switch

Hace que se seleccione un grupo de sentencias entre varias posibles

Es una alternativa al uso de sentencias else if anidadas

Su sintaxis es:

switch (Expresión) {
    case Valor 1:
        Instrucción o bloque de instrucciones;
        [break;]
    case Valor 2:
        Instrucción o bloque de instrucciones;
        [break;]
    case Valor 3:
        Instrucción o bloque de instrucciones;
        [break;]
    ...
    case Valor N:
        Instrucción o bloque de instrucciones;
        [break;]
    [default:]
        Instrucción o bloque de instrucciones;
}

La expresión entre paréntesis del switch debe ser entera

Su resultado se comparará con los distintos valores del case

Si coincide con uno de ellos se pasará a la instrucción siguiente al case con dicho valor y se seguirán ejecutando las instrucciones consecutivas hasta encontrar una instrucción break o alcanzar las llaves de cierre del switch

En caso de que el resultado de la expresión no coincida con ningún valor se pasará la ejecución a la instrucción siguiente de la etiqueta default, si la hubiera, y se continuará como un case

Los valores en los case pueden ser una expresión constante

No puede haber dos case con el mismo valor

La sentencia while

La sentencia while tiene la forma

while (Condición) {
    Instrucción o bloque de instrucciones;
}

Los paréntesis no son opcionales

Si se cumple la condición, se ejecuta la instrucción o el bloque de instrucciones y se repite el proceso hasta que deje de cumplirse la condición

La sentencia do

La sentencia do tiene la forma

do {
    Instrucción o bloque de instrucciones;
while (Condición);

Es muy similar a la sentencia while, excepto que la condición va después de la instrucción o bloque de instrucciones

Con lo que al menos se ejecutan una vez aunque la condición sea falsa

La sentencia for

En cuando a dicha sentencia, en JavaScript podemos distinguir dos variantes:

El bucle for "clásico"
El bucle for / in

El bucle for "clásico"

Este bucle, tiene una sintaxis muy parecida a la de C / C++

for ([inicialización]; [condición]; [expresión]) {
    Instrucción o bloque de instrucciones;
}

En esta sintaxis:

Inicialización crea la variable contador y le da un valor inicial

Condición se debe cumplir para que el bucle se ejecute

Depende de la variable índice

Expresión actualiza el valor de la variable índice

El equivalente de esta expresión con while es:

inicialización;

while (condición) {
    Instrucción 1;
    Instrucción 2;
    ...
    Instrucción N;
    expresión;
}

El bucle for / in

Este bucle, tiene una sintaxis muy parecida al for-each de Java

Itera una variable var sobre todas las propiedades de un objeto obj que se le pasa

Así para cada valor de var se ejecutaran las sentencias del bucle

Por lo tanto, el bucle tendrá tantas iteraciones como propiedades el objeto y en cada iteración la variable tendrá el valor de la propiedad del objeto correspondiente con dicha iteración

Su sintaxis es:

for (var in obj) {
    Instrucción o bloque de instrucciones;
}

La sentencia break

La sentencia break se puede colocar dentro de un bucle o bucles anidados

Cuando se ejecuta la sentencia break se abandona el bucle más interno

A todos los efectos la sentencia break actúa como un salto a la instrucción siguiente al bucle en el que se ejecuta

La sentencia continue

La sentencia continue, no abandona el bucle si no que hace que se ejecute la siguiente iteración

En el bucle while la ejecución del continue hace que el flujo del programa salte a la condición

En el bucle for la ejecución del continue hace que se ejecute la expresión de incremento, para después continuar normalmente con la condición

Es decir, la ejecución del continue evita que se ejecute el resto del cuerpo del bucle

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Formulario

Elementos input

Cuadros de texto

Etiquetas descriptivas

Contraseñas

Correo electrónico

URL

Teléfono

Búsqueda

Casillas de verificación

Casillas de opción

Botones

Enviar el formulario

Resetear el formulario

Adjuntar archivos

Números

Rangos

Paleta de colores

Calendario

Oculto

Cuadro de texto de varias líneas

Listas de selección

Agrupaciones de elementos

CSS

Integración de estilos en una página

Estructura de una hoja de estilo

El árbol DOM

Cascada de estilo

CSS Reset

Selectores

Selector Universal

Selector de etiqueta HTML

Selector de clase

Selector de identificador

Selectores descendientes y adyacentes

Selectores de atributos

Pseudoclases

Ejemplo de Selectores en acción

Posicionamiento de elementos

Modelo de bloque

Modelo flexible

Dirección de los elementos

Ajuste en el eje principal

Alineación del contenido

Ajuste en el eje secundario

Propiedades de los elementos

Modelo de rejilla

Media Queries

Importación de hojas de estilo

Reglas @media

Diseño adaptativo con Media Queries

Diseño adaptativo con el modelo flexible

Diseño adaptativo con el modelo de rejilla

Listas de declaraciones CSS

Unidades de medida

Colores

Propiedades de texto

color

font-size

font-style

font-weight

text-decoration-line

text-decoration-color

text-decoration-style

text-transform

letter-spacing

word-spacing

line-height

text-align

text-indent

Propiedades de fondo

Dimensiones y bordes

Propiedades para listas

Otras propiedades

Preprocesadores CSS

LESS

Instalación

Variables

Mixins

Código heredado