Archive for Desarrollo web

septiembre 5th 2017

Responsive Design: adaptar vídeos

Número de lecturas: 470
{lang: 'es-419'}

En algun momento necesitamos utilizar videos dentro de nuestros aplicativos web en ese caso se vuelve problematico que se muestren bien en la web, el problema es peor cuando te piden que sea responsive (que se adapte a cualquier dispositivo) .

Para esto es util .css y utilizando este codigo se soluciona el problema.

/* Este es el código del ejemplo con un máximo de 600px de ancho */
video{
 
    width:100%;
    max-width:600px;
 
}
/* Y así se adaptaría al 100% del ancho de página (para webs móviles sería útil) */
video{
 
    width:100%;
 
}

Con esto la pantalla tendra un tamano maximo de 600px y se adapta a cualquier dispositivo.

Si se desea realizar el mismo proceso con videos de youtube o vimeo se tendria que hacer lo siguiente:

<div class="video-responsive">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/TE0gXOGc9V4" frameborder="0" allowfullscreen></iframe>
</div>

Y el codigo .css lo siguiente:

.video-responsive {
    position: relative;
    margin-bottom: 20px;
    padding-top: 56.25%;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Fuente:
xitrus.es

bufa.es

agosto 28th 2017

Escanea la seguridad de tus aplicaciones Web con Spaghetti

Número de lecturas: 728
{lang: 'es-419'}

A diario se crean miles de aplicaciones web, muchas de ellas sin seguir lineamientos de seguridad básicas, para analizar que nuestras aplicaciones web se encuentra en un nivel de seguridad alta es posible usar Spaghetti, un escaner de vulnerabilidad bastante interesante.

¿Qué es Spaghetti?

Es una aplicación de código abierto, desarrollada en Python que nos permite escanear aplicaciones web en búsqueda de vulnerabilidades, la aplicación esta diseñada para encontrar varios archivos predeterminados o inseguros, así como para detectar configuraciones erróneas.

aplicaciones web

Al ser desarrollada en python esta herramienta puede ser ejecutada en cualquier sistema operativo que sea compatible con la versión 2.7 de python.

Contiene un potente Fingerprinting que nos permite recopilar información de una aplicación web, entre las que se destacan la información relacionada al servidor, el framework utilizado para su desarrollo (CakePHP,CherryPy,Django,…), si contiene un firewall activo (Cloudflare,AWS,Barracuda,…), si ha sido desarrollado utilizando un cms (Drupal,Joomla,Wordpress,…), el sistema operativo en el que se ejecuta la aplicación y el lenguaje de programación utilizado.

Además viene equipado con otras series de funcionalidades que permitirá hacer un exhaustivo analisis de la integridad y seguridad de una aplicación web, todo esto desde la terminal y de manera sencilla.

En líneas generales una vez que ejecutemos la herramienta simplemente debemos elegir la url de la aplicación web que deseamos analizar e introducir los parámetros correspondiente a la funcionalidad que deseamos aplicar, luego la herramienta hará el análisis correspondiente y mostrará los resultados obtenidos.

¿Cómo instalar Spaghetti?

Para instalar Spaghetti en cualquier distro simplemente debemos tener instalado python 2.7 y ejecutar los siguientes comandos:

$ git clone https://github.com/m4ll0k/Spaghetti.git
$ cd Spaghetti 
$ pip install -r doc/requirements.txt
$ python spaghetti.py -h

Luego simplemente podemos utilizar la herramienta en todas las aplicaciones web que deseemos escanear. La utilidad es bastante poderosa y fácil de usar, además cuenta con un desarrollador muy activo, que se especializa en herramientas relacionadas a la seguridad informática.

Es importante destacar que el mejor uso que le podemos dar a esta herramienta es el de encontrar brechas de seguridad abiertas en nuestras aplicaciones web, para solventarlas y hacerlas más segura, no obstante, algunos usuarios podrían aprovechar esta herramienta para intentar acceder a aplicaciones web que no son de su propiedad por lo que recomendamos dar un uso adecuado a la misma.

 

Fuente:
blog.desdelinux.net

agosto 7th 2017

Mostrar y ocultar contenido con hide y show

Número de lecturas: 1405
{lang: 'es-419'}

Una de las cosas que más nos interesan a los webmasters es realizar un sitio con contenido dinamico y que por sobre todo sea completamente atractivo para el usuario. En muchos casos hay información que no deseamos mostrar salvo que el usuario quiera verla (como comentarios), y debemos ocultar dicho div, y tan solo mostrarlo cuando él usuario desea.

En este artículo vamos utilizar las funciones jQuery hide() y show() + CSS para lograr este propósito.

Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;” por ejemplo:

el estilo incluir style=”display:none;” por ejemplo:

<div id="element" style="display: none;">
   <div id="close"><a href="#" id="hide">cerrar</a></div>
   Este es un div ocultar
</div>

También deremos tener un link con id único también para invocarlo con jQuery con el objetivo de realizar la llamada a show().

<a href="#" id="show">Mostrar</a>

Y en nuestro <head> deberemos incluir la librería jQuery + la lógica de mostrar y ocultar el contenido y algunos estilos para mejorar la presencia de los elementos.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("#element").hide();
  });
  $("#show").click(function(){
    $("#element").show();
  });
});
</script>

Al hacer click en el elemento con id=”show” estamos llamando a la función show() de jQuery para mostrar el contenido que hay escondido en el contenedor con id=”element”.

Y si hacemos click en el elemento con id=”hide” estamos mandando a esconder el elemento con id=”element” utilizando la función hide() de jQuery.

Ejemplo del funcionamiento

 

Fuente:

jose-aguilar.com

julio 24th 2017

7 comandos de Vagrant que te debes de aprender

Número de lecturas: 820
{lang: 'es-419'}

7 comandos de Vagrant que te debes de aprender sí o sí. Siguiendo la serie de artículos sobre la guía rápida de Vagrant, en este toca enumerar los 7 comandos de Vagrant que vas a utilizar cada día.

La guía completa de comandos de Vagrant la puedes encontrar aquí, aún así voy a resumir los más usados para que sirva como guía rápida.

7 comandos de Vagrant que te debes de aprender

vagrant init

Con este comando creas un archivo Vagrantfile vacío.

vagrant init hashicorp/precise64

Si lo que quieres es crear un Vagrantfile apuntando a un box concreto, simplemente tienes que poner el nombre o la URL al final.

vagrant up

Arranca una máquina virtual. En el directorio tiene que haber un archivo Vagrantfile (lógicamente)

vagrant suspend

Guarda el estado de la máquina virtual y temporalmente cierra la máquina virtual. Si volvemos a ejecutar vagrant up la máquina virtual se restaurará rápidamente en el punto donde la dejamos.

vagrant ssh

Entras en la máquina virtual que tienes arrancada usando ssh. Vagrant usa automáticamente sus claves ssh y las copia en la máquina virtual, es por eso que no es necesario autenticarse con usuario y contraseña.

vagrant provision

Vuelve a ejecutar tu script de arranque (si lo has actualizado) sin tener que crear la máquina virtual desde cero.

vagrant reload

Resetea la máquina virtual a su estado inicial y vuelve a lanzar el script de arranque.

vagrant destroy

Borra la máquina y el disco virtual creado, aunque conserva el box de inicio.

Lo dicho para la guía completa de comandos de Vagrant, aquí está la documentación oficial.

Happy Vagrant!

Fuente:

http://albertoromeu.com