Entradas

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

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

Herramienta Web para CSS - Bear CSS

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

Herramientas de Desarrollador Web en Mozilla Firefox - Vista de Diseño Adaptable

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

Cambiar el CSS del tema de Blogger - Tutorial

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

Herramientas de Desarrollador Web en Mozilla Firefox - Editor de Estilo

Imagen
En el tutorial de hoy os mostraré como ver el css asociado a nuestra pagina y como modificarlo, en esta ocasión he creado una pagina nueva con una etiqueta h1 a la cual le he aplicado con css un color y un borde. 1º- Deberemos sacar las herramientas de desarrollador igual que hicimos en tutoriales posteriores, pulsaremos F12: En el mismo inspector a la derecha podemos ver que si clickamos en el elemento h1 a la derecha nos sale que estilo se le esta aplicando, desde aquí ya podremos editar el css haciendo click en la propiedad, por ejemplo cambiándole el color: 2º- Pero nosotros queremos todos los css que esta usando la pagina así que nos iremos a la pestaña Editor de estilos, donde se nos mostraran todos los css que esta usando dicha pagina: 3º- Desde aquí también podremos ya cambiar el css, primero clickaremos en el archivo que deseamos ver, esto nos abrirá el archivo como si estuviéramos en Visual Studio Code por ejemplo: Estos cam...

Publican en Twitter una nueva vulnerabilidad Zero-Day de Windows que permite ganar permisos en el sistema

Resumen: Un investigador de seguridad ha publicado en Twitter una nueva vulnerabilidad que afecta a Windows, si se consiguiese explotar dicha vulnerabilidad se podrían obtener permisos elevados en el sistema. Hace un par de meses este usuario conocido como SandboxExcaper  publico un exploit Zero-Day que afectaba al programador de tareas de Windows. El pasado día 24 publico en el siguiente repositorio de GitHub un exploit Zero-Day el exploit que afecta a los permisos y el acceso de privilegios a posibles atacantes que logren explotarla. El defecto se encuentra en la escalada de privilegios que está presente en el uso compartido de datos de Microsoft (dssvc.dll). Este servicio se ejecuta en LocalSystem con amplios privilegios y proporciona el intercambio de datos entre aplicaciones. Este servicio de intercambio de archivos fue introducido en Windows 10. Esto significa que esta vulnerabilidad de Zero-Day solo afecta a los usuarios de este sistema operativo. Se espera que Mi...

Herramientas de Desarrollador Web en Mozilla Firefox - Inspector

Imagen
Hoy veremos como ver el código fuente de una página, el código fuente es el HTML en el que se basa una pagina web. Para poder verlo existen dos maneras principalmente. Para este ejemplo y posiblemente para los siguientes usaremos el ejercicio operandos3.js La primera y la más sencilla es haciendo click derecho en la pagina web y le daremos a la opción "" ver código fuente": Al hacer esto se nos abrirá una nueva pestaña en la que veremos todo el código fuente (HTML): La segunda forma y la que más nos interesa es la de ver el código fuente desde las herramientas de desarrollo del navegador, lo primero seria pulsar F12: Lo que se nos muestra en la parte inferior seria el código fuente: Ya con esto podríamos ver todo lo que compone la pagina, pero además podemos añadir código propio para ver como se vería en la pagina, estos cambios no serán permanentes. Si hacemos click derecho en alguna etiqueta como en el siguiente ejemplo la etiqu...