MVC en php: Parte 1
MVC en php
Que es un FrameWork?
En español se define como una “ventana de trabajo”, pero básicamente es en estructura de desarrollo sobre el cual podemos programar , es un software que ayudar a desarrollar las cosas de una manera más rápida sin empezar desde cero.
Estos frameworks son diseñados para facilitar el desarrollo de software , permitiendo a los programadores de resolver problemas dificiles de bajo nivel sino ya tener una estructura funcional sobre la cual trabajar.
Los frameworks ayudan en el desarrollo de software ya que tienen una estructura definida para crear aplicaciones con mayor rapidez. Se utiliza la POO , permite la reutilización de código . Estos frameworks manejan un patrón de MVC (Modelo- Vista- Controlador).
Los frameworks, nos ofrecen la posibilidad de usar formularios, envios de email, conexion a base de datos, sin tener que hacer el desarrollo desde cero , teniendo un código más ordenado, limpio y de fácil actualización.
Arquitectura MVC
Es un patrón de diseño realizada para reducir el esfuerzo de programación necesario en la implementación de varios sistemas.
MVC es el tipo de arquitectura que utilizan los frameworks sus siglas significan M=Modelo, V=Vista y C= Controlador. Con esto nos damos cuenta que nuestra programación ya debe estar fragmentada .
Controlador: este se encarga de nuestra aplicación , aqui podemos hacer programas, scripts que van a funcionar en nuestra aplicación de manera dinámica.
Modelo: Representa los datos de la aplicación , ya sea ficheros de textos, base de datos , xml , etc.
Vista: Maneja la presentación visual de mi aplicación de los datos manejados por el modelo .
Ahora veamos un pequeño ejemplo de un código que contenga todo , html, y php es decir sin MVC y sin POO
Vista.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8?/>
<title>Lista- Peliculas</title>
</head>
<body>
<table>
<tr>
<th>Código
</th><th>Nombre Pelicula
</th></tr>
<?php
foreach($items as $pelicula){
echo “<tr><td>”.$pelicula[id_pelicula].”</td><td>”.$pelicula[nombre].”</td></tr>”;
}
?>
</table>
</body>
</html>
Modelo.php
<?php
$conexion = mysql_connect(”localhost”,”root”,”");
$bd = mysql_select_db(”peliculas”,$conexion);
$consulta = “select * from lista”;
$resultado=mysql_query($consulta);
$items=mysql_fetch_array($resultado);
?>
Controlador.php
Este permite que todo funcione .
<?
//Modelo la conexión a base de datos y consulta
require("modelo.php");
//Vista forma visual como el usuario observaria la información
require ("vista.php");
?>
Y por ultimo incluimos un archivo index.php donde incluremos el controlador que hemos realizado .
Index.php
<?
include(”controlador.php”);
?>
TIPS con CSS
Bueno todos nos enfrentamos siempre con el mismo problema de los css que IE 6, 7 o firefox y ahora el nuevo chrome no se ve igual .Lo que a veces se ve tan lindo en firefox, en Internet Explorer se ve todo desacomodado (que dolor no?) ó cuando arreglamos todo en firefox e IE7 uff que alivio pero vayamos a verlo en IE6 que lio!!!.
Bueno para esto es necesario tener en cuenta algunas soluciones en cuanto a medidas de margin o padding que casi siempre suelen pasar , pero queremos que en firefox tenga otra medida e IE 6 igualmente. Casi siempre si diseñamos nuestros css para firefox queda bien para IE7 (si lo hacemos de manera correcta) pero en IE6 no suele suceder.
1. Realizamos nuestro diseño para firefox
2. para ser reconocido solo para IE6 debemos anteponer
*html #capa{
margin 0 0 0 15px;
}
#capa{
margin 0 0 0 20px;
}
Con esto vemos que firefox solo interpretará el segundo y IE el primer
Si tenemos problemas con firefox e IE 7 podemos utilizar de esta manera
#capa{
/margin 0 0 0 5px; //para IE
margin 0 0 0 10px;//para firefox
}
Asi los parametros que empiecen con barra (/) seran aplicados solo para IE.
Otra solución es copiar la propiedad y utilizar la instrucción “html>body” de esta manera como aparece aqui para hacer los ajustes con firefox
#capa
{
width: 200px;
background-color: #81A7FE;
float:left;
margin-left:0px;
margin-top:0px;
}
para firefox
html>body #capa
{
width: 200px;
background-color: #81A7FE;
float:left;
margin-left:-50px;
margin-top:0px;
}
Existe un excelente manual de css en este link www.librosweb.es
CSS con Flex
Los CSS es una hoja de estilos con un lenguaje formal para la presentación de documentos electrónicos. Estructurado en HMTL y XHTML. Actualmente W3C se encarga de formular la especificación de la Hoja de Estilos (CSS) que sirve como estándar para los navegadores.
Existen 3 tipos de CSS que puedo implementar dentro de una aplicación de flex.
- CSS in line
- CSS interna/embebida
- CSS externa/ligada
Los CSS in line son aquellos estilos que implemento dentro de las etiquetas de esta manera :
<mx:Label fontSize=”14” label=”Ejemplo”/>
Si vemos en esta etiqueta label tiene una propiedades, entre ellas una de estilos que son el fontSize, interpretando esto dentro de CSS para un html, cambia un poco sabiendo que el font-size corresponde a esta, asi que en cuanto a web semántica cambia y hay que tener en cuenta eso.
Los Css Interna/embebida: son aquellos estilos que incluimos dentro del mismo MXML
<mx:Style>
.estilo{
color:#ffffff;
font-size:13px;
font-weight:bold;
}
</mx:Style>
<mx:Label id=”texto” styleName=”estilo” text =”Titulo”/>
Las propiedades como x, y, width y height son propiedades que no permiten ser incluidas dentro de los CSS.
Igualmente puedo aplicar estilos para todas las instancias de la clase Label.
<mx:Style>
Label{
color:#ffffff;
font-size:13px;
font-weight:bold;
}
</mx:Style>
<mx:Label id=”texto” styleName=”estilo” text =”Titulo”/>
CSS externa/ligada:
Son aquellas donde leemos desde una hoja de estilos externa . De la siguiente manera descargamos un estilo CSS externo:
<mx:Style source=”estilos.css“/>
Aquí debemos tener en cuenta que tener una hoja de estilos de esta manera, no signifique que podamos modificar la hoja de sin originar el archivo SWF de nuevo. Ya que nos posibilita que sea menos flexible. Porque el compila todo esto dentro del archivo SWF.
Como embeber fuentes dentro de un CSS
Primero que todo debemos crear una carpeta donde tengamos nuestra fuente TFF.
Y dentro de la hoja de estilos incluimos lo siguiente:
<mx:Style>
@font-face {
src:url(“fonts/ORG_V01_.TTF”);
font-family: mifuente;
}
.titulo{
color:#ffffff;
font-size:13px;
font-family:mifuente;
}
</mx:Style>
Observamos que hemos anexado un clase llamada titulo donde dentro de ella utilizamos la font-family que hemos embebido desde la carpeta fonts.
Hay que tener en cuenta además, que debe ir como un CSS interno - embebido
Igualmente podemos embeber fuentes dentro de flash originando el SWF incorporamos
Dentro de la hoja de estilos la ruta del SWF.
src:url(“fonts/fuentes.swf”);
Como embeber Imágenes
Así como podemos embeber fuentes, podemos hacerlo con las imágenes.
.imagen{
backgroundImage:Embed(“imagenes/foto.jpg”);
}
Si es de un CSS externo
.imagen{
backgroundImage:@Embed(“imagenes/foto.jpg”);
}
Actualmente existe una aplicación desarrollada en flex que utiliza todas las propiedades de estilos y los genera automáticamente. Es muy recomendable para los diseñadores cuando desean que cierta aplicación se ve realmente como desean y el desarrollador lo que haría es implementar básicamente por medio de CSS la apariencia de este.
http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html
Grupo de Adobe Cali
Para las personas interesadas quienes desean integrarse a formar el grupo de adobe en Cali para aplicaciones RIA , pueden escribirme al siguiente email o agregarme por msn sancano22@hotmail.com.
Para que hablemos y especemos los temas a tratar.
Aplicaciones Air y Flex
Actualmente yo puedo hacer una aplicación de desktop con Adobe air cuyas extensiones son conocidas como .air Y a la vez puedo implementar aplicaciones tipo web que generan un SWF.
Con flex builder yo puedo desarrollar aplicaciones escritorio como web. Actualmente las aplicaciones escritorio apenas estan dando un poco de importancia para los usuarios, un ejemplo claro son los widgets desarrollados con Flex Builder. Pero Que es un Widget?.
Los widgets son pequeños programas muy útiles para dar acceso a funciones que tenga contenidos interactivos. Actualmente un Widget no tiene un valor agregado dentro de los sitios web. Casi siempre se presentan como un servicio adicional que se da al usuario para poder descargar un contenido de información directamente desde su escritorio sin necesidad de navegar por todo el sitio. El desarrollo de un widget depende básicamente de los servicios que quiere dar a conocer del usuario y la utilización de este.
Para instalar una aplicación AIR adobe , debemos disponer del runtime de Adobe AIR para poder ver los proyectos armados en AIR. Lo bueno de esto es que Adobe Air es una tecnologia multiplataforma con soporte a WIndows, MAc y Linux que día a día esta ganando más aceptación por los usuarios e igualmente simbra el interes e implementar algun tipo de desarrollo con esto.
Algunos ejemplos de aplicaciones AIR
- Widget de olimpicos Diario ELPAIS (realizado por mí)
- Aplicación Destkop EBAY . Se las recomiendo, es la que mayor número de descargas y la que ha gustado mucho a los usuarios.
Evento Flexcamp Bogotá
El Adobe User Group Colombia, en un evento que se realizará el 11 de Septiembre en Tecnoparque Bogotá dará a conocer las ventajas de las soluciones RIA, Adobe FLEX y Adobe AIR, en una serie de charlas que van desde lo básico a charlas mas especializadas sobre la innovadora y exitosa herramienta para el desarrollo de aplicaciones de alto impacto.
FlexcampBogotá está dirigido principalmente a principiantes y expertos desarrolladores quienes desean aprender más acerca de Adobe Flex y Adobe AIR, el evento se realizará a partir de las 8:30 AM en el Tecnoparque Bogotá Calle 54 No. 10 – 39 sede chapinero y las inscripciones se realizan a través de internet ingresando a: http://www.flexcampbogota.com/
Los asistentes podrán conocer cómo el concepto RIA (Rich Internet Applications) está revolucionando las aplicaciones Web.
Ruby on Rails
Bueno , ahora ando probando ruby on rails, para nosotros que llevamos tiempo programando en php es un concepto demasiado diferente , aqui utilizan el manejo de MVC y la forma como programo un controlador de darle unas simples funciones para crear mis páginas.
Bueno para instalar Ruby on Rails, debes descargar Ruby e instalarlo el ejecutable. Despues descargas los archivos correspondientes a rails con extensión .gem desde la consola windows solo ejecutas el comando
gem install nombresRails.gem
uno a uno de los archivo rails si no tienes internet, si quieres hacerlo desde internet, pues ejecutas en la consola
gem install rails –remote
y ya tienes tu Ruby on Rails instalado. Lo otro necesitas de apache, y mysql para la base de datos.
Bueno para más detalle puedes visitar este sitio.
Muy pronto les mostrare un ejemplo de practica. Por ahora ando estudiando.
Aplicación Flex Sencilla
Bueno queria compartir esta aplicación flex que logre hacer comunicando por un httpService un archivo xml y con un datagrid logre que interactuaran los datos dentro de un xml y a la vez leyendo el tag de link dentro del xml y colocando un linkbutton para hacer un requestURL para abrir la nota en detalle.
Aqui les presento el código fuente ( no se ve muy bien, lo siento):
Aqui manejamos el componente para servicios de datos :HTTPServices para comunicar un archivo XML. Igualmente otros componentes: datagrid, label , textInput. Button y manejo de eventos sobre los componentes.
Aqui dejo para descargar esta pequeña Aplicación Flex
RIA( Rich Internet Applications) Las aplicaciones Web del futuro
En Colombia el término RIA es tal vez un poco desconocido por muchos. Pero a nivel mundial es una sigla que está revolucionando la forma de presentar y crear aplicaciones Web.
Para los sitios Web tales como reproductores de video y audio que no necesitan de un reproductor en el sistema operativo del usuario para poder ejecutarlo.
Este tipo de aplicaciones utiliza plataformas como Flash y Flex de Adobe o Ajax para poder realizarse.
Algunos ejemplos en los siguientes urls:
Las aplicaciones web tradicionales hacen una carga continua de las páginas cada que el usuario interactúa con esta, creando asà creando un mayor trafico entre el usuario y el servidor. Otra de las desventajas que tienen las aplicaciones Web tradicionales es la poca capacidad o manejo multimedia que incorporan, incapacitando la interactividad de forma multimedia con el usuario.
La aplicaciones RIA permiten esta interactividad multimedia con el usuario, ofreciendole una experiencia diferente. En las RIA no se producen cargas de forma continua de las paginas, usualmente para este tipo de desarrollos utilizan AJAX. Cuando se carga la aplicación se carga al completo, enviando la información al servidor desde el usuario cuando se requiere algún tipo de dato o información.
Entre los beneficios principales de RIA tenemos una mejora importante en la experiencia visual, que hacen del uso de la aplicación algo muy sencillo, ofrece mejoras en la conectividad y despliegue instantáneo de la aplicación agilizando el acceso a ella.
Dos tecnologías muy conocidas para implementar RIA son ajax para aplicaciones que se ejecutan de manera asíncrona con el servidor sin necesidad de recargarla. Otra en que nos basamos es flash/flex, permite construir tu propio componente de flash a través de flex. Este permite crear aplicaciones personalizadas y muy ricas en elementos multimedia que mejoran notablemente la experiencia del usuario y a la vez la forma como interaccionan con ella.
Search
Ultimos Post
Categorias
Archivos
Ultimos comentarios
- sancano on MVC en php: Parte 1
- Juanma on MVC en php: Parte 1
- Jose Ahumada on Grupo de Adobe Cali
- admin on TIPS con CSS
- Jose Ahumada on TIPS con CSS
Recomendados
