Cristalab

---

• Diseñar una barra de progreso en Photoshop
• Uso de transiciones en CSS3
• Conexión SQL Server 2008 y LDAP con PHP
• Icono de calendario en Photoshop
• #23: HTML5

Diseñar una barra de progreso en Photoshop Posted: 09 Aug 2012 04:03 AM PDT Usaremos los conocimientos adquiridos en videotutoriales anteriores de nuestra serie de Photoshop, junto con nuevas posibilidades del modulo de animación, para generar una barra de progreso, adornada con motivos personalizados y con una animación suave y simple, haciendo uso de las transiciones. Daremos forma a nuestra barra y a sus diferentes estados de crecimiento, trabajando con las formas y con los siempre útiles estilos de capa, para posteriormente trabajar con las opciones del módulo de animación, asignando fotogramas y aprendiendo a hacer transiciones suaves. Saludos.

Uso de transiciones en CSS3 Posted: 09 Aug 2012 03:21 AM PDT Este tutorial documenta cómo hacer transiciones sutiles y fáciles con CSS3. El parámetro transition es un parámetro de CSS3 y CSS2 UI, es decir, que lo implementan navegadores por separado. Para usarlo está la forma estándar establecida por W3c y las propias de los navegadores, por ese motivo de compatibilidad es mejor declarar las propiedades para todos los navegadores, ya que si una no funciona, otra sí lo hará. La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9). Código : /* Parámetro estándar */ transition: /* Parámetros según navegador */ -webkit-transition:/* Chrome y Safari */ -moz-transition:/* Mozilla */ -o-transition:/* Opera */ Cómo funcionan las transiciones en CSS3 Realmente lo que hace este parámetro es detectar los cambios del elemento en el estilo, ya sea añadirle un estilo o sea una modificación por pasar por encima (:hover). Coge el parámetro anterior y pasa al siguiente de forma progresiva en el tiempo establecido. Debe de establecerse transition en el elemento origen, no es recomendable hacerlo en el destino (:hover) o cambiando la clase. Este es un ejemplo de estilos sin aplicar transition y su procedimiento: Código : /* Estilo de un DIV con la clase TRA */ .TRA{    width:100px;    height:100px;    background:#099; } /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */ .TRA:hover{    width:200px;    height:200px;    background:#990; } Con el código de arriba añadiéndole una transición aumentaría de tamaño progresivamente el DIV y cambiaría su color de fondo también de forma progresiva. Parámetros de transition Transition tiene distintos parámetros, que se pueden especificar por separado, o juntos (como hacen background y background-color, por ejemplo). El parámetro transition tiene los siguientes parámetros (que después se explicarán por separado): Código : transition: [Propiedades] [Tiempo] [Función de Tiempo] [Retardo]; Los parámetros que usamos en transition son los siguientes: Propiedades: En este parámetro establecemos qué propiedad queremos que modifique, como width, height... pero sólo podemos poner una, por eso se puede usar la propiedad "all", que sirve para seleccionar todas y se recomienda usarla preferentemente. Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s". Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración. Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comience lento y una terminación lenta, acelerándose en la parte media. Retardo: En este parámetro podemos establecer el tiempo que tarda en empezar la transición, en segundos. En el siguiente ejemplo veremos cómo un DIV irá de un lado al otro y cambiará su tamaño y color cuando pasemos por encima de su contenedor. El código HTML: Código : <div class="TRA_CONT">    <div> <!-- Este DIV es el que se mueve -->    </div> </div> El código CSS: Código : /* Este estilo es el del DIV que esta dentro de div.TRA_CONT */ .TRA_CONT div{    width:10%;    height:80px;    margin-left:0%;    background:#0F0;    -webkit-transition:all 1s ease;    -moz-transition:all 1s ease;    -o-transition:all 1s ease;    transition:all 1s ease; } /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */ .TRA_CONT:hover div{    width:20%;    margin-left:80%;    background:#F00; } El código anterior muestra los parámetros que tiene al principio el DIV y muestra los que tiene al pasar por encima. El movimiento lateral se puede hacer, como en este caso, con el margin-left o con parámetro de posición (left,top...), el ensanche de el DIV se hace con el width y el color cambia por el background. El contenido de transition El contenido del parámetro ("all 1s ease") nos indica en primer lugar que queremos hacer la transición con todos los parámetros (estableciendo "all"), en segundo lugar especificamos la duración de un segundo (con "1s"), también especificamos la función de tiempo que realiza, usando "ease" (que va más lento a principio y fin de el movimiento) y por último podríamos haber establecido el retardo, especificándolo en segundos. Propiedades de transition Para usar estas formas individuales también tenemos que ponerles el prefijo para cada navegador (-webkit-, -moz- y -o-): transition-property: Este parámetro sirve para establecer los parámetros que serán afectados por la transición, es decir, si sólo queremos que se cambie el width y el margin debemos establecer en su contenido "width, margin", separando con comas si existe más de un parámetro que va a ser afectado. transition-duration: Estableciendo este parámetro podemos cambiar individualmente el tiempo de la transición, estableciéndolo en segundos (por ejemplo 0.5s o 2s). transition-timing-function: Con este parámetro establecemos la curva de velocidad, pudiendo elegir entre varios preestablecidos (lineal,ease,ease-in,ease-out...). transition-delay: Con este parámetro establecemos el retardo con segundos, por ejemplo, si queremos que empiece medio segundo tarde, establecemos 0.5s. [nota:2386aca453]Se pueden usar todas juntas con el transition, como en el primer ejemplo. [/nota:2386aca453] Integración con eventos Con transition todos los cambios, siempre que estén definidos en las propiedades que se animarán, que hagamos con eventos Javascript se harán de forma progresiva como con las demás transiciones. Código : Los botones con los eventos <input type="button" onclick="document.getElementById('cuadro_tra').style.width='20%'" value="20%"> <input type="button" onclick="document.getElementById('cuadro_tra').style.width='40%'" value="40%"> <input type="button" onclick="document.getElementById('cuadro_tra').style.width='60%'" value="60%"> La etiqueta DIV que cambia de tamaño <div id="cuadro_tra"></div> Código : #cuadro_tra{    width:20%;    -webkit-transition:all 1s ease;    -moz-transition:all 1s ease;    -o-transition:all 1s ease;    transition:all 1s ease; } Algunos ejemplos de uso Código : <div class="MENU_pestañas">    <li>Inicio</li>    <li>CSS</li>    <li>JavaScript</li>    <li>PHP</li> </div> Código : .MENU_pestañas li{    position:relative;    float:left;    list-style:none;    width:140px;    height:26px;    padding-top:15px;    text-align:center;    background:#999;    color:#FFF;    border:1px solid #555;    font-weight:bold;    text-shadow:1px 1px 0px #000;    border-radius:10px 10px 0px 0px;    -webkit-border-radius:10px 10px 0px 0px;    -moz-border-radius:10px 10px 0px 0px;    -webkit-transition:all 1s ease 1s;    -moz-transition:all 1s ease 1s;    -o-transition:all 1s ease 1s;    transition:all 1s ease 1s; } .MENU_pestañas li:hover{    background:#9A44A6;    border-bottom-color:transparent;    z-index:2;    box-shadow:2px -2px 4px rgba(0,0,0,0.4);    -webkit-transition:all 1s ease;    -moz-transition:all 1s ease;    -o-transition:all 1s ease;    transition:all 1s ease; } Ver los ejemplos funcionando

Conexión SQL Server 2008 y LDAP con PHP Posted: 16 Jul 2012 03:39 PM PDT Hola a todos, bienvenidos a este tutorial. Sé que este tema es muy visto por todos pero en mi caso fue un total caos para realizar una conexión a SQL Server y LDAP (Directorio Activo) con PHP. Fue una intensa búsqueda que me llevó a mucha confusión. Así que para que no busquen más, aquí tengo la solución a estos dos temas y que les puede ayudar en sus proyectos. Complementos a utilizar: XAMPP Versión 1.7.7 Descargar Librerías ADODB Descargar Clase sqlserver.inc.php Clase LDAPhp.class.php Clase LDAPhp.php Conexión DB SQL Server 2008 sin extensión .DLL y sin modificar el php.ini Una vez instalado su XAMPP en su equipo de desarrollo procederemos a crear nuestro proyecto. Para realizar una conexión a nuestro SQL Server Management Studio 2008 R2 requerimos primeramente configurar un usuario de sesión para el SQL Server, el cual utilizaremos para conectarnos por PHP. Si no saben cómo realizar este procedimiento les invito entrar aqui index.php Para conectarnos debemos descargar la librería adodb y cargarla en nuestro directorio local. Aquí voy a hacer una consulta a SQL Server según mi BD y tabla que haya creado. Código : <?php        //Mandamos llamar este archivo donde contiene la cadena de conexión a SQL Server    include("sqlserver.inc.php");       //Ya no usamos la clásica query de consulta como mysql_query ahora por definición de la función creada por adodb usamos la siguiente:    $query= $db->Execute("SELECT * FROM tabla"); // Verificamos si hemos realizado bien nuestro Query if(!$query){         exit("Error en la consulta SQL"); } ?> <?php //Imprimiremos el resultado      foreach($query as $k => $row){      echo $row["name_column"];?> } ?> sqlserver.inc.php Este archivo contiene la cadena de conexión y la llamada a la librería adodb Código : <?php include("adodb/adodb.inc.php");                    //Datos de conexión SQL Server          $db = ADONewConnection('odbc_mssql');          $dsn = "Driver={SQL Server};Server=localhost;Database=database;";          //Te da informes de posibles errores, este script nos ayuda muchísimo, si tenemos un error en una consulta o insert.          $db->debug=true;          $db->Connect($dsn,'usuario','pass');                    //Variable Global por default          $ADODB_FETCH_MODE = ADODB_FETCH_ASSOC; ?> Listo, realizando estos pasos no debe de haber ningún problema para mostrar los resultados de nuestra tabla en SQL Server, con esto podemos comprobar la conexión. [nota:31895fd96e]Posibles errores: Error de usuario y contraseña, permisos de lectura y ejecución en archivo adodb.inc.php.[/nota:31895fd96e] Conexión con Directorio Activo con LDAP Este es muy usado en escuelas en las cuales todo el personal se valida por medio de AD para poder acceder a un portal según sus privilegios. Antes de empezar debemos hacer algo muy raro que sí requiere de modificar el php.ini para descomentar el dll. Deben descomentar la línea siguiente: Antes Código : ;extension=php_ldap.dll Cambio Código : extension=php_ldap.dll Listo, antes de reiniciar nuestro apache, debemos hacer algo más. Si reiniciamos el apache, éste no iniciará por lo que te dirá que no existe el archivo libsasl.dll. Para esto debemos cortar este dll que se encuentra en el directorio PHP y lo pegamos en el directorio apache. Reiniciamos y listo, debería iniciar el apache sin problemas. Ahora que tenemos bien configurado nuestro XAMPP, comencemos: login.php Crearemos la forma donde nos pide el usuario y contraseña: Código : <form method="post" action="LDAPhp.php" name="form_ldap">       <table cellpadding="0" cellspacing="0" border="0">          <tr>             <td width="79">Usuario:</td>             <td width="392" align="left"><input type="text" name="login_username" id="login_username" onblur="aMayusculas(this.value,this.id)" /><span style="font-size:10px; color:#666666;">(L000 + Nomina)</span></td>          </tr>          <tr>             <td>Contrase&ntilde;a:</td>             <td align="left"><input type="password" name="login_userpass" id="login_userpass" onblur="aMinusculas(this.value,this.id)" /><span style="font-size:10px; color:#666666;">(Actualmente usa en su correo electronico)</span></td>          </tr>          <tr>             <td colspan="2" align="right"><button id="login_userbttn">Iniciar sesion</button></td>          </tr>       </table>    </form> LDAPhp.php Crearemos el archivo que recibe los datos de parámetros del formulario. Existen datos que deberán pedir a la persona encargada del administrador de AD, el cual debe proporcionarles un acceso. Código : <?php //Importamos el manejador LDAP require_once 'LDAPhp.class.php'; //Datos del Usuario a Autentificar con tu aplicación en PHP //La mayoría de veces estos datos no son una constante, sino valores recibidos por $_POST[] $usuario = $_POST["login_username"]; $clave = $_POST["login_userpass"]; //Datos de Configuración del Servidor $servidor="host"; $puerto="123"; //Datos de Configuración para la conexión al LDAP (DN == "Distinguished Name") $cadenaConexionUsuario = "CN=test,OU=sd,OU=campo,DC=unidad,DC=dominio,DC=ext"; //Datos de Configuración de usuario enlace LDAP-PHP, en este caso PHP (CN=PHP) $password = 'pass'; //Datos de Configuración para el enlace al LDAP (DN == "Distinguished Name") //En este caso nos situamos en el OU (Unidad Organizacional) principal $dn = "OU=campo,DC=unidad,DC=dominio,DC=ext"; //Datos de Configuración de Filtro para la búsqueda de un Usuario $filtro = "(&(objectClass=user)(samAccountName=$usuario))"; //Conectamos al servidor LDAP con los => "Datos de Configuración del Servidor" $PHPLdap = new PHPLdap($servidor, $puerto); //Luego de habernos conectado al servidor, enlazamos la conexion identificandonos con un password //para el usuario PHP (CN=PHP) $PHPLdap->enlazarPHPLdap($cadenaConexionUsuario, $password); //Luego de haber realizado el enlace principal con el usuario PHP (CN=PHP) creado para este fin //Procedemos a realizar la búsqueda del usuario a autenticar con la aplicación en PHP. //PD: No se envía el usuario como parámetro ya que se encuentra interpretado en la variable: $filtro $autenticar = $PHPLdap->autenticarUsuario($dn, $filtro, $clave); //Verificamos el valor de retorno de la autenticación if($autenticar===true){ //Autenticado //Aca es donde generas la $_SESSION, COOKIES, o como manejes la autenticación //Luego redirecciónas, a la página privada, etc. echo '<SCRIPT LANGUAGE="javascript">location.href="../index.php";</SCRIPT>'; } else{ //Acceso Denegado echo " <script>          window.alert('Acceso Denegado');          location.href='../login.php';       </script>"; } //Cerramos la conexion a LDAP $PHPLdap->cerrarConexion(); ?> LDAPhp.class.php Requiere de la siguiente class Código : <?php class PHPLdap{ private $ds; private $bind; public function PHPLdap($host, $puerto){ if(!isset($this->ds)){ if($this->ds = (ldap_connect($host, $puerto))){ //echo "- LDAP conectado a: ".$host.""; } else { die("- No me puedo conectar con servidor LDAP"); } } } public function enlazarPHPLdap($cadenaConexionUsuario, $password){ $this->bind = @ldap_bind($this->ds, $cadenaConexionUsuario, $password); if($this->bind){ //echo "- Se realiz&oacute; el enlace principal satisfactoriamente con el usuario PHP"; } else { die("- El enlace principal no se pudo llevar a cabo"); } } public function autenticarUsuario($dn, $filtro, $clave){       $busqueda=ldap_search($this->ds, $dn, $filtro);       $resultados = ldap_get_entries($this->ds, $busqueda);       //print_r($resultados);       //Habiendo buscado el usuario a autenticar con "ldap_search" y obteniendo resultados en       //un arreglo $resultados, con "ldap_get_entries", pasamos a condicionar la existencia       //de resultados positivos.       if($resultados["count"]>0){          //Ingreso a la condicional, verificando con el "count" que el usuario exista          //Quiere decir que si encontró al usuario          //Luego obtenemos el DN (Nombre Distinguido) del usuario          $dnUsuario = trim($resultados[0]["distinguishedname"][0]);          //Imprimo del Arreglo las variables que necesito guardar en session.          $nombre= trim($resultados[0]["displayname"][0]);          $nomina= trim($resultados[0]["samaccountname"][0]);          $correo= trim($resultados[0]["mail"][0]);          $departamento = trim($resultados[0]["department"][0]);                       //Guardar Variables de Session             session_start();             $_SESSION['username']= $nombre;             $_SESSION['mail'] = $correo;             $_SESSION['nomina'] = $nomina;             $_SESSION['depto'] = $departamento;                    //Para poder finalmente realizar el enlace final, siendo "enlace final" el login correcto.          //Si y solo si... la clave es correcta          if(@ldap_bind($this->ds, $dnUsuario, $clave)){             //Se realiza el bind, siendo la clave correcta, y se retorna un valor VERDADERO (true)             return true;          }          else          {             return false;          }       }    } public function cerrarConexion(){ //Cerramos la conexión a LDAP ldap_close($this->ds); } } ?> Con esto debemos de poder accesar al sitio y podremos arrastrar las variables de sesión que contienen los datos del perfil. Y así, con este proceso, ustedes podrán hacer el proyecto que tenían atorado por conexión de bases de datos SQL y LDAP. Espero les ayude, ya que a mí me ayudó para un sinfín de tareas. Dejen sus comentarios y acepto sugerencias!

Icono de calendario en Photoshop Posted: 16 Jul 2012 03:34 PM PDT En este videotutorial de Photoshop realizaremos un clásico icono con aspecto de calendario, que podremos utilizar en multitud de páginas para marcar o seleccionar fechas específicas y que con solamente unos pequeños ajustes, nos ofrecerá un diseño sencillo, pero altamente personalizable para usarlo en otro tipo de trabajos e imágenes. Trabajaremos con las formas rectangulares, para la base y los elementos de separación, para añadir posteriormente estilos de capa sencillos, que ajustarán el aspecto visual y nos ayudarán a encajar el texto específico para el mes y los días. Saludos.

#23: HTML5 Posted: 15 Jul 2012 10:06 PM PDT Este es el mejor momento para contarte que tenemos un curso de HTML y CSS, una introducción a HTML5 y un curso de CSS3... Y un curso de HTML5 en Colombia y otro en Guatemala y muchos muchos otros cursos y... Nos gusta esto del HTML5. El comic #23 de la serie Cristalab vs. The Web: "HTML5". Si esta es tu primera vez viendo el comic, mira el comic #22: Instálate una profesión y otros anteriores. border-radius: help;

You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610