Blog de Notas sobre Temas Introductorios al Desarrollo Web: HTML y CSS

  A cifras de Enero de 2016, la resolución de pantalla más común era de 1.366 x 768 píxeles, la típica resolución de los portátiles.   Hoy en día existen multitud de dispositivos que permiten acceder a la Web, lo que origina que no exista una resolución de pantalla estándar.   En marzo de 2009, la resolución más común era 1024x768 con un 42%. La siguiente resolución más popular era 1280x800 con casi un 20%. En octubre de 2014 la resolución de 1024x768 sólo representaba un 5%, igual que 1280x800. Fuentes:www. dgcomunicaciones.net Activate, Google España        

Para conseguir que algunos enlaces cambien de color cuando ya estuviste en esa página, cuando los mantienes pulsados o se modifica su estilo cuando pasas el ratón por encima de ellos se utiliza el carácter “:”   El estado :link , solo aplicable a enlaces, modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla. El estado :visited se aplicará a los hipervínculos visitados, es el selector complementario a :link. El estado :hover modifica el estilo cuando el puntero del ratón está sobre un elemento al que se le aplica la regla. Importante : En caso de enlaces, es muy importante declarar :hover después de :link y :visited, en caso de que existan, para que :hover funcione correctamente. El estado :active se aplica a enlaces que están siendo pulsados. Normalmente no mantenemos pulsado un hipervínculo, puesto que su principal utilidad es la navegación, pero es posible definir enlaces sin destino para casos particulares como pue...

Un fichero de CSS puede tener cientos de líneas y depende como lo escribas puede ser fácil o muy difícil de leer. Espacios en blanco, tabuladores y saltos de línea ayudan a que el código se visualice más claramente. Algunas personas prefieren escribir todo el código en una sola línea y esto dificulta la lectura y la revisión del código aplicado. Otras personas prefieren escribir una propiedad por línea, y otros prefieren que las propiedades aparezcan con sangría (con dos o cuatro espacios o con tabulación). Otras variantes las encontramos con la posición de las llaves de apertura (algunos casos situándolas detrás del selector, en otros en una línea nueva). También otro estilo de ordenamiento del código es alinear todo verticalmente, aunque según expertos en la materia este estilo es difícil de mantener. Otro mecanismo que facilita la lectura de un CSS son los comentarios. Estos empiezan con /* y finalizan con */ . Los comentarios ayudan a definir partes en un CSS, por ej.: ...

El selector universal se representa mediante un asterisco * .   Cuando se incluye en una regla, el selector universal selecciona todos los elementos . Muchos expertos desaconsejan su uso ya que es difícil tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta. El selector universal se aplica a veces para inicializar todos los elementos de una página web a un mismo estado, por ejemplo establecer el margen y el relleno de todos los elementos en seis píxeles.   Fuente: Activate, Google España      

CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector. Cada declaración de estilos se define entre llaves {} , y está formada por parejas propiedad valor.   Fuente: Activate, Google España    

El acoplamiento informático según la definición de Wikipedia,  indica el nivel de dependencia entre las unidades de software de un sistema informático , es decir, el grado en que una unidad puede funcionar sin recurrir a otras ; dos funciones son absolutamente independientes entre sí (el nivel más bajo de acoplamiento) cuando una puede hacer su trabajo completamente sin recurrir a la otra. En este caso se dice que ambas están desacopladas. Evidentemente, lo mejor sería un desacoplamiento total, es decir que no hubiese ninguna dependencia entre las partes que constituyen un sistema informático. Pero esa situación es más bien imposible de lograr. Por lo tanto, al final lo que se intenta lograr es reducir el acoplamiento al mínimo posible: cuanto menos dependientes sean las partes que constituyen un sistema informático, mejor será el resultado final. Cuando usamos CSS para definir la presentación de una página web escrita en HTML, se crea un acoplamiento entre HTML y CSS...

Estos son atributos de contenido incluidos en HTML5 para el elemento “input” que pueden ser utilizados en formularios HTML5. ·          step : este atributo especifica los intervalos numéricos válidos para un elemento <input>. Puede ser usado junto con los atributos “max” y “min” para crear un rango cerrado de valores válidos de un campo. El atributo “step” funciona con los tipos de <input>: number, range, date, datetime, datetime-local, month, time y week. ·          pattern : permite validar un elemento < input> en base a una expresión regular  (RegEx). Las expresiones regulares son modelos o patrones que describen las combinaciones de caracteres que se pueden introducir en el campo de texto (las que se tomarían como correctas). Pattern funciona con los tipos de <input>: text, search, url, tel, email, y password. ·     ...

Estos son algunos nuevos atributos de contenido incluidos en HTML5 para el elemento “ input ” que pueden ser utilizados en formularios HTML5 .     autocomplete : nos permite especificar si un formulario completo o un campo de éste debe tener la opción de autocompletado activada o no. Cuando el autocompletado esté activado (es decir, cuando su valor sea “on”), el navegador completará automáticamente el campo con valores que el usuario haya introducido en ese campo en ocasiones anteriores. Si se desactiva (asignando el valor “off”) lo que se consigue es prevenir que un campo se autocomplete automáticamente, ya que en muchos casos este autocompletado puede causar problemas, incluso de seguridad. Es posible tener el autocompletado a “on” en un formulario, y a “off” en uno o más campos dentro del mismo formulario (por ejemplo en el campo de contraseña), y viceversa.   Autocomplete funciona con el elemento <form> y...

  Los siguientes son controles de formularios de HTML5 y se utilizan para:     search : se usa para definir campos de búsqueda en formato de texto, adquiriendo un aspecto gráfico más adecuado a su función. range : se usa para definir campos que deban contener un valor numérico que esté dentro de un rango específico, rango que definimos con los atributos “min” y “max”. datetime : permite al usuario seleccionar la hora completa además del día, mes, año y zona horaria. datetime-local : permite al usuario seleccionar la hora completa más el día, mes y año, pero en este caso, a diferencia del anterior, no se incluye la zona horaria. date : permite al usuario seleccionar una fecha completa formada por día, mes y año. month : permite al usuario seleccionar un mes y un año específico. week : permite al usuario seleccionar una semana y un año específicos. time : permite al usuario seleccionar la hora, en formato de horas y minutos. Fuente: Act...

Además de AJAX , la técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador, también existen una serie de nuevas tecnologías que realizan la misma función . Todas ellas son conocidas como: “ la familia de tecnologías HTML5 ”: ·          Canvas : tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo. ·          SVG : un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos utilizando un lenguaje similar a HTML. ·            Geolocalización : Otra ...

En HTML5 los nuevos tipos de input con respecto a la especificación anterior (HTML4.01) y los atributos asociados a éstos suponen una mejora significativa para el manejo de formularios , ya que nos permite gestionarlos de manera nativa.   Por lo tanto a partir de su utilización  se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente. Supone asimismo un ahorro de tiempo y de ancho de banda , ya que, por un lado, permite que el formulario NO sea enviado si no es válido , y por otro lado, permite informar al usuario de que alguno de los valores introducidos no cumple los requisitos definidos . Para los usuarios, los formularios tienen con HTML5 un comportamiento mucho más intuitivo , donde por ejemplo, se pueden mostrar pistas sobre lo que se debe introducir en los campos de entrada, mostrar un calendario interactivo al usuario para rellenar un campo de fecha o incluso se puede selecc...

AJAX   significa Asynchronous JavaScript And XML y permite crear páginas web en las que cambia su contenido sin que se tenga que recargar la página. E s el resultado de la suma de tecnologías , como el API de programación XHR, XMLHttpRequest, el metalenguaje XML y el formato de intercambio de datos JSON.   Es una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador.   Fuentes: Activate, Google España

Además del lenguaje de marcado HTML, para desarrollar páginas web se emplean otras tecnologías como las hojas de estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado JavaScript . El uso combinado de estas cuatro tecnologías se conoce como DHTML, el HTML dinámico , que permite crear sitios web interactivos.   Fuente: Activate, Google España

En una entrada anterior había señalado que la etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar columnas . Aunque su uso no es muy común, HTML define dos etiquetas similares para agrupar columnas: <col> y <colgroup> . La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de forma simultánea . De esta forma, la etiqueta <col> no agrupa columnas, sino que sólo asigna atributos comunes a varias columnas. La etiqueta col no tiene etiqueta de cierre, pero conviene cerrarla adecuadamente para cumplir con el estándar. Por otra parte, la etiqueta <colgroup> se emplea para agrupar de forma estructural varias columnas de la tabla . La forma habitual de indicar el número de columnas que abarca la agrupación es utilizar el atributo span , que establece el número de columnas de cada agrupación.   El uso de las etiquetas <col> y <colgroup> ...

  Las imágenes HTML se definen con la etiqueta <img> Dicho elemento se acompaña del parámetro src para indicar la ubicación de la imagen ( source en inglés). El formato general es el siguiente: <img src="nombredelaimagen.png" /> Por cuestiones de accesibilidad, cada imagen debe acompañarse siempre de un texto que será mostrado en el caso de que, por cualquier motivo, la imagen no esté disponible y que sirve también como descripción en aplicaciones lectoras para personas con discapacidad. El texto alternativo se inserta con el atributo alt . Así, un par de imágenes correctas quedarían de la siguiente manera: < img src="recursos/calle.jpg" alt="Una calle con coches y tiendas" />    Existen atributos de tamaño para la imagen, ellos son:    width (ancho) height (alto); Con ellos podemos indicar explícitamente la anchura y altura que tendrá una imagen. img elemento que no tiene etiqueta de cierre...