Industrialización Web

Elad Rodrigueznitsnets | studios

La industrialización en la web

martes 8 de febrero de 2011


Indice

-‐ Industralización en la web-‐ Especialización del desarrollador-‐ Avances tecnológicos Tecnología Frameworks CMS: Drupal, Joomla, Wordpress

Ideas. Solución de problemas-‐ Todo integrado. Casos de éxito



¿Qué significa industrializar lafabricación de webs?

-‐ La industrialización es el conjunto de procesos mediante el cual transformamos materias primas en productos elaborados

-‐ Avances tecnológicos y la especialización: la base de ésta industralización

-‐ Aumentando la velocidad de producción y en definiPva aumentando capital

-‐ Es increíble ver como funcionan la industrias del calzado, la alfombra...



Avances tecnológicos ESPECIALIZACIÓNpersonasmáquinas



¿Y en la web?

-‐ ¿Que nos falta para generar ese modelo industrial en la web?

TIEMPO. Quizás 100 años como el resto de industrias...o quizás no, quién sabe...

-‐ ¡Somos muy nuevos en esto! El resto de industrias llevan siglos trabajando,quizás por eso no hemos llegado a ese punto.

-‐ El objePvo es generar una cadena de montaje en el entorno web que nos permita montar los desarrollos web por piezas, por estructuras comunes como se fabrica un coche, unas zapa4llas, etc.



¿Qué problemas existenactualmente para conseguirlo?

-‐ Quizás más falta de consenso en la tecnología: El mundo de la programación nos permite ser creaPvos y dispersos. Hay millones de variables en millones de código.

-‐ Algo o alguien que diga cómo hacer LOS PROCESOS: proceso de venta de un arPculo, proceso de registro de un usuario, proceso de login, proceso de mapa...

-‐ Nuestra industria cambia a una velocidad extrema y además puedes programar hasta en 7 lenguajes a la vez :-‐S

-‐ ¿Es un problema finito? Probablemente no. La infinidad de casos y posibilidades que ?ene cada so@ware o site web hace problemá?ca esta estandarización.

-‐ En conclusión: Miles de desarrolladores realizan webs mediante procesos muy similares. martes 8 de febrero de 2011


¿Cómo empezar esta industrialización?

-‐ Estandaricemos estos procesos y una forma de hacerlo.No es tan importante cómo hacerlo (con que lenguaje, con que framework...) sino qué hacer: EL PROCESO EN SÍ. Además éste varía poco en el Pempo... el proceso de venta de un ar7culo, etc

-‐ TECNOLOGÍA: Mejorar con frameworks, herramientas, CMS’s, componentes, plugins, librerías...

-‐ PERSONAL: ESPECIALIZACIÓN. Cada uno se dedica a lo que sabe hacer muy bien como: montar servidores, desarrollar php, diseñar gráficamente, maquetación CSS, usabilidad, accesibilidad, animación...



Símil: Etapas de la Revolución Industrial

1-‐ Aplicación de la ciencia y tecnología con la invención de maquinariaSomos pura tecnología: aparición de lenguajes de programación, frameworks, patrones...

2-‐ Des-‐personalización de las relaciones de trabajo: se pasa de taller familiar a fábricaEspecialización, equipos de trabajo. Se acabó la etapa de tú sólo en el garaje

3-‐ Uso de nuevas energías como carbón y el vaporMotores para hacer nuestras aplicaciones más ricas: youtube, googlemaps, twiGer...

4-‐ La revolución en el transporteInternet cada vez Jene un ancho de banda mayor, el transporte de nuestras herramientas es mejor

5-‐ El surgimiento del proletariado urbano¿Las redes sociales y social media?

-‐ Una forma de organizarnos



por tanto...

¡Estamos listos!



Personal de desarrollo

ESPECIALIZACIÓN




MÉTODOS DE TRABAJO: SCRUM

-‐ Scrum es una metodología para el desarrollo de so@ware basada en un proceso itera?vo e incremental.

-‐ Mejor equipos pequeños y por tanto más fáciles de organizar, auto-‐organizados.

-‐ Los roles (que encajan a la perfección con la especialización) :

Product Owner. Jefe del producto. Encargado de hablar con el cliente y sacar los requisitos del sistema así como sus prioridades.

ScrumMaster. Director de proyecto. Encargado de que se cumplan las entregas, en un concepto más amplio los sprints.

Team. Desarrolladores.

Externos (gallinas). Su rol es dis?nto, es aportar información y datos importantes al proyecto pero desde un punto de vista desde fuera, no implicados en el desarrollo. Usuarios/testers (podrían ser los internautas en desarrollo web), clientes, especialistas del sector...

h"p://www.los+emposcambian.com/blog/metodologia-‐de-‐trabajo/scrum-‐desarrollo-‐agil/h"p://www.los+emposcambian.com/blog/metodologia-‐de-‐trabajo/reflexion-‐metodologia-‐agil-‐scrum-‐en-‐pymes/


http://www.lostiemposcambian.com/blog/metodologia-de-trabajo/reflexion-metodologia-agil-scrum-en-pymes/







Proceso-‐ Se empieza con la pila de producto. Lista priorizada de requisitos. Product BacklogCada funcionalidad ?ene: iden?ficador del requisito, nombre, importancia/peso, es?mación inicial (1 punto = 1 día), test, notas, solicitante.

-‐ Planificación de sprints que son cortos. Entregas frecuentes.Sprint Planning Mee4ngScrum se basa en ciclos de desarrollos cortos, ya que la mente trabaja mejor con periodos de entrega a 2 días vista que a 2 meses. En el doc Sprint Backlog se detalla cómo se va a desarrollar. A par?r del Product Blacklog de funcionalidades se despieza en tareas que no pasen de 2 días, 16 horas.

Y cuando se van a hacer entregas parciales, que va llevar cada SPRINT (entrega). El ?empo de cada entrega se determina según el proyecto (suelen recomendar 2 y 4 semanas). A par?r de los sprints se puede enseñar trozos al cliente para que pueda introducir cambios, es decir, ser flexibles.





La definición de los sprints se hacen con el equipo donde se define: una meta del sprint, fecha de finalización del sprint, que funcionalidades llevará el sprint y que desarrolladores con su dedicación posible si no es al 100%.

No lo hace el ProductOwner todo porque cada desarrollador puede determinar mejor en su especialidad lo que puede tardar, las cosas que se pueden complicar…En estas reuniones se define el alcance, importancia (definido por ProductOwner) y la es?mación (definido por el equipo de desarrollo). Las reuniones ?enen que ser breves. Para tomar las decisiones se suelen u?lizar tarjetas y post-‐its, determinando cada uno el ?empo a u?lizar como si de poker se tratará ;-‐)

-‐ Reuniones diarias durante el desarrollo. Daily ScrumSe suele hacer por las mañanas a las 9.00 al entrar. 15 minutos y de pie para prestar mayor atención. Todo el mundo expone lo que hizo el día anterior y que dificultades tuvo (suelen apuntarlo en una wiki).

Fuente de conocimiento y solución de problemas. Cada uno debe contestar a unas preguntas: ¿Qué hiciste desde ayer?, ¿Qué Henes planeado hacer hoy?, ¿Has encontrado algún problema durante el desarrollo?

En defini?va al ir todos en una piña seguro que la cohesión del grupo es mejor y más ágil. Así como el entendimiento del equipo.


http://www.post-it.com/

http://www.post-it.com/


Avances tecnológicos

TECNOLOGÍA

-‐ No es determinante la elección de esta tecnología para conseguir un fin.

-‐ Se recomienda en un modelo basado en OPENSOURCE: más recursos, más documentación, más comunidad....

-‐ En nuestro caso:PHP 5.1MySQL 4JavascriptHTML 5 / CSS

Incluso Flash y Flex para ciertos desarrollos o complementos de desarrollo estándar.



-‐ Framework es un conjunto estandarizado de conceptos, prácPcas y criterios para resolver un problema. Imprescindible para esta revolución industrial en la web.

-‐ En sokware es una estructura conceptual y tecnológica de soporte definida. Con librerías, componentes y clases que facilitan un desarrollo ágil, seguro y escalable.

-‐ Una forma de organizarnos.

-‐ Debemos tener frameworks en TODAS LAS TECNOLOGÍAS: frameworks para PHP, para Javascript, para Flash, para Flex incluso para CSS!!!


FRAMEWORKS



Nos va a permiPr:

-‐ Escalibilidad y Mantenimiento-‐ Independencia lógica de negocio e interfaz gráfica gracias al MVC-‐ Desarrollo más rápido y mejor. Pero desarrollar :-‐S-‐ Librerías y códigos ya realizados

-‐ Menos código:menos complejidad => menos bugs=> más producPvidad => menos Pempo=> menos costes => más beneficios


FRAMEWORKS



-‐ Pero con el proceso industrial vamos a intentar desarrollar lo mínimo.Es decir minimizar los procesos para que al final haya que desarrollar muy poco.¡Sólo lo especial para ese cliente o site web!

-‐ ¿Cómo? Con un nivel de abstracción mayor en los procesos y un montaje por piezasgracias a técnicas y soluciones tecnológicas. Y nada de copy&paste por favor ;-‐)

OBJETIVO NO DESARROLLAR


FRAMEWORKS



Selección de los frameworks como base:


FRAMEWORKS

(Symfony || CodeIgniter)&& ZendFramework && pear

&& jquery && doctrine

+

+ORM base de datos

ó

librerías

Gaia FrameworkPureMVC

Flash / Flex

Javascript



Apunte: CodeIgniter 2.0 release 28/01/2011

CodeIgniter Core Core es un desarrollo más lento de CodeIgniter que se uPlizará como base para los productos EllisLab comerciales como ExpressionEngine y MojoMotor

CodeIgniter Reactor Desarrollo por la comunidad de CodeIgniter que permiPrá una adopción más rápida de las mejoras constantes en la web. Revisada por un equipo de ingenieros. Realmente esto será CI.

Mejoras-‐ PHP 5.1. No soporte a PHP4-‐ Mejora la seguridad en los formularios-‐ Drivers que básicamente engloba base de datos, javascript, etc..-‐ Plugins se han eliminado en favor de helpers-‐ Facilidad creación páginas de error 404-‐ Solución de muchos bugs



-‐ Podemos subir un nivel de los frameworks y uPlizar un gestor de contenido ya realizado. Un motor, incluso un motor según funcionalidad.

-‐ Tendremos muchísimo realizado, pero tendremos que hacernos expertos del sistema para poder tratar bien este tema.

-‐El crear tu mismo el motor o uPlizar uno de los creados es una discusión aparte.


CMS’s



-‐ Aplicaciones que se relacionan con otras para aportarles una función nueva y generalmente muy específica. Ésta aplicación adicional es ejecutada por la aplicación principal e interactúa por medi de la API.

-‐ Muchísimos plugins/módulos en Frameworks o CMS’s:

GesPón de Caché EstadísPcas GesPón de usuarios Formularios GesPón de imágenes ....


Plugins / Modules



-‐ Existen miles de componentes y librerías en el mundo opensource.Lo mejor es seleccionar una de cada Ppo e integrarla en tu proyecto


Componentes / Librerías

http://jqueryui.com/


http://jqueryui.com

http://jqueryui.com



Ideas. Solución de problemas

-‐ Generadores de código

-‐ SEO -‐ Enrutamiento web

-‐ INTERFAZ -‐ Tratamiento de imágenes. Evitar Photoshop -‐ Editor de layouts (EDL). Evitar CSS

-‐ BASE DE DATOS: Abstración del modelo de BD.

-‐ PROCESOS input/output



-‐ Te generan automáPcamente el gestor de contenidos a parPr de una base de datos.Como puede ser el CREATE

-‐ También se podría uPlizar para generar AUTOFORMS

Avances tecnológicos / Ideas

Generadores de código. CRUDS

CodeIgniter: http://code.google.com/p/ci-crud-generator/Symfony y CI: Scaffolding integrado en el framework


http://code.google.com/p/ci-crud-generator/

http://code.google.com/p/ci-crud-generator/


-‐ Es interesante el concepto de metalenguajes; es decir hacer una especificación de alto nivel, por ejemplo en XML, y a parPr de un intérprete / compilador generamos código para nuestra aplicación.


Metalenguajes

-‐ Un concepto similar es el que se plantearon para FLEX con su MXML.

Incluso algunos servidores servían directamente .mxml creandointerfaces a un nivel mucho más elevado que HTML.



http://www.adobe.com/devnet-archive/flex/tourdeflex/web/#illustIndex=0;sampleId=70030;docIndex=0






EDICIÓN DEL CMS AUTOMÁTICAMENTE-‐ A parPr de palabras claves en el código de la vista, el CMS permita que sea editable y genere su formulario asociado:

<h2 class=”editable”>Esto va a ser editable</h2>

-‐ Un CMS ligero que Pene esto como su máxima funcionalidad es CUSHY: h|p://www.cushycms.com/

Incluso llegando a cambiar los campos que genera según sea una imagen, un div, un h1...


http://www.cushycms.com

http://www.cushycms.com



SHORTCODES-‐ Palabras reservadas o códigos reservados que llevan unas funcionalidades. Otros CMS’s los uPlizan como Wordpress(se pueden hasta crear nuevos):

h.p://codex.wordpress.org/Shortcode_API

Ejemplos:[related_posts][adsense][postimage][gallery id=”132” size=“medium”][pagerank]


http://codex.wordpress.org/Shortcode_API







-‐ El SEO actualmente es una necesidad en todo proyecto web

-‐ La creación de urls amigables o permalinks es fundamental para un buen posicionamiento SEO

-‐ No es lo mismo:www.miblog.com/no4cia.php?id=40

quewww.miblog.com/conferencia-‐adwe-‐industrializacion-‐web

Avances tecnológicos / Ideas . SEO

Enrutamiento web


http://www.miblog.com/conferencia-adwe-industrializacion-web

http://www.miblog.com/conferencia-adwe-industrializacion-web


1-‐ Trabajar directamente con el hbaccess a parPr de expresiones regulares.

Resulta bastante tedioso y te complica en cada proyecto según la parPcularidad del mismo.


Enrutamiento web. SOLUCIONES

Options FollowSymLinksRewriteEngine on

RewriteRule ^(cas|val)/search.html(.*)! ! search.php$2RewriteRule ^(cas|val)/mapaweb.html(.*)! ! mapaweb.php$2RewriteRule ^(cas|val)/noticias-(.*)-(.*)\.html(.*) pagina.php?page=noticias&lang=$1&id=$3&$4RewriteRule ^(cas|val)/eventos-(.*)-(.*)\.html(.*) pagina.php?page=eventos&lang=$1&id=$3&$4RewriteRule ^(cas|val)/(.*)\.html(.*) pagina.php?page=$2&lang=$1&$3



2-‐ UPlizar un framework de alto nivel como CodeIgniter o SymfonyLos frameworks suelen tener un módulo de roucng que nosfacilitan todo este proceso y nos permite definir estas urlssin tener que pasar por h|access. Es el propio frameworkel que ya se encargará de dicha tarea.



$route['artistas'] = "artistas";$route['artista/(:any)'] = "artistas/ficha/$1";

$route['obras/buscador/(:any)/(:num)'] = "obras/buscador/$1/$2";



3-‐ Sistema estándar de estructura de Base de Datos con una tabla página de forma que nuestro controlador nos cargue la página completa con su SEO (y su url) correspondiente.

Abstracción y solución del problema.



! ! $url ! ! = "http://".$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];! ! $url ! ! = str_replace(base_url(),"",$url); ! ! $url_aux != explode("/",$url);! ! $url_count != count($url_aux) - 1;! !! ! $url! ! = $url_aux[$url_count];

! ! //seleccionar de la base de datos if ($url == '') {

! ! ! $actual_page = $this->pages_model->select(1);! ! } else {! ! ! $actual_page = $this->pages_model->selectWithURL($url);! ! }! !! ! //árbol del menú! ! $pages = $this->pagesTree();! !! !! ! //datos para la vista! ! $data['actual_page'] ! = $actual_page;! ! $data['pages'] ! ! = $pages;! ! ! ! //vistas! ! $this->load->view('_header', $data); ! ! $this->load->view('routing_db', $data);! ! $this->load->view('_footer');



h|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/rouPng-‐db/



! <title>Página de Inicio :: Elad Rodriguez . nitsnets | studios ::</title>

! <meta name="keywords" content="senado, eeuu, reforma, sanitaria" />

! <meta name="description" content="El Senado de EEUU, bajo control demócrata, bloqueó este miércoles por estrecho margen los esfuerzos de los republicanos por revocar la reforma del sistema de salud, dos días después de que un tribunal federal la declarase inconstitucional." />


http://www.nitsnets.com/conferencias/adwe/industrializacion-web/routing-db/





GESTOR DE LAS PÁGINASh|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/rouPng-‐db/cms







-‐ Uno de los temas importantes en la edición de datos por parte de cliente es la subida de imágenes. El cliente suele tener las imágenes en alta calidad y tamaños muy grandes no aptas para web.

-‐ La solución ideal es que el propio sistema genere la opcmización para despreocupar al cliente.

Avances tecnológicos / Ideas . INTERFAZ

Tratamiento de imágenes



1-‐ Sin solución. Informar al cliente que tamaño y peso Pene que tener la imagen y que dependa de él. No le facilitamos la vida al cliente :-‐S

2-‐ Subir la imágen del cliente. Guardar una copia y generar N-‐recortes necesarios para la web.

El problema viene si después el diseño cambia esos tamaños.Hay que pasar procesos de regeneración de imágenes (siempre y cuando se hayan guardado las originales). Dependemos de gráfica, de la vista :-‐S


Tratamiento de imágenes. SOLUCIONES



Nosotros tenemos un sistema que se llamaba nts | image que mediante GD2 hacía estos recortes.





3-‐ Sistema de tratamientos de imágenes en la ruta directamente, dejamos esta funcionalidad al maquetador CSS.

Además cachea la foto automáPcamente y no perdemos la funcionalidad del nombre de la imagen para el SEO.

Para ello u4lizamos la librería como base:Smart Image Resizer 1.4.1h|p://shikingpixel.com/2008/03/03/smart-‐image-‐resizer/




http://shiftingpixel.com/2008/03/03/smart-image-resizer/

http://shiftingpixel.com/2008/03/03/smart-image-resizer/


- Desde un script de PHP se toma como entrada el nombre del fichero y una serie de parámetros (alto, ancho, tipo de redimensión) para crear “al vuelo” la nueva imagen de la cual se guarda una copia en la cache.

- Esta forma de redimensionar las imágenes tiene varias ventajas: - Al cambiar los tamaños de las imágenes en las vistas, no necesitamos realizar ninguna acción, ya que el propio sistema ajustara los tamaños directamente.

- Reducimos el tamaño final del proyecto y lo hacemos más simple, no guardamos en múltiples carpetas la misma imagen a diferentes tamaños, solo tenemos una copia en la cache de las vistas necesarias. Además a la hora de migrar el proyecto podemos borrar la carpeta de cache ya que será regenerada.

- El maquetador CSS se desentiende completamente de la programación, tan solo tiene que indicar como desea la imagen (pj: foto_crop_80_80.jpg generara automaticamente una copia de la imagen recortada foto.jpg, de 80x80).







<img src="<?=base_url()?>uploads/images/foto_crop_920_736.jpg" />

<img src="<?=base_url()?>uploads/images/<?=getImageXY('foto.jpg',920,736,true)?>" />

VISTA

HTTACCESS

Options +FollowSymlinksRewriteEngine On

RewriteRule (.*)uploads/images/(.*)_crop_([0-9]*)_([0-9]*).(jpg|gif|png)$ system/application/libraries/opensource/image_resize/image.php/?image=uploads/images/$2.$5&width=$3&height=$4&crop=1 [L]


http://www.nitsnets.info/webs/conferencias/adwe/industrializacion-web/image-resize/uploads/images/$2.$5&width=$3&height=$4&crop=1







-‐ Según parámetros, mira en caché y te la guarda en un fichero además de mostrarla por pantalla.

-‐ El Pempo de generación lo procesa el primer usuario que ve dicha imagen.

CACHÉeb1ac5963a63ca0729f55bcce3a29d60




Tratamiento de imágenes. SOLUCIONESAdemás podemos mezclar este potente sistema con la posibilidad de que las“imagenes originales” las trate el cliente online con brillo, contraste y recorte.

¡Poder de decisión!

Incluso se pueden uclizar sistemas externos como:hbp://kroppr.rborn.info/hbp://deepliquid.com/projects/Jcrop/demos.phphbp://www.rborn.info/blog/moozoom/


http://deepliquid.com/projects/Jcrop/demos.php

http://deepliquid.com/projects/Jcrop/demos.php

http://www.rborn.info/blog/moozoom/

http://www.rborn.info/blog/moozoom/


-‐ Un EDL (editor de layouts) es un avanzado sistema de maquetación online de contenidos. Mediante una interfaz gráfica avanzada permite al usuario maquetar y ordenar los contenidos con un simple drag&drop (arrastra y suelta).

-‐Posibilidad de decisión de ubicación de contenidos según su relevancia, ver de forma gráfica el resultado final de tu publicación online. Con este avanzado sistema el usuario gana una usabilidad inimaginable y se mejora con un gran sencillez de uso. La creación de páginas web por no profesionales de la web ya no es una utopía.

-‐ Conocido de forma más entrañable como el maquetador.

-‐ Evitamos parte del DISEÑO DE CSS


Editor de Layouts (EDL)




Editor de Layouts (EDL)h|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/edl/cms







$(document).ready(function(){ //arrastra icono $().mousemove(function(e){ mouseX = e.pageX+10; mouseY = e.pageY+10; $("#raton").css({left:mouseX+"px",top:mouseY+"px"}); })

//hace dragable cada módulo $(".modulo").draggable({ cursor: 'crosshair', connectToSortable: '.columna', helper: function(){ return "<div></div>"; },

start: function (){ if(!bloquearDrag) {

tipo = $(this).attr('name'); html = "<div>"+$('.plantilla_'+tipo).html()+"</div>"; $("#raton").html(html);

$("#raton").show(); bloquearDrag = true; } },

stop: function(){ $("#raton").hide(); bloquearDrag = false; }, revert: 'invalid' })});

function activarColumnas() {

var columnas; for(var i=1; i<=nColumnas; i++) if(i==0) columnas += '#columna'+i; else columnas += ', #columna'+i;

for(var i=1; i<=nColumnas; i++) { $("#columna"+i).sortable({ cursor: 'crosshair', connectWith: columnas, tolerance:'pointer', scroll: true, handle: '.menu',

helper: function(event, ui){ return "<div></div>"; }, stop: function(event, ui) { if($(ui.item).attr("id") == "") nuevoModulo($(ui.item),$(this).attr("id"));

$("#raton").hide(); bloquearDrag=false; },

start: function(event,ui){ if(!bloquearDrag) { $("#raton").html($('.plantilla_'+tipoActual).html()); $("#raton").show(); } }});}}

DRAG&DROP: ELEMENTOS DRAG&DROP: CONTENEDOR





VISTA DE CADA MÓDULO



ESTRUCTURASREJILLASLAYOUTS

! ! <div class="structure_inside_2">! !! ! ! <?php /* Columna IZQ */ ?>! ! ! <div class="structure_column_left">! ! !! ! ! ! <?php /* Columna 100% */ ?>! ! ! ! <div class="structure_inside_1 structure_no_padding"> ! ! ! !! ! ! ! ! <?php foreach ($modulos[1] as $modulo) : echo $modulo['html']; endforeach; ?>! ! ! ! !! ! ! ! </div> ! ! ! !! ! ! ! <?php /* Columna 308px */ ?>! ! ! ! <div class="structure_column_left"> ! ! ! !! ! ! ! ! <?php foreach ($modulos[2] as $modulo) : echo $modulo['html']; endforeach; ?>! ! ! !! ! ! ! </div>! ! ! !! ! ! ! <?php /* Columna 308px */ ?>! ! ! ! <div class="structure_column_right"> ! ! ! !! ! ! ! ! <?php foreach ($modulos[3] as $modulo) : echo $modulo['html']; endforeach; ?>! ! ! !! ! ! ! </div>! ! ! !! ! ! ! <div class="clearboth"></div>

<?php foreach ($modulos[4] as $modulo) : echo $modulo['html']; endforeach; ?>! ! !! ! ! </div>! ! !! ! !! ! ! <?php /* Columna DER */ ?>! ! ! <div class="structure_column_right">! ! !! ! ! ! <?php foreach ($modulos[5] as $modulo) : echo $modulo['html']; endforeach; ?>! ! !! ! ! </div>! ! !! ! ! <div class="clearboth"></div>! !! ! </div>

1.php



ESTRUCTURAS / REJILLAS / LAYOUTS





Resultado final exactamente igualcomo el cliente lo ha maquetado.

-‐ Independencia-‐ Simple-‐ Potente-‐ Nuevo



h|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/edl/





-‐ Crear un modelo de base de datos puede implicar una limitación.¡Ojo! Un modelo de datos pensado en pequeño puede hacer que luego tengas que desmontar medio proyecto.

-‐ Si abstraemos la base de datos seremos más flexibles a cambios de cliente o a nuevas funcionalidades de nuestro modelo online.

-‐ Esta abstracción nos puede complicar un poco el desarrollo pero nos puede permicr trabajar siempre igual a nivel de base de datos con proyectos totalmente diferentes.

-‐ Ejemplos: -‐ Base de datos del problema producto/categorias/stock -‐ Sistema de ficheros / imágenes -‐ Localización / idiomas

Avances tecnológicos / Ideas . BASE DE DATOS

Abstracción del modelo de Base de Datos



MODELO CLÁSICOPRODUCTO/OPCIÓN/CATEGORÍA

Cada nuevo ?po de producto y categoría requiere modificar la bd añadiendo tablas.

Para cada producto (siempre que sigamos un modelo de persistencia) crearemos una nueva clase en base de datos y lo trataremos de forma independiente.

El stock esta directamente relacionado con el producto, no podemos diferenciar que el stock sólo forme parte de una caracterís?cas.


Abstracción del modelo de Base de DatosBD PRODUCTOS TIENDA ONLINE



ABSTRACCIÓN BDPRODUCTO/OPCIÓN/CATEGORÍA

Se pueden crear infinitos tipos de productos con las opciones y características que deseemos sin modificar la base de datos.

Todo los productos tendrán un único código compartido, además ésta puede ser reutilizado en otros proyectos (no importa si pasamos de una tienda de deportes a joyería).

El stock se puede tratar de una manera versátil, solo escogiendo las combinaciones de opciones que lo delimitan.





MODELO CLÁSICO DE FICHEROS E IMÁGENES EXTERNAS EN BD

Desde programación (PHP) debemos de saber de antemano a que Ppo de fichero pertenece cada campo con un PATH así como en que directorio se encuentra.

Se crea una tabla o campo por cada fichero externo que se quiere guardar y guardamos su nombre �sico. La ubicación se decide después según lo que se quiera mostrar. Como hemos explicado antes para cada tamaño de imagen que usemos en la vista crearemos un carpeta con un nombre explicaPvo:/thumb /normal /big


Abstracción del modelo de Base de DatosBD SISTEMA DE FICHEROS / IMÁGENES



ABSTRACCIÓN BDDE FICHEROS E IMÁGENES EXTERNAS


Abstracción del modelo de Base de DatosBD SISTEMA DE FICHEROS / IMÁGENES



-‐ Existen varias opciones a la hora de localizar en múlPples idiomas nuestro proyecto Web.Desde las más radicales e ineficientes (varias bases de datos) a otras mucho más sofisPcadas.Vamos a ver tres de ellas y proponer una solución mejor:

-‐ Varias bases de datos. Esta solución implica mantener tantas bases de datos como idiomas tengamos, es claramente poco escalable y mantenible.

-‐ Un campo por cada idioma. Típica solución para “salir del paso”. Crearemos un campo de texto extra por cada idioma que incluyamos, implica muchos problemas:

Requiere modificar la base de datos por cada nueva localización. Si no queremos complicar el código de programación, en las consultas rescataremos todos los datos. El tamaño de las tablas puede volverse intratable.


Abstracción del modelo de Base de DatosBD LOCALIZACIÓN / IDIOMAS



-‐ Campos serializados. Es una solución bastante aplicada en el mundo del sokware, consiste en guardar en los campos de textos todos los idiomas serializados (guardar un array entero).

Con este solución las búsquedas por texto en bd son poco úPles. Al guardar la información para una localización podemos modificar otra. Podemos tener problemas con la codificación, ya que no todos los lenguajes de programación admiten serializar objetos y arrays en múlPples codificaciones.

Si añadimos un nuevo idioma, deberemos regenerar el contenido de los campos serializados o darán error al rescatarlos.





ABSTRACCIÓN BDLOCALIZACIÓN / IDIOMAS

El modelo requiere implementar en la parte servidor un sistema común para todas las tablas y campos con el fin de rescatar y guardar los datos en diferentes idiomas.

Este modelo permite infinitos idiomas sin necesidad de aplicar ningún cambio en la base de datos ni en la programación de la aplicación web.

Las búsquedas por texto en la base de datos no se ven influidas como en el sistema de serialización de campos.

Gracias al sistema centralizado, en tres únicas tablas tenemos todos los textos de la aplicación, pudiendo realizar la traducción de una forma rápida y eficiente.





-‐ En definiPva trabajar con pequeñas aplicaciones y procesos ya prefabricados.

-‐ Trabajar como si fuera para terceros con una API robusta.Mediante Webservices, REST, XML...

-‐ Debería ser lo mismo trabajar con una API externa como Facebook, TwiXer, Flickr... que con nuestros microprocesos.

-‐ Llegar a ese punto es que has pensado las funcionalidades, están definidas, abstraídas hasta tal punto que te aseguras que los procesos están mejor solucionados!

-‐ Todo Pene unos parámetros de entrada y un resultado de salida.

-‐ Por ejemplo, nuestro sistema de creación de facturas debería funcionar como un módulo a parte que podría uHlizar mi ecommerce, mi erp, etc...

Avances tecnológicos / Ideas . PROCESOS

PROCESOS INPUT / OUPUT




PROCESOS INPUT / OUPUT




APIS en la nube



CASO DE ÉXITO:ELCHE CF



CASODE ÉXITO:

ELCHE CFCMS



Al final ser ingeniero supone solucionar problemasy a poder ser no volver a pensar en ellos nunca más...

sino esto no es diver?do sino repe??vo ;-‐)

Avances tecnológicos / Conclusión

SOLUCIÓN DE PROBLEMAS



@mention!!!

Gracias a todo el equipo denitsnets | studios

en especial:Josh Pina (@joshnts)

Elisabet Padilla (@elisabetpadilla)Pere Monerris (@websmonerris)



<?php echo “MUCHAS GRACIAS!”; ?>Elad Rodríguez

y todo el equipo de nitsnets | studios

twitter: @eladntsblog: www.lostiemposcambian.com

work: www.nitsnets.comemail: [email protected]


http://www.twitter.com/andreskarp

http://www.twitter.com/andreskarp

http://www.andreskarp.es

http://www.andreskarp.es

http://www.dinamiclab.com

http://www.dinamiclab.com

Industrialización Web

Technology

Transcript of Industrialización Web