jueves, 7 de junio de 2012

Patron de Diseno Modelo - Vista - Controlador

Modelo Vista Controlador (MVC): Es un patrón de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la logica de negocio en tres componentes distintos. El patrón de llamada y retorno MVC (según CMU), se ve frecuentemente en aplicaciones web, donde la vista es la página HTML y el código que provee de datos dinámicos a la página. El modelo es el Sistema de Gestion de Base de Datos y la Lógica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.
 








Un diagrama sencillo que muestra la relación entre el modelo, la vista y el controlador.

 

Descripción del patrón


1) Modelo (model): Esta es la representación específica de la información con la cual el sistema opera. En resumen, el modelo se limita a lo relativo de la vista y su controlador facilitando las presentaciones visuales complejas. El sistema también puede operar con más datos no relativos a la presentación, haciendo uso integrado de otras lógicas de negocio y de datos afines con el sistema modelado. 

2) Vista (view): Este presenta el modelo en un formato adecuado para interactuar, usualmente la interfaz de usuario.

3) Controlador (Controller): Este responde a eventos, usualmente acciones del usuario, e invoca peticiones al modelo y, probablemente, a la vista.

Ejemplo:

Para implementar este patrón y entenderlo un poco más, veremos como convertir una aplicación PHP básica en una aplicación basada en la arquitectura MVC. En este caso, la aplicación será un listado de posts en un blog. En la manera tradicional de PHP, mostrar un listado de post desde la base de datos, se vería como el siguiente script:
<?php// Connecting, selecting database
$link = mysql_connect('localhost', 'myuser', 'mypassword');
mysql_select_db('blog_db', $link);
 
// Performing SQL query
$result = mysql_query('SELECT date, title FROM post', $link); 
?>
<html>
  <head>
    <title>List of Posts</title>
  </head>
  <body>
   <h1>List of Posts</h1>
   <table>
     <tr><th>Date</th><th>Title</th></tr>
<?php
// Printing results in HTML
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
    echo "<tr>";
    printf("<td> %s </td>", $row['date']);
    printf("<td> %s </td>", $row['title']);
    echo "</tr>";
}
?>
    </table>
  </body>
</html>
<?php
// Closing connection
mysql_close($link);
?>

El script de arriba es rápido de escribir, rápido de ejecutar, pero es muy poco mantenible; algunos de los problemas que encontramos son que no hay chequeo de error (¿qué ocurre si la conexión a la base de datos falla?), el HTML y el código PHP están mezclados incluso entrelazados, y el código está atado a un base de datos MySQL.

Separando la Presentación

Las llamadas a las funciones echo y printf del script de arriba hacen el código difícil de leer. Modificar el código HTML para mejorar la presentación es un fastidio con la sintáxis actual. Por lo tanto, podemos separar el código en dos partes. Primero, el código PHP con toda la lógica de negocio en un script controlador (controller), como se muestra en el siguiente script (index.php):

<?php
$link = mysql_connect('localhost', 'myuser', 'mypassword');
mysql_select_db('blog_db', $link);
 
$result = mysql_query('SELECT date, title FROM post', $link);
 
$posts = array();
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
  $posts[] = $row;
}
 
mysql_close($link);
require('view.php');

 El código HTML, el cual contiene algo de código PHP, es guardado en un script de vista (view.php):


<html>
  <head>
    <title>List of Posts</title>
  </head>
  <body>
    <h1>List of Posts</h1>
    <table>
      <tr><th>Date</th><th>Title</th></tr>
    <?php foreach($posts as $post): ?><tr>
        <td><?php echo $post['date'] ?></td>
        <td><?php echo $post['title'] ?></td>
      </tr><?php endforeach; ?>
    </table>
  </body>
</html>
 
 Separando la manipulación de datos

<?php 
 
function getAllPosts(){
  $link = mysql_connect('localhost', 'myuser', 'mypassword');
  mysql_select_db('blog_db', $link);
 
  $result = mysql_query('SELECT date, title FROM post', $link);
 
  $posts = array();
  while($row = mysql_fetch_array($result, MYSQL_ASSOC))
  {
     $posts[] = $row;
  }
  mysql_close($link);
 
  return $posts;
}
 
Y modificando el controlador (index.php) para incluir el modelo, tenemos:
 
<?php
require_once('model.php');

$posts = getAllPosts();

require('view.php'); 
 
De este modo, el controlador es totalmente leible, ya que su única tarea es obtener los datos desde el modelo y pasarselo a la vista. En aplicaciones más complejas, el controlador además maneja la petición, la sesión de usuario, la autenticación, y demàs cosas.

Hojas de Estilo


Las hojas de estilo: Son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, justificación del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edicion digital. Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyen una parte esencial de los lenguajes de marcas para edición digital: LaTeX, XMLy XHTM dos lenguajes de hojas de estilo son CSS y XSL.

Trucos y sugerencias

Una variada colección de ejemplos de CSS y algo de ayuda sobre cómo usarlos.
  1. Figuras y leyendas
  2. Menú fijo en pantalla
  3. Párrafos con sangría
  4. Hojas de estilo alternativas
  5. Menú de fantasía
  6. Eliminar las barras de desplazamiento con color (hojas de estilo de usuario)
  7. Pares/impares: pintar una fila sí y la otra no
  8. Interfaz con fichas
  9. Un cuadro comparativo de estilos de fuente
  10. Centrado horizontal y vertical
  11. Cuadros con sombra
  12. Texto con sombra
  13. Cuadros redondeados y sombras borrosas

Vincular una hoja de estilo


Para poder incluir las propiedades de una hoja de estilo en un documento, hay que vincularla a él. Un documento puede tener varias hojas de estilo vinculadas. Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en el documento, entre las etiquetas <head> y </head>. Esta etiqueta no necesita etiqueta de cierre. A través del atributo href se especifica la hoja de estilo que se va a vincular al documento. A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo, por lo que su valor ha de ser stylesheet. A través del atributo type se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de ser text/css.

Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente código.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >

 Sintaxis de las hojas de estilo

Como recordarás, para especificar las propiedades de una capa no se utilizan etiquetas normales de HTML. Todas las propiedades se especifican a través del atributo style, y aparecen entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos). Esto es debido a que se está especificando un estilo, pero sin vincular ninguna hoja de estilo a la página. Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es muy similar. En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de propiedades (en minúsculas) que se corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un punto y coma detrás, y los valores se asignan con el símbolo : (dos puntos).
El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podríamos tener lo siguiente:
body {background-color: #006699; font-family: Arial,Helvetica;}
.mitexto {font-family: Arial,Helvetica; font-size:18px;}
Si vinculáramos esta hoja de estilo a un documento, se aplicarían directamente las propiedades especificadas para la etiqueta <body>. En cambio, no existe ninguna etiqueta <mitexto>, por lo que para aplicar este estilo a algún elemento de la página habría que indicarlo de algún modo. Para aplicar este estilo a un elemento, habría que insertar el atributo class en su etiqueta.
Por ejemplo, para aplicar ese estilo al siguiente párrafo del documento:
<p>texto con estilo</p>
Habría que escribir:
<p class="mitexto">texto con estilo</p>
Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta, como podría ser en este caso una palabra del párrafo, sería necesario incluir la etiqueta <span> (que agrupa bloques, sin producir un cambio de línea). Por ejemplo, para aplicar el estilo únicamente a la palabra estilo, habría que escribir:
<p>texto con <span class="mitexto">estilo</span></p>

Ventajas

Algunas ventajas de utilizar CSS (u otro lenguaje de estilo) son:
  • Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
  • Separación del contenido de la presentación, lo que facilita al creador, diseñador, usuario o dispositivo electrónico que muestre la página, la modificación de la visualización del documento sin alterar el contenido del mismo, sólo modificando algunos parámetros del CSS.
  • Optimización del ancho de banda de la conexión, pues pueden definirse los mismos estilos para muchos elementos con un sólo selector; o porque un mismo archivo CSS puede servir para una multitud de documentos.
  • Mejora en la accesibilidad del documento, pues con el uso del CSS se evitan antiguas prácticas necesarias para el control del diseño (como las tablas), y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.

 Para conocer mas a fondo las hojas de estilos te puedes dirigir a la siguiente ruta: http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html