Buenas prácticas a la hora de programar

Muchas veces, cuando empezamos un nuevo proyecto, nos sentamos como locos y nos ponemos a escribir como alma que lleva el diablo. A la hora de programar o de realizar cualquier tarea en nuestra vida cotidiana, es recomendable pensar durante unos mínutos qué voy a hacer, cómo lo voy a hacer y con qué objetivo tengo que hacerlo.

A lo largo de mi experiencia como programador web, he aprendido una serie de buenas prácticas a la hora de desarrollar un proyecto. De la misma manera que calentamos y estiramos los músculos antes de salir a correr, debemos analizar la situación antes de liarnos a escribir líneas y líneas de código.

He aquí mi lista de buenas prácticas a la hora de programar:

  1. Antes de encender si quiera el ordenador, toma papel y lápiz y empieza a plasmar todo lo que se te ocurra del proyecto que tienes entre manos. Muchas veces necesitamos ver las cosas en papel para que nuestra mente se abra más de lo que pensábamos que estaba abierta.
  2. Organiza, plantea y asegura un buen plan de trabajo. Divide el proyecto por partes y asigna prioridades o fases de desarrollo.
  3. Si no usas un framework o ningún patrón de diseño, diseña un buen árbol de archivos para organizar el trabajo, evitarás tener carpetas duplicadas y archivos en lugares que no deberían estar.
  4. Organiza un entorno de desarrollo, uno de pre-producción y otro de producción.
  5. No diseñes/programes solo para un navegador, lamentablemente más del 80% de los usuarios siguen navegando con Iexplorer, incluso con la versión 6.
  6. A la hora de escribir tu código, es aconsejable comentar la fecha, hora, lugar, proyecto, etc. en la cabecera, nos ayudará a tener un plano temporal de cuándo programaste y por qué lo hiciste.
  7. Organiza bien el código, indenta, COMENTA, separa los diferentes bloques, indica qué estás haciendo y qué resultados necesitas.
  8. Hago incapie en comentar el código. Recuerda que no solo programas para tí. Si estás en una empresa o en un grupo de trabajo, el código que programes posiblemente pasará a otra persona, cuyos comentarios que incluiste le ayudarán a entender lo que has hecho y a seguir el trabajo. También es bueno comentar lo que haces porque, nunca se sabe cuándo tendrás que retomar un proyecto, o reutilizar una clase o un conjunto de funciones. Deja tus migas de pan y nunca perderás tu camino.
  9. Utiliza nombres de variables y funciones que sean acordes con lo que estás programando. Por ejemplo, si necesitas guardar la fecha de alta de un registro en el sistema, no uses $var o $fecha a secas, sé más intuitivo pues el nombre de las variables nos ayudan a comprender qué guardan en su interior. $created o $modified son términos de ejemplo.
  10. Documéntate, comparte, lee mucho código de otras personas. Tu mente es un lugar con espacio infinito para guardar información, no pienses que tu código es perfecto, pues millones de personas posiblemente ya han programado lo que estás haciendo y tienen un punto de vista muy interesante sobre tu problema. No dudes en leer el código de los demás, te ayudarán a enteder mejor el lenguaje de programación viendo su solución.
  11. Respalda tu información, haz backups de tu proyecto pues, no hay nada peor que estar trabajando y que por un corte de luz todo tu trabajo se vaya al traste.
  12. Reutiliza tu código todo lo que puedas, no repitas los mismos bloques una y otra vez. Recuerda que al modular estás ahorrando tiempo, costes, trabajo y lo más importante, factor de errores.
  13. Depura, depura y depura. No pares de depurar todo lo que hagas. Hasta el más mínimo error debería ser cotejado y tenido en cuenta antes de que un maravilloso FATAL ERROR arruine todo tu trabajo.
  14. Sal con tus amigos, haz deporte, come de forma sana y saludable, tómate dos cervezas a mi salud y recuerda, tienes una vida ahí fuera libre de ceros y de unos, de bucles y funciones, de clientes que no saben lo que quieren y de proyectos que nunca acaban. Disfruta!

Cuáles son vuestras prácticas a la hora de programar?

Anuncios

Pirámide de asteriscos con PHP – Esta vez, con OOP

Tras crear nuestra pirámide de un modo simple y después de un modo un poquito más complicado, cómo podríamos unir las dos formas en una sola?. El método es bastante sencillo. He creado una clase que, dependiendo de los valores que reciba, nos va a dibujar una pirámide u otra. Es imprescindible entender cómo funciona la programación orientada a objetos para entender esta solución.

Aquí va el código, podéis guardar el archivo como piramide.class.php

<?php

class piramide {
	
	// Propiedades de la clase
	public $plane = array();
	public $range = null;
	public $piramide = null;
	public $cols = 0;
	public $cont_pos = 0;
	public $cont_neg = 0;
	public $char = "*";
	public $salto = "<br />";
	
	// Constructor de la clase
	public function __construct($rows, $cartesian = true) {
	
		// Compruebo que tipo de piramide se va a dibujar
		if ($cartesian) {
			echo $this->makeCartesianPiramide($rows);
		} else {
			echo $this->makePiramide($rows);
		}
	}
	
	// Metodo publico para crear la piramide sobre arrays o plano cartesiano
	public function makeCartesianPiramide($rows) {
	
		// Calculo el numero de columnas teniendo en cuenta el numero de filas
		if (($rows % 2) != 0) {

			// El numero de filas es impar, calculo las columnas
			$this->cols = ($rows * 3) - 4;

		} else {

			// El numero de filas es par, calculo las columnas
			$this->cols = ($rows * 2) - 1;
		}

		// Creo los acumuladores para calcular los rangos que tengo que marcar
		$this->cont_pos = (($this->cols + 1) / 2) - 1;

		// Al ser el pico de la piramide, los contadores son iguales
		$this->cont_neg = $this->cont_pos;

		// Recorro todas las filas
		for ($i = 0; $i < $rows; $i++) {

			// Creo el rango que quiero marcar dentro de cada fila
			$this->range = range($this->cont_neg, $this->cont_pos);

			// Recorro todas las columnas
			for ($j = 0; $j < $this->cols; $j++) {

				// Si la columna obtenida esta dentro de mi rango
				if (in_array($j, $this->range)) {

		            // Guardo valor 1 y pinto el asterisco
					$c[$j] = '1';
					$this->piramide .= $this->char;

				} else {

					// Si no esta, guardo valor 0
					$c[$j] = '0';
				}
			}

			// Guardo la fila generada dentro del plano cartesiano
			array_push($this->plane, $c);

			// Añado un salto de carro para seguir con la siguiente linea
			$this->piramide .= $this->salto;

			// Actualizo los contadores para volver a calcular los rangos
			$this->cont_pos++;
			$this->cont_neg--;
		}
		
		// Devuelvo la piramide completa
		return $this->piramide;
	}
	
	// Metodo publico para crear la piramide de un modo mas sencillo
	public function makePiramide($rows) {
	
		// Recorro el numero de filas
		for ($a = 1; $a <= $rows; $a++) {

			// Voy creando las columnas
			for ($h = 1; $h <= $a; $h++) {

				// Pinto el asterisco
				$this->piramide .= $this->char;
			}
			
			// Añado un salto de carro
			$this->piramide .= $this->salto;
		}
		
		// Devuelvo la piramide completa
		return $this->piramide;
	}
}

/* Forma de uso */

// Piramide cartesiana
$piramide_cartesiana = new piramide(9);

// Piramide simple
$piramide = new piramide(9, false);

?>

Una forma más de solucionar nuestro problema, os animáis?

Dejandomarcas.com y cakePHP

Estoy programando de nuevo mi site principal usando el framework cakePHP.

Pronto estará en producción corriendo con este framework cuyo trabajo me ha agilizado bastante. Espero que os gusten los cambios ya que hacía bastante tiempo que no actualizaba mi web (en cuanto a diseño y programación). Decir también que me mudo de Arsys, ya que, después de muchos años con muchísimos errores, he decidido mudarme de servidor a uno más barato y con más opciones de configuración, ya que desde el servidor compartido que tengo contratado con ellos me es imposible editar el .htaccess, imprescindible para que cakePHP trabaje con URLs amigables

Os dejo un pequeño pantallazo para que veais cómo está quedando:

Nuevo diseño y programación

Acampada Sol

Fuente Señoras que

Rotar capas con css

Este es un ejercicio sencillo para lograr la rotación de una capa. Podéis ver un ejemplo pulsando aquí

<style>

	* {
		margin: 0;
		padding: 0;
		text-align: center;
	}

	#header {
		width: 100%;
		height: 300px;
		background-color: #000000;
		z-index: 10;
	}
	
	#main {
		width: 900px;
		height: 500px;
		margin: -178 auto;
		z-index: 100;
	}
	
	#main .block-left {
		float: left;
		margin-top: 40px;
		margin-right: 30px;
	}
	
	#main .block-right {
		float: right;
		width: 395px;
		font-size: 14px;
		margin-top: 190px;
	}
	
	#main .block-right p {
		text-align: right;
	}
	
	#main .block-left .mapa {
		-moz-transform: rotate(-10deg);
		background-color: #FFFFFF;
		border: 4px solid #FFFFFF;
		box-shadow: 0 0 5px 3px #999999;
		height: 275px;
		margin-top: 45px;
		width: 464px;
	}

</style>

Una vez declarados los estilos, tan solo nos queda diseñar el html para ver los resultados

<div id="header"></div>
<div id="main">
	<div class="block-left">
		<div class="mapa">
                      <iframe width="464" height="275" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=espa%C3%B1a,+sevilla,+plaza+de+espa%C3%B1a&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=53.477264,114.169922&amp;ie=UTF8&amp;hq=espa%C3%B1a,+sevilla,+plaza+de+espa%C3%B1a&amp;t=h&amp;ll=37.377334,-5.986267&amp;spn=0.006295,0.006295&amp;output=embed"></iframe>
		</div>
	</div>
	<div class="block-right">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue laoreet augue et consequat. Pellentesque hendrerit nulla eu turpis tincidunt fringilla. Phasellus a tempus massa. Donec sed congue dolor. Aenean eget ligula est, a luctus tellus. Nunc pharetra dui ultricies sapien suscipit at cursus arcu interdum.</p>
	</div>
</div>

El único inconveniente es que solo funciona para firefox, pero para seguir con la tónica de ejercicios nos sirve.

Monumento en memoria a Aníbal González en Sevilla

Invitación muy especial

Monumento en memoria a Aníbal González

Finalmente después de mucho esfuerzo y sudor, el gran día ha llegado. El Monumento a la memoria del arquitecto Aníbal González que luce desde la semana pasada en su querida Plaza de España será inaugurado oficialmente mañana Jueves 26 de Mayo.

A los autores nos gustaría que nos acompañárais en un día tan señalado. Será por supuesto en la Plaza de España a las 20:30 horas. Un saludo

Manu Nieto, Guillermo Plaza, Manuel Osuna

Pirámide de asteriscos con PHP – Modo avanzado

Tras explicar una forma básica de dibujar una pirámide de asteriscos con PHP, voy a tratar de explicar una forma un poquito más avanzada de hacerlo.

Lo bonito de la programación es que no hay una sola forma de hacer las cosas. Todo se puede analizar de muchas maneras y los resultados pueden ser los mismos. No obstante, dependiendo de nuestro análisis y de nuestra programación, podemos optimizar los resultados y conseguir que sean mucho más viables dependiendo de nuestro objetivo final.

El método que voy a tratar de explicar es una forma más avanzada de entender el problema. Para ello, voy a dibujar la pirámide dentro de un plano cartesiano.

<?php

/* 

 * Para trazar la piramide usare un plano cartesiano hecho con matrices

 * Este es un ejemplo de como quedara el plano sin valores

 *

 * $plane = array (0 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0),

 *           	   1 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0),

 *           	   2 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0),

 *           	   3 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0),

 *           	   4 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0),

 *           	   5 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0),

 *           	   6 => array(0 => 0, 1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0)

 *                );

 *

 * Los parametros que voy a usar son los siguientes

 *

 * @param $rows int indica el numero de filas que va a tener la piramide

 * @param $char string indica el simbolo que vamos a usar para pintar la piramide
 * @Param $view int (opcional) indica si quiero pintar la piramide o el plano cartesiano
 *
 * return $piramide string si $view es true
 * return $plane array si $view es false
 *

**/

function crear_piramide ($rows, $char, $view = true) {



	// Creo el plano cartesiano, la piramide, las columnas y los acumuladores

	$plane = array();
	$range = null;
	$piramide = null;
	$cols = 0;
	$cont_pos = 0;
	$cont_neg = 0;



	/* Calculo el numero de columnas a partir de las filas. Hay que tener en cuenta 
	 * si el numero es par o impar para que la piramide quede bien dibujada en el 
	 * centro del plano cartesiano
	**/
	if (($rows % 2) != 0) {

		// El numero de filas es impar, calculo las columnas

		$cols = ($rows * 3) - 4;
	
	} else {

		// El numero de filas es par, calculo las columnas
		$cols = ($rows * 2) - 1;
	}
	
	// Creo los acumuladores para calcular los rangos que tengo que marcar
	$cont_pos = (($cols + 1) / 2) - 1;
	
	// Al ser el primer valor o pico de la piramide, el contador negativo es igual que el positivo

	$cont_neg = $cont_pos;
	

	// Recorro todas las filas

	for ($i = 0; $i < $rows; $i++) {
	
		// Creo el rango que quiero marcar dentro de cada fila
		$range = range($cont_neg, $cont_pos);

	

		// Recorro todas las columnas

		for ($j = 0; $j < $cols; $j++) {
		
			// Si la columna obtenida esta dentro de mi rango
			if (in_array($j, $range)) {
			
       
                                // Guardo valor 1 y pinto el asterisco
				$c[$j] = '1';
				$piramide .= $char;
				
			} else {
				
				// Si no esta, guardo valor 0
				$c[$j] = '0';
			}

		}
		

		// Guardo la fila generada dentro del plano cartesiano

		array_push($plane, $c);
		
		// Añado un salto de carro para seguir con la siguiente linea
		$piramide .= "<br />";
		
		// Actualizo los contadores para volver a calcular los rangos

		$cont_pos++;

		$cont_neg--;

	}
	
	// Devuelvo la opcion elegida en el parametro $view
	if ($view)
		return $piramide;
	else
		print_r($plane);

}

// Forma de uso

$piramides = crear_piramide (5, '*');

echo $piramides;

?>

Si ejecutáis esta función, el resultado por defecto será este:

          *
         ***
        *****
       *******
      *********

También podéis cambiar el asterisco por cualquier otro símbolo:

<?php

$piramides = crear_piramide (5, '[]');
echo $piramides;

// Resultado
         []
       [][][]
     [][][][][]
   [][][][][][][]
 [][][][][][][][][]

?>

Si quereis ver cómo ha quedado nuestro plano cartesiano, solo tenéis que modificar el tercer parámetro pasándolo como false:

<?php

$piramides = crear_piramide (5, '*', false);

echo $piramides;

// Resultado
Array ([0] => Array([0] => 0 [1] => 0 [2] => 0 [3] => 0 [4] => 0 [5] => 1 [6] => 0 [7] => 0 [8] => 0 [9] => 0 [10] => 0)
          [1] => Array([0] => 0 [1] => 0 [2] => 0 [3] => 0 [4] => 1 [5] => 1 [6] => 1 [7] => 0 [8] => 0 [9] => 0 [10] => 0)
          [2] => Array([0] => 0 [1] => 0 [2] => 0 [3] => 1 [4] => 1 [5] => 1 [6] => 1 [7] => 1 [8] => 0 [9] => 0 [10] => 0)
          [3] => Array([0] => 0 [1] => 0 [2] => 1 [3] => 1 [4] => 1 [5] => 1 [6] => 1 [7] => 1 [8] => 1 [9] => 0 [10] => 0)
          [4] => Array([0] => 0 [1] => 1 [2] => 1 [3] => 1 [4] => 1 [5] => 1 [6] => 1 [7] => 1 [8] => 1 [9] => 1 [10] => 0)
)

?>

Como siempre, esta no es ni mucho menos la forma más eficiente ni definitiva de resolver el problema. También hay que tener en cuenta que este tipo de ejercicios nos ayudan a comprender cómo funciona un lenguaje de programación y cómo debemos abordar un problema real.

Os animo a que comenteis vuestra solución.

// Don’t forget to comment your code

Cada vez que escribes un bloque de código sin comentar, dios mata a un gatito… Por favor, hagamos algo para evitar esta masacre…

<?php

$cat = new cat();

// Comentarios? para que??
if (!isset($comments)) {
     $cat->getLightningBolt();
     $god->say("Cuando aprendereis...");
}

?>

Colores y más colores

A la hora de diseñar un boceto web, lo más importante es dar con esa gama de colores que identifica al cliente. Muchos tenemos suerte porque el cliente tiene un buen manual de imagen corporativa y eso nos ahorra mucho trabajo y nos facilita la tarea, pero es cierto que la mayoría de los clientes no saben lo que quieren y esperan que tú como diseñador les digas exactamente qué necesitan.

Os presento 0to255.com

0to255.com


En esta web se nos presenta una magnífica utilidad gráfica para poder ver todo el desarrollo de un color que especifiquemos. Recuerdo cuando trabajaba en Cajasol que mi amigo Jose tenía siempre encima de su mesa una pantonera gigante como arma de trabajo, y eso me gustaba, porque tenía un amplio abanico de colores y siempre sabía cuál utilizar exactamente.

Para mí esto es prácticamente igual. Fácil de usar, cómodo, y muy dinámico, ya que haciendo click sobre el color que nos guste, se copia el código hexadecimal para poder pegarlo directamente en la hoja de estilos.

Para mí, una herramienta imprescindible a la hora de diseñar. Espero que os sirva de la misma ayuda como me está sirviendo a mí.

Fuente 0to255.com

Creando un ámbito de trabajo

Desde hace unos años estoy programando en PHP tanto para empresas como para mí particularmente. Gracias a dios, desde entonces nunca me ha faltado trabajo y he estado en empresas grandes al pie del cañón (Cajasol, Sadiel…).

En mi experiencia he pasado a programar desde el notepad hasta en linux, pasando por frontpage, dreamweaver, notepad++, incluso microsoft word. Ahora puedo presumir de tener una buena base para poder decidir qué necesito para desarrollar bien mi trabajo, para organizar mi tiempo e intentar ser lo más productivo posible.

Esta es mi opción para poder desarrollar sin contratiempos y con la máxima eficacia:

  1. A nivel de hardware, procesador de cuatro núcleos intel core duo 2 a 2.2ghz.
  2. Memoria DD3 a 1.333mhz. Un total de 8ghz.
  3. Un buen monitor de 21 pulgadas (con uno sobra, aunque a mucha gente les guste tener dos, yo lo probé en su día y me sobró uno al tener expose o multiescritorios).
  4. A nivel de software, sistema operativo Linux, por mi parte, Ubuntu 11.04.
  5. Paquete Apache 2, MySQL, phpMyAdmin y PHP5.
  6. Para la gestión de bases de datos MySQL, phpMyAdmin y MySQL Workbench (fundamental para los modelos de datos).
  7. Para picar código, Gedit, el editor de código de Ubuntu.
  8. Web browser, sin duda alguna, Firefox.
  9. Para la comunicacion entre el entorno de desarrollo y el de producción, conexión SSH directo al servidor o en su defecto, FileZilla (cliente FTP).
  10. Para testear las aplicaciones en windows con Iexplorer en todas sus dichosas versiones, una máquina virtual. Yo uso Virtual Box.
  11. Para el control de versiones y archivos, Subversion.
  12. Para backups, una opción es Dropbox (por lo menos a mí me parece bastante buena, desde mi total ignorancia).
  13. Para gestionar las tareas pendientes, incidencias y desarrollos de un proyecto, una aplicación de código abierto hecha en PHP y gratis: Mantis Bug Tracker.
  14. Y por último pero menos importante, el framework que utilizo es CakePHP.

En cuanto a la configuración local, al tener Linux es mucho más cómodo. Puedes editar los hosts y los espacios virtuales de una forma muy rápida y sencilla. Sinceramente, si alguien quiere abrirse camino en este complicado mundo, yo creo que esta es la base para poder trabajar en un entorno profesional y productivo.

¿Y vosotros?, ¿cómo lo tenéis montado?, me encantaría saber cuál es vuestra opinión y de qué forma trabajáis para la web.

Instalar Ubuntu
Instalar el paquete Apache, MySQL y PHP para Ubuntu
Instalar Firefox 4 para Ubuntu
Instalar MySQL Workbench
Conexión SSH a servidor
Instalar FileZilla Ubuntu
Instalar Virtual Box
Instalar Subversion Ubuntu
Instalar Dropbox
Instalar Mantis Bug Tracker
Instalar CakePHP

A %d blogueros les gusta esto: