Entradas

Mostrando entradas de 2018

Herramientas de Desarrollador Web en Mozilla Firefox - Cabeceras

Imagen
Las cabeceras o headers permiten al cliente y al servidor el envio de información adicional junto a una petición o respuesta.  Las cabeceras pueden agruparse según su contexto de la siguiente manera:  - Cabecera General: se aplican tanto a las peticiones como a las respuestas, pero no se relacionan con los datos que se finalmente se transmiten en el cuerpo de la petición. - Cabecera de Petición: se puede usar en una solicitud HTTP y no se relaciona con el contenido del mensaje - Cabecera de Respuesta: se puede usar en una respuesta HTTP y que no se relaciona con el contenido del mensaje. Los encabezados de respuesta, como Age , Location o Server se utilizan para proporcionar un contexto más detallado de la respuesta.  - Cabecera de Entidad: es un encabezado HTTP que describe el contenido del cuerpo del mensaje. Los encabezados de entidad se utilizan tanto en solicitudes HTTP como en respuestas. Los encabezados como Content-Length, Content-Languag...

Herramienta de Usabilidad - ResponsiveDesignerChecker

Imagen
Una de las cosas mas importante para nuestra pagina web es que sea responsive, llega a ser tan primordial que en muchas ocasiones primero se diseña la web para móvil y después para el resto de dispositivos. A continuación os mostrare una pagina para comprobar si nuestra web es responsive o no, aquí encontrareis la web. La utilización de la web es muy sencilla, solo debemos poner la URL de la web: Y nos cargara dicha web, dándonos la posibilidad de cambiar el tamaño en el que esta se vería. Podremos elegir entre distintos dispositivos y pantallas (monitores, tablets y móviles) o si queremos podemos poner unas dimensiones a nuestro gusto. En esta ultima imagen vemos como la pagina de la tienda online RaccoonGames no es responsive. Por lo tanto en móviles y otros dispositivos su uso se ve mermado. G M T Detect language Afrikaans Albanian Amharic Arabic Armenian Azerbaijani Basque Belarusian Bengali Bosnian Bulgarian Catalan Cebuano Chichewa...

Herramientas de Desarrollador Web en Mozilla Firefox - Recursos p.2

Imagen
En esta segunda parte sobre los recursos explicare todos los campos que componen un recursos y  los detalles de la solicitud. Comenzando por los campos nos encontramos los siguientes: - Estado: aquí se nos muestra si se ha obtenido correctamente el recurso, mostrara un circulo verde y un código 2XX si es correcto, naranja y un código 3XX si se a redireccionado o rojo y un código 4XX/5XX si han ocurrido errores. - Método: el método de solicitud HTTP. - Archivo: nombre del archivo descargado. - Dominio: dominio del PATH solicitado. -Tipo: el content-type de la respuesta. -Tamaño: el tamaña del recurso. Además de todos estos campos hay una linea temporal donde se nos muestra, en ella podemos ver el tiempo que tardo en cargar la pagina y en que momento se cargo cada recurso. Si hacemos click en alguno de los recursos se nos abrirá una ventana en la derecha de las herramientas. En esta ventana se nos muestran los ...

Herramienta de Accesibilidad - Achecker

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

Herramientas de Desarrollador Web en Mozilla Firefox - Recursos p.1

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

TLS 1.3 pone las cosas mucho más difíciles a los hackers

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

Herramientas de Desarrollador Web en Mozilla Firefox - Tipos de Errores

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

Propiedad CSS - Cursor

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