Tag Archive for distinta

| April 5, 2013
10 comments

Usar PDO en PHP | Parte 2: Hacer consultas

Hola, tercera parte  del tutorial sobre PDO en PHP; como pone en el título, en esta parte os voy a enseñar cómo hacer consultas y así saber todo lo que uno ha de saber acerca de esta manera tan eficiente de manejar bases de datos en PHP. Primero veamos cómo se hace en MySQL y PHP normal, el de toda la vida:

<?php
$conexion = mysql_connect('localhost', 'usuario', 'contraseña') or die('Could not connect: ' . mysql_error());
mysql_select_db('bd', $conexion);
$sql = mysql_query("SELECT * from usuarios");
while($columna = mysql_fetch_array($sql)){
	echo $columna["Nombre"];
}
?>

Todo esto dejando de lado aspectos de seguridad, ya que esto podría ser “hackeable”. En PDO se hace de una manera completamente distinta pero a la vez mucho más segura, haciendo uso de los “prepared statements”, con el fin de que nuestra web sea más difícil de acceder. Se hace de la siguiente manera (aprovechando el código de la parte 1):
Read more

Category: PHP y MySql | Tags: , , , , , , , , ,
| March 13, 2013
3 comments

Efecto Parallax HTML5

Uno de los trends de diseño más importante en los últimos meses o el último año es el efecto Parallax. Muchas grandes agencias de diseño han construido sitios dignos de un awwward basados en este patrón.

El efecto Parallax, en general, se refiere a elementos dentro de un objeto visible que se mueven a distinta velocidad, así pues, es posible que el ejemplo más claro de Parallax lo hayamos visto jugando, por lo general, en un juego el fondo se mueve más lento que los personajes y/o assets, eso es Parallax. En diseño esto se ha aplicado en efectos vistosos, para ejemplo ésta página de Nike que muestra una aplicación que usa javascript para construir un efecto muy vistoso con elementos moviéndose y mostrándose en el foco a distintas velocidades.

Por lo general, el efecto se construye utilizando javascript, si bien puedes logar esa clase de resultados utilizando “javascript crudo”, es decir, sin plugins, en la web ya hay gente que ha pasado por esto y ha decidido regalarnos algunos plugins, entre los más populares:

Stellar.js: Échale un vistazo porque es la librería que utilizamos en el tutorial.

Scrollorama: Esta librería me parece genial, y un ejemplo de lo que puedes hacer con ella, lo encuentras en éste enlace.

Pasemos al código.

El código del tutorial es bastante sencillo, deduciendo que ya tienes la estructura de tu HTML, de la página a la que le aplicarás el efecto, vamos a enlazar un par de scripts, el primero es jQuery y el segundo Stellar.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src='https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.js'></script>

 

Ahora que tenemos listas las librerías, queda ejecutar la función de stellar para que ejecute los efectos correspondientes:

<script>
$(function(){
$(window).stellar();
});
</script>

 

Una vez hecho esto, stellar tomará una serie de atributos para definir el movimiento de los elementos al hacer el scroll, estos atributos son atributos data de HTML5, los valores de estos atributos van desde el 0 que significa sin movimiento, hasta cualquier valor entero, donde el 1 significa moverse a velocidad normal, y el 2 moverse al doble de velocidad que el resto de la página. Los atributos son:

  • data-stellar-ratio: Que define el movimiento de un elemento
  • data-stellar-background-ratio: Que define el movimiento del fondo de un elemento.

Existen más atributos para modificar el comportamiento de la página, y puedes checarlos en la documentación del plugin.

Sin más, quiero dejarte con un enlace para el vídeo tutorial en mi canal sobre este post.

Category: HTML | Tags: , , , , , , , ,