Archivo de la categoría: Tutoriales

70 tutoriales Photoshop relacionados con el diseño web

Enlace con más de 70 tutoriales Photoshop relacionados con el diseño web, ya sean para banners, botones, layouts, cabeceras… Hace años me parecía complicado el uso de Photoshop, pero gracias a enlaces como este y un ratito de vez en cuando me voy soltando bastante.

70 tutoriales de Photoshop sobre diseño web

Realizar curvas en Illustrator

Tengo una asignatura pendiente, y es el diseño gráfico. Me encanta pasarme por Webintenta o Criterion y descubrir trabajos realmente increibles que realiza la gente. Aunque para hacer diseño web no tengo demasiados problemas, apenás domino programas vectoriales como Adobe Illustrator y no por falta de ganas, sino de tiempo (que es peor).

A través de Webintenta he dado con un curioso ejercicio para realizar curvas con el lápiz en Illustrator (por algo se empieza).

Illustrator Pen Tool Exercises

Pasar array PHP a JavaScript (JSON)

JSON (JavaScript Object Notation) es un formato de datos con notación JavaScript que últimamente está de moda gracias al auge de las tecnologías AJAX. Digamos que es una alternativa al uso de XML, que libera de peso la respuesta AJAX en algunos casos (no requiere el cierre de etiqueta), hace una mejor representación de estructura de datos y requiere menor coste de procesamiento.

Un caso típico en el que deberíamos usar JSON es la petición de un listado de datos mediante AJAX. Imaginemos que la petición se hace a un archivo PHP (a partir de la versión 5.2  tenemos funcionalidades relacionadas con JSON disponible y activadas por defecto) que genera una estructura datos del listado en la variable $l_a_data con el siguiente formato:

[
Array
(
    [0] => Array
           (
             [nombre] => "Francisco"
             [apellidos] => "Torres"
           )

    [1] => Array
           (
             [nombre] => "Juanma"
             [apellidos] => "Torres"

           )
)

Podríamos fácilmente entonces convertir esta estructura array a una cadena con el formato JSON con la sentencia:


$l_str_json = json_encode($l_a_data);

y enviar esta cadena JSON como response del proceso AJAX. En este caso lo que enviamos es:

[
   {
      "nombre":"Francisco","apellidos":"Torres",
      "nombre":"Juanma","apellidos":"Torres"
   }
]

Para analizar  esta cadena recibida en el código JavaScript simplemente haremos:

var l_a_json = eval('(' + responseJSON + ')');

Con lo que ya tenemos un array en JavaScript con los datos provenientes del response del AJAX invocado que generó los datos de nuestro listado.

Un inconveniente de este método es el uso de eval() en una estructura de datos. Esto nos puede presentar problemas de seguridad, así que sólo deberíamos usarlo en entornos de confianza. Como alternativa y con el objetivo de evitar problemas de seguridad, debemos utilizar algún parseador de JSON de JavaScript, se pueden encontrar en json.org (parte inferior de la página, apartado JavaScript)

Javascript no obtrusivo (II)

Hoy en día se está poniendo muy de moda en el mundo de desarrollo web este término, tal y como comentabamos hace unos dias en la entrada Javascript no obstrusivo.

Parece que se está confundiendo Javascript no obstrusivo con el uso de Frameworks de Javascript, como por ejemplo JQuery y Prototype. Y no hay inconveniente ninguno en hacer un código HTML o XHTML sin programar eventos Javascript en dicho código y no usar algún Framework de Javascript.

Es tan sencillo como este código:


document.getElementById("div_click").onclick = function(){
   HolaMundo();
};

Viene a decir: “Cuando se haga click en el elemento que tenga por ID “div_click” se ejecutará la función HolaMundo.”

Aquí tenéis el código completo del ejemplo:

ejemplo.html:


<html>

   <body>
<div id="div_click">Click aquí</div>
<script type="text/javascript" src="ejemplo.js"></script>

   </body>
</html>

ejemplo.js:


//funciones

function HolaMundo(){
   alert("HolaMundo");
}

//lanzadores de eventos
document.getElementById("div_click").onclick = function(){
   HolaMundo();
};

Quien dice “.onclick” puede decir “.onfocus”, “.ondblclick”, o cualquier otro evento.

Si lo que queremos es programar el evento onload del body, haremos esto:


window.onload = function(){

   HolaMundo();

}

Arquitectura Web MVC para torpes (con todos los respetos, ojo)

Arquitectura MVC. Ahora podría ponerme a hablar de encapsulaciones, de capas lógicas, de motores o del apareamiento del cangrejo ermitaño. Pero no, voy a poneros un ejemplo sencillo de como empezar a trabajar siguiendo esta arquitectura y ojo, no es una definición exacta ni pretende serlo. Para teoría teneis 500 páginas en Google hablando de MVC. Eso sí, definamos primero cual es el objetivo: evitar guarrerias en el código, poner cada cosa en su sitio y facilitar el mantenimiento a posteriori.

Terminología breve (3 lineas):

M: Modelo (model), esto es, nuestras clases y operaciones

V: Vista (view), lo que mostramos al usuario (los HTML para entendernos).

C: Controlador (controller), un ficherito al que podemos llamar controller.php y es el que decide que hacer en cada momento.

¿Cómo debemos usar esto?

Imaginemos un formulario de alta de cliente. Vamos a darlo de alta y mostrar al usuario un mensaje de OK. Entonces tendriamos:

frm_cliente.html. Fichero con la vista del formulario de altas. El formulario tendrá un action que llevará los datos al controlador y añadiremos un parámetro adicional que será la operacion que queremos que realice, es decir:

...
<form ... action ="controller.php?task=insertar_cliente"/>
...

controller.php. Fichero que hará de controlador. Este fichero recoge el valor del parámetro task y dependiendo de su valor importará el proceso que debe lanzarse. Por ejemplo:

...
switch ($task) {
   case "insertar_cliente" :
      require("process_insertar_cliente.php"); break;
   case "editar_cliente":
      ...
}
...

La parte relacionada con el modelo entraría ahora en juego, un ejemplo del fichero process_insertar_cliente.php debería recoger los datos enviados por el formulario, instanciaría un objeto cliente que contendría todos esos parámetros y llamaríamos al método insertar, que nos los guardaría en la base de datos, si todo va ok, el controller.php redireccionaría a una página de ok.

...
// para evitar mas código, supongamos que he recogido

//los parámetros $_POST y los tengo en variables

$l_obj_cliente = new cliente();

$l_obj_cliente->set_nombre($l_str_nombre);

$l_obj_cliente->set_nombre($l_str_apellidos);

// insertamos y seteamos a true o false una

// variable que posteriormente el controller

// tratará para enviarnos a página de error o éxito

$l_b_ok = $l_obj_cliente->insertar();
unset($l_obj_cliente);

y muy a grosso modo eso es todo.

UTF-8 en ficheros HTML/XHTML de Apache usando .htaccess

Algunas veces puede interesarnos (y de hecho pudiera ser recomendable) que nuestros ficheros HTML/XHTML tengan codificación UTF-8, para permitir un gran abanico de caracteres de diversos idiomas no occidentales, por ejemplo.

Lo primero que deberíamos hacer es poner en nuestro fichero HTML/XHTML la siguiente etiqueta meta:

<meta http-equiv="content-type"
      content="text/html; charset=utf-8"/>

Pero es posible que al probar nuestra web, no esté mostrando los caracteres UTF-8 correctamente, o bien si validamos la web en W3C para comprobar que sea un HTML/XHTML válido nos encontremos con un fallo como este:

The character encoding specified in the HTTP header (iso-8859-1)
is different from the value in the <meta> element (utf-8).

Entonces debemos forzar al servidor Apache de nuestro servidor a que sirva las páginas .html en UTF-8 al navegador. Esto se consigue añadiendo al fichero .htaccess la linea:

AddCharset UTF-8 .html

Con esto conseguimos que todos los ficheros .html que cuelguen del directorio donde se encuentre el .htaccess (y subdirectorios), sean servidos al navegador con codificación UTF-8.

Esto se puede complicar más 🙂

<Files "example.html">
AddCharset UTF-8 .html
</Files>

Esto hace que solo el fichero example.html de ese directorio sea servido como UTF-8.

También podemos hacer algo así:

<Files "example.html">
ForceType 'text/html; charset=UTF-8'
</Files>

Esto fuerza a que el fichero example.html sea servido como UTF-8, y además de tipo texto plano con contenido HTML.

Por último, este ejemplo:

AddCharset UTF-8 .utf8
AddCharset windows-1252 .html

Aquí se dice al servidor Apache: Todos los ficheros con extensión .utf8 sírvelos al navegador con codificación UTF-8. Y todos los ficheros .html sean servidos con codificación windows-1252.

Os invito a dejar como comentarios más ejemplos de uso de las directivas AddCharset y ForceType, u otras relacionadas con el contenido y codificación de ficheros, para el fichero .htaccess de Apache.

Proteger carpetas públicas del servidor web

Como ya sabrás obviamente, Apache cuenta con una carpeta configurable en la que desplegamos nuestros websites o aplicaciones webs. Si queremos restringir el acceso a nuestras aplicaciones, normalmente hacemos nuestro formulario de login que valide al usuario, ya sea en ASP, PHP, JSP… Por otra parte los ficheros de configuración (acceso a base de datos, direcciones IP de servidores de base de datos o web services, etc) que conforman la parte pricada de la aplicación para que no sean accesibles lo guardamos en alguna carpeta fuera del directorio público.

En ocasiones necesitamos que algunos ficheros estén accesibles a través del servidor para cierto usuario, pero a su vez, digamos que éstos no forman parte de nuestra aplicación. Imaginemos que nuestra aplicación genera un fichero log con los accesos al sistema. Podríamos ver el contenido de este log a través del servidor desde cualquier equipo, pero realmente no tiene mucho sentido que nos identifiquemos en la aplicación (pues no vamos a usar sus funcionalidades) pero tampoco son datos que deban estar expuestos a cualquiera.

Lo que podemos hacer es proteger este fichero usando la configuración del servidor en lugar del código de nuestra aplicación y que el explorador nos muestre una ventana de logueo. En el caso de Apache y Linux, debemos hacer lo siguiente:

1. Permitir que Apache pueda solicitar Autorización. Para ello editamos con cualquier editor de texto el archivo httpd.conf y buscamos la línea:

AllowOverride None

y sustituimos LA SEGUNDA OCURRENCIA (NUNCA LA PRIMERA; OJO) por

AllowOverride AuthConfig

2. Creamos la carpeta a proteger. Por ejemplo:

/var/www/html/websenior/logs

3. Añadimos la restricción de acceso. Debemos añadir dos ficheros a la carpeta, .htaccess (con el punto) que nos indica las propiedades del acceso y lista de usuarios que podrán acceder y .htpasswd (con el punto también) que incluye cada usuario y contraseña de entrada.

Nuestro .htaccess quedaría:

AuthName "Control de acceso restringido"
AuthType Basic
AuthUserFile /var/www/html/websenior/logs/.htpasswd
Require user kurroman

El .htpasswd no es posible generarlo directamente a través de un editor de texto, aunque existen herramientas para su creación, desde shell podemos hacer:

htpasswd -cmb .htpasswd kurroman mipassword

se finit!

¿Como añadimos mas usuarios? Debemos editar una linea en el .htaccess de la forma:

Require user kurroman fjtorres

y añadir su contraseña al .htpasswd lanzando en el shell la sentencia:

htpasswd -mb .htpasswd fjtorres supassword

fijaros que ahora hemos quitado la opción “-c” del comando. Si no la quito, me borraría y crearía de nuevo el .htpasswd, perdiendo los usuarios que ya existian.

¿y como borro usuarios manteniendo el resto? Pues editamos el .htaccess y quitamos el usuario, luego lanzaríamos la sentencia:

htpasswd D fjtorres

y con esto eliminamos al usuario.

Espero que os sea útil este artículo.