Últimamente estamos incluyendo muchos plugins y efectos en JQuery en las páginas web que diseñamos. También lo utilizamos mucho para desarrollar “mini aplicaciones” con Ajax y PHP. Un ejemplo de ello es la calculadora de instalaciones eléctricas que implementamos para la web de Alumbrado Inteligente de Normalux. Todos los controles de validación y la gestión de los componentes de la instalación están controlados mediante consultas con Ajax a la base de datos para así evitar la recarga continua de la página.

Para realizar estos trabajos a veces necesitamos pequeños tutoriales o ejemplos de la utilización de los métodos o efectos de JQuery. A continuación os dejo el enlace a una de las páginas de donde sacamos ésta información.

Visual JQuery

¡Espero que os sirva de ayuda!

Fernando Maltrana, director técnico de ticmedia, intervendrá como ponente para hablarnos de “Verdades y Mentiras del mundo SEO”.

Otros participantes son,

1.- Néstor Torre: ¿Qué y qué beneficios tiene para las pequeñas empresas la comunicación 2.0?
2.- Luz Martín: ¿Qué es y qué cualidades debería tener un Community Manager?
3.- Jesús Portilla: ¿Cómo cuantificar el beneficio de la comunicación 2.0?
4.- Javier Prieto: Futuras tendencias del marketing 2.0

Pecha Kucha (ペチャクチャ) o Pecha Kucha Night es un formato de presentación original de Japón en el cual se expone un trabajo de manera sencilla e informal.

La idea fundamental de Pecha Kucha es permitir compartir las ideas de diversos presentadores durante una noche, manteniendo un nivel de interés y atención alto mediante presentaciones muy concisas. Para ello se creó el formato 20×20 de Pecha Kucha: a cada presentador se le permite usar 20 imágenes o diapositivas, cada una de de las cuales es mostrada durante 20 s. En total, cada presentación transcurre durante 6 min y 40 s, tras lo cual se hace una breve pausa y el siguiente presentador sube al escenario. Cada evento consta normalmente de 14 presentaciones.

La entrada es libre hasta completar el aforo. Creemos que será muy interesante y esperamos veros a todos en las instalaciones que FENA tiene en Gijón en C/Tomás y Valiente, 1, 3º.

Podéis descargaros los archivos necesarios haciendo click aquí

Es muy sencillo, vamos a especificar los pasos.

1. Descargamos el archivo y descomprimimos su contenido
2. Guardamos en la carpeta de la web las imágenes, el css y el script.
3. Enlazamos el css y el script dentro de la página:
   <link href=”gmlightbox.css” rel=”stylesheet” type=”text/css” />
   <script src=”gmlightbox.js” type=”text/javascript”></script>
4. Tenemos que ir a la web de Google Maps y buscar la dirección que queremos.
5. En el “href” del enlace desde donde queremos ampliar el mapa colocamos la que nos da Google para enlazar un mapa en una web.
   

Al enlace le podemos poner un atributo “title” para mostrar el título que le queremos dar al mapa. Al final el enlace nos tendría que quedar de la siguiente manera:
<a href=”URL_GOOGLE” rel=”gmap” title=”Mapa de ejemplo”>Mostrar mapa</a>

Podéis ver un ejemplo haciendo click aquí.

¡Espero que os sirva de ayuda!

Tabs o Espacios
En el contenido dentro de corchetes, siempre se identará este contenido con tabs.

Cabecera del archivo

Es recomendable que todos los archivos .php inicien con una cabecera específica que indique información de la versión, autor de los últimos cambios, etc.

//-----------------------------------------------------------------------------------
// Funciones Genéricas de manejo PHP
// Escrito por fulanitin el día asdfasdfasd

Comentarios en las funciones
Todas las funciones deben tener un comentario, antes de su declaración, explicando que hacen. No debería ser preciso analizar el código de una función para conocer su utilidad. Tanto el nombre como el comentario que acompañe a la función deben bastar para ello, en ese comentario hay que documentar los parámetros si no son lo suficientemente claros.

Dentro de las funciones los procesos deben de estar comentados (es mejor pasarse que quedarse corto) de tal manera que otro programador pueda entender de forma rápida lo que hace el código sin tener que analizarlo.

Clases
Las clases serán colocadas en un archivo .php aparte, donde sólo se colocará el código de la clase. El nombre del archivo será el mismo del de la clase. En lo posible, procurar que los nombres de clase tengan una sola palabra.

Las clases siguen las mismas reglas de las funciones, por tanto, debe colocarse un comentario antes de la declaración de la clase explicando su utilidad.

Gochadas
Si por prisa o necesidad hacemos una gochada en el código y somos conscientes de ella debe de ser comentada para que otra persona los pueda buscar rápidamente y poder reemplazarlos por soluciones mejores. En el comentario hay que introducir la cadena OJO así como el motivo por el que se ha usado esa solución y posibles mejoras.

Ubicación de archivos
En proyectos web o aplicaciones, se clasificarán los archivos en carpetas

• / Carpeta raiz: Aquí irán los archivos .php a los que accede el usuario directamente, interfaz, etc.
• js: contiene el javascript
• Connections: Las conexiones con la base de datos
• intranet: Contenido de intranet.
• templates: para el sistema de plantillas
• pruebas: para hacer pruebas.
• blog: si incluimos un sistema de blogs

En resumen los archivos deben de estar perfectamente ordenados.

Estilo y reglas de escritura de código PHP

Nombres de variables
Los nombres deben ser descriptivos y concisos. No usar variables de una letra salvo para bucles ($t). Siempre es mejor saber que hace una variable con sólo conocer su nombre. Esto aplica para los nombres de variables, funciones, argumentos de funciones y clases.

Todos los nombres deben estar en minúscula (Excepto con las clases, donde la primera letra debería de ser mayúscula). En caso de usar más de una palabra, ésta será separada por un signo de underscore “_“.

En las funciones, es importante que el nombre denote su función inmediatamente. De igual manera, en los parámetros de las funciones queremos saber inmediatamente que estamos usando.

Correcto: alta_usuario($login, $password);
Erróneo:  alta($l,  $p);

Siempre incluir corchetes

Correcto: if ($sigo)  {  ejecuto(); }
Erróneo:  if ($sigo)  ejecuto();

Debemos poner los corchetes o todos en una sola línea o separados y con comentario de dónde se abre y se cierra

if ($sigo)  {  ejecuto(); }

if ($sigo) {
   ejecuto();...
} // del if de sigo

Poner espacios entre signos
Debemos incluir siempres espacios a ambos lados.de los signos

Esto está mal:

Correcto: $a = $a + 1; $cad = $cad . "<br>";
Erróneo:  $a=$a+1;$cad=$cad."<br>";

Números dentro del código
No dedemos de meter números (como constante) dentro del código, si estamos en este caso debemos definir la constante y no meter el número (si lo hacemos es una gochada y habrá que meter el comentario OJO):

Correcto: $a = $a * 'INCREMENTO';
Erróneo:  $a = $a * 10;

Variables sin inicializar
Siempre debemos comprobar si las variables estan seleccionadas con isset en aquellas variables de las que no tenemos el control (vienen de un _GET o de una variable)

Organización de los archivos

Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en varias básicas todos nuestros estilos.

• formato_de_plantilla.css: Todo lo relacionado con posicionamiento, plantilla del diseño, etc. Exclusivamente.
• archivo.css: Todo lo relacionado con un archivo en particular
• funcionalidad.css. Todo lo relacionado con funcionalidades detalladas (galerías de fotos, ajax…)

Dentro del CSS

Orden de escritura
Dentro de los archivos CSS podemos colocar estilos para etiquetas, para identificadores, para clases, así como ciertos casos especiales. Debemos tener cuidado si utilizamos sistemas de creación de .CSS (dreamweaver…) para que siempre respetemos el orden aquí definido.

Colocaremos los estilos en este orden

1. Etiquetas (Tags de HTML)
2. Clases
3. Capas y formatos

A su vez, estos los organizaremos en la medida de los posible por orden alfabético y con sepadores de formatos

body
{
 background: #ffffff; /* fondo de toda la página */
}

/*------------------------------------------------------*/

.boton { color:#f2f2f2 }

/*------------------------------------------------------*/
/*            formato del menú                          */
/*------------------------------------------------------*/

#menuh {
   margin-top: 5px;                          /* aire por arriba del menú hasta el logo */
   margin-bottom: 15px;                      /* aire por abajo del menú hasta el logo */
   font-family: "Trebuchet MS", Verdana;     /* tipo letra */
   font-size: 1.2em;                         /* tamaño en relativo */
   clear:both;                               /* para que no pise con los float */
   padding-left: 480px;                      /* para pegarlo por la derecha */
   text-transform: uppercase;
   font-weight: bold;
   }
/*------------------------------------------------------*/

Comentarios
Los comentarios para que nos enteremos el porqué se han introducido algunos valores son imprescindibles, más si son debidos a hacks.

.inferior  {  	clear: both;  } /*  evitar superposicion de capas  */

Tabs o Espacios
En el contenido dentro de corchetes, siempre se identará con un mismo número de espacios o preferentemente tabs.

.titulo
{
     color: #0000FF;     margin: 10px
}

Nombres de etiquetas, identificadores y clases
Los nombres de etiqueta son en minúsculas sin tildes o caracteres especiales ( como todos los demás nombres). Para los identificadores o clases con más de dos palabras, estas serán separadas con underscore “_”.

Los nombres deben ser descriptivos, es preferible que sean un poco más largos, pero que se entienda con sólo leer el nombre para que sirve:

body {}  #cabecero_titulo {}  .enlace_del_pie {}

Corchetes o llaves. Donde colocarlas
Pueden ser usados en línea completa o separados si los .CSS van en multilinea.

.fondo  {  	background: none;  } 

.titulo
{
  color: #0000FF;
}

Espacios después de signos
Es algo muy sencillo que puede ayudar de gran manera en la lectura del código. Siempre hay que tener un espacio después de las comas, los signos de dos puntos, etc.

.fondo, .titulo  {  	background: none;  	color: #05F1F2;  }

Documentación de hacks
CUALQUIER hack (truco o mecanismo que usamos para que las páginas funcionen correctamente en todos los navegadores, por ejemplo en el Internet Explorer) , debe documentarse. Debemos evitar el uso de hacks y de cualquier código poco límpio.

.info
{
 line-height:12px ¡important;   	/* Esto para que funcione en IE */
}