Miguel Ángel Valiente BLOG

Hoy explicare una herramienta web para comprobar la accesibilidad de una web. Además de la accesibilidad también se puede revisar el HTML y el CSS. La pagina en cuestión es AChecker , es totalmente gratuita y nos da bastante información que más adelante explicare mas en profundidad. El uso de la pagina es muy sencillo, por defecto no tendríamos que tocar nada simplemente poner la URL de la web que queremos analizar pero podemos añadir diferentes opciones para el análisis. Una vez finalizado el análisis nos mostrara todos los errores y fallos de la web. Estos se dividen en 3 pestañas "Known Problems", "Likely Problems" y "Potencial Problems".  En cada una de estas pestañas se mostraran la pauta donde existen problemas, la forma de repararlos y en que linea y columna del código se encuentran incluyendo la propia linea. Y así de sencillo es usar esta herramienta que nos ayudara a mejorar la accesibilidad de nuestr...

Esta sera una breve introducción de los recursos que descargan las web para su correcto funcionamiento, en entradas posteriores veremos toda la información sobre ellos. De momento solo mostrare como verlos y que tipos existen. Esto es tan sencillo como abrir el menú de herramientas pulsando F12, una vez hecho eso nos dirigiremos a la pestaña llamada "red". Aquí nos aparecerán todos los recursos descargados: En la zona superior podemos filtrar los recursos, existiendo un total de 8 tipos bien especificados y 1 tipo que engloba otros varios. A continuación explicare que es cada tipo: HTML : es bastante obvio, son todos los documentos HTML que se han descargado. CSS : nos mostrara todas las hojas de estilo que la web ha descargado por necesidad. JS : son todos los archivos javascript con las funciones para el correcto funcionamiento de la web. XHR (XMLHttpRequest) : es una interfaz empleada para realizar peticiones HTTP y HTTPS a serv...

Resumen: TLS 1.3 se ha convertido en el nuevo estándar de seguridad online desbancando a su anterior versión 1.2. Esta nueva versión de TLS ofrece una mayor seguridad a la hora de cifrar las comunicaciones entre el cliente y el servidor, reduciendo también la latencia e las comunicaciones. Unas de las principales mejoras es el uso de PFS (Perfect Forward Secrecy) en todas las sesiones, el uso de PFS anteriormente era opcional.   PFS obliga a usar claves diferentes en cada sesión que se establece. De esta manera, si un hacker consigue hacerse con una de las claves, todas las sesiones pasadas y futuras seguirán siendo seguras, ya que con dicha clave solo podría descifrar el tráfico de la sesión actual.   El mayor inconveniente de esta mejora de seguridad es la necesidad del uso de soluciones de seguridad basadas en Inteligencia Artificial que sean capaces de, sin descifrar el tráfico, analizar los encabezados de los paquetes y, acorde a unas bases de datos, identifi...

En esta entrada hablare de los tipos de errores que pueden aparecer a la hora de ejecución de nuestro código en el navegador. Existen 3 tipos de errores principalmente: Error: se dan cuando hay fallos en la sintaxis del código, evitando así que se compile el código. Advertencia: nos avisa de la existencia de una mala codificación y sugieres fallos en el diseño, a pesar de esto el código se compila. Mensaje: son parecidos a los de advertencia pero están en desuso. A continuación mostrare como usar filtro para ver los diferente errores, usare la página de Google para los ejemplos: 1º Debemos abrir la consola de comando tal y como se ha explicado en entradas anteriores: 2º Clickaremos sobre el icono con forma de embudo, esto abrirá una barra con algunas opciones:   3º Por defecto vienen todos los errores marcados para que estos se muestren desde un principio, ya desde aquí podemos marcar o desmarcar a nuestro gusto: Existen varios comandos para lanzar...

Hoy veremos una propiedad de CSS que no se ha visto en clase, esta propiedad es cursor. Básicamente sirve para hacer que en nuestra pagina se pueda usar un cursor personalizado o solo en zonas concretas. Existen ya algunos cursores ya definidos, en este enlace se encuentran los diferentes cursores. En el siguiente ejemplo usare dos párrafos de ejemplo, en el primero aplicare un cursor predefinido y el segundo un cursor descargado de Internet: Al usar un cursor .ico para nuestra página debemos poner seguido de una coma otro cursor predefinido, esto simplemente es por si el cursor personalizado falla aparezca otro cursor. En Firefox es necesario usar un archivo .ico para que funcione. En Edge solo se admiten archivos .ico o .cur.

En este tutorial veremos como ver en todo momento el valor de nuestras variables a la hora de ejecutar una función de javascript. En este ejemplo usare una función muy simple "suma", esta función realiza la suma de dos variables que se le pasan cuando se llama a la misma. Los primeros pasos de como abrir la herramienta debugger ya se vio en la primera parte, así que saltare directamente a ensañar como se ven las variables. 1º Debemos poner un punto de ruptura donde queramos parar la ejecución del script: 2º Iniciaremos la depuración, en la zona de la derecha aparecerán las variables que maneja la función en recuadro con el nombre de "ámbitos": Durante el depurado veremos como las variables van cambiando:  Y así es como se ven las variables a lo largo de la función.

Hoy os hablare de una herramienta muy útil para CSS, esta herramienta nos ayudara a acelerar nuestro trabajo a la hora de desarrollar el estilo de nuestra pagina.  Su uso es realmente sencillo y en cuestión de segundos podremos ahorrarnos bastante tiempo de desarrollo. 1º Primero debemos ir a la pagina de Bear CSS , allí ya nos explicaran lo que debemos hacer pero yo lo vuelvo a explicar. 2º Arrastraremos nuestro archivo .html en la zona de "drag & drop", con esto la pagina comenzara a analizar nuestro archivo y nos generara en una nueva pestaña un documento de texto donde se encuentran todos los selectores posibles de nuestra pagina (selectores de etiquetas, id, clase, etc). 3º El paso final es copiar todo el contenido de ese texto y pegarlo en nuestra hoja de estilo. 

La Herramienta que comentare esta semana sera le vista de diseño adaptable. Esta herramienta esta disponible tanto en Firefox como en Chrome. Esta funcionalidad nos permite ver como afectaría la resolución de diferentes pantallas a nuestra pagina web. Existen dos formas principalmente de acceder a dicha herramienta. La primera en pulsando Ctrl+Mayús.+M o pulsando F12 y clickando en el icono marcado en la siguiente imagen. Una vez aquí veremos que en la parte superior aparecen las medidas que tiene la pantalla donde se visualiza nuestra pagina, la cual podemos cambiar a nuestro gusto.  En el siguiente ejemplo vemos la diferencia entre un ancho de 900 y uno de 1446, donde apreciamos que al tener unas medidas superiores se despliega de forma automática la barra lateral izquierda, mientras que la menos revolución tendíamos que pulsar en el menú de hamburguesa para que esto pasase. En la zona superior izquierda tenemos una opción que por defecto esta e...

Hoy veremos como cambiar el CSS del tema que estemos usando en nuestra pagina de Blogger, existen dos formas para hacer esto. La primera y la mas útil es dirigiendonos a la pagina principal de administración de nuestro blog. Después clickaremos en la opción "Temas". Le daremos en personalizar y esto nos llevara a una pagina donde veremos en tiempo real los cambios que realizamos en nuestro blog. De las 4 opciones que tenemos en la parte superior izquierda nos iremos a la opción "avanzado", tras esto veremos que se han desplegado varias opciones, la ultima es añadir CSS. Una vez le demos se nos abrirá un editor de texto donde podemos escribir reglas de CSS, estos cambios se nos mostraran en tiempo real y los podremos guardar dandole al botón de la parte superior derecha "Aplicar al blog". La segunda forma y la mas difícil de ver es siguiendo los mismos pasos, pero una vez en la sección temas le daremos a "...