Elad Rodrigueznitsnets | studios
La industrialización en la web
martes 8 de febrero de 2011
La industrialización en la web
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
martes 8 de febrero de 2011
La industrialización en la web
¿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...
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos ESPECIALIZACIÓNpersonasmáquinas
martes 8 de febrero de 2011
La industrialización en la web
¿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.
martes 8 de febrero de 2011
La industrialización en la web
¿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
La industrialización en la web
¿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...
martes 8 de febrero de 2011
La industrialización en la web
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
martes 8 de febrero de 2011
La industrialización en la web
por tanto...
¡Estamos listos!
martes 8 de febrero de 2011
La industrialización en la web
Personal de desarrollo
ESPECIALIZACIÓN
martes 8 de febrero de 2011
La industrialización en la web
Personal de desarrollo
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/
martes 8 de febrero de 2011
La industrialización en la web
Personal de desarrollo
MÉTODOS DE TRABAJO: SCRUM
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.
martes 8 de febrero de 2011
La industrialización en la web
Personal de desarrollo
MÉTODOS DE TRABAJO: SCRUM
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.
martes 8 de febrero de 2011
La industrialización en la web
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.
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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!!!
Avances tecnológicos
FRAMEWORKS
martes 8 de febrero de 2011
La industrialización en la web
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
Avances tecnológicos
FRAMEWORKS
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
Avances tecnológicos
FRAMEWORKS
martes 8 de febrero de 2011
La industrialización en la web
Selección de los frameworks como base:
Avances tecnológicos
FRAMEWORKS
(Symfony || CodeIgniter)&& ZendFramework && pear
&& jquery && doctrine
+
+ORM base de datos
ó
librerías
Gaia FrameworkPureMVC
Flash / Flex
Javascript
martes 8 de febrero de 2011
La industrialización en la web
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
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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.
Avances tecnológicos
CMS’s
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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 ....
Avances tecnológicos
Plugins / Modules
martes 8 de febrero de 2011
La industrialización en la web
-‐ Existen miles de componentes y librerías en el mundo opensource.Lo mejor es seleccionar una de cada Ppo e integrarla en tu proyecto
Avances tecnológicos
Componentes / Librerías
http://jqueryui.com/
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos
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
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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.
Avances tecnológicos / Ideas
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.
martes 8 de febrero de 2011
La industrialización en la web
http://www.adobe.com/devnet-archive/flex/tourdeflex/web/#illustIndex=0;sampleId=70030;docIndex=0
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas
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...
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas
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]
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
martes 8 de febrero de 2011
La industrialización en la 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.
Avances tecnológicos / Ideas . SEO
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
martes 8 de febrero de 2011
La industrialización en la web
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.
Avances tecnológicos / Ideas . SEO
Enrutamiento web. SOLUCIONES
$route['artistas'] = "artistas";$route['artista/(:any)'] = "artistas/ficha/$1";
$route['obras/buscador/(:any)/(:num)'] = "obras/buscador/$1/$2";
martes 8 de febrero de 2011
La industrialización en la web
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.
Avances tecnológicos / Ideas . SEO
Enrutamiento web. SOLUCIONES
! ! $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');
martes 8 de febrero de 2011
La industrialización en la web
h|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/rouPng-‐db/
Avances tecnológicos / Ideas . SEO
Enrutamiento web. SOLUCIONES
! <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." />
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . SEO
Enrutamiento web. SOLUCIONES
GESTOR DE LAS PÁGINASh|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/rouPng-‐db/cms
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
martes 8 de febrero de 2011
La industrialización en la web
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
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
martes 8 de febrero de 2011
La industrialización en la web
Nosotros tenemos un sistema que se llamaba nts | image que mediante GD2 hacía estos recortes.
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
martes 8 de febrero de 2011
La industrialización en la web
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/
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
martes 8 de febrero de 2011
La industrialización en la web
- 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).
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
<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]
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
-‐ 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
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
Tratamiento de imágenes. SOLUCIONES
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
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/
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
Avances tecnológicos / Ideas . INTERFAZ
Editor de Layouts (EDL)
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
Editor de Layouts (EDL)h|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/edl/cms
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
Editor de Layouts (EDL)
$(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
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . INTERFAZ
Editor de Layouts (EDL)
VISTA DE CADA MÓDULO
martes 8 de febrero de 2011
La industrialización en la web
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
martes 8 de febrero de 2011
La industrialización en la web
ESTRUCTURAS / REJILLAS / LAYOUTS
Avances tecnológicos / Ideas . INTERFAZ
Editor de Layouts (EDL)
martes 8 de febrero de 2011
La industrialización en la web
Resultado final exactamente igualcomo el cliente lo ha maquetado.
-‐ Independencia-‐ Simple-‐ Potente-‐ Nuevo
Avances tecnológicos / Ideas . INTERFAZ
Editor de Layouts (EDL)
h|p://www.nitsnets.com/conferencias/adwe/industrializacion-‐web/edl/
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
martes 8 de febrero de 2011
La industrialización en la web
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.
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD PRODUCTOS TIENDA ONLINE
martes 8 de febrero de 2011
La industrialización en la web
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.
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD PRODUCTOS TIENDA ONLINE
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD PRODUCTOS TIENDA ONLINE
martes 8 de febrero de 2011
La industrialización en la web
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
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD SISTEMA DE FICHEROS / IMÁGENES
martes 8 de febrero de 2011
La industrialización en la web
ABSTRACCIÓN BDDE FICHEROS E IMÁGENES EXTERNAS
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD SISTEMA DE FICHEROS / IMÁGENES
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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.
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD LOCALIZACIÓN / IDIOMAS
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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.
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD LOCALIZACIÓN / IDIOMAS
martes 8 de febrero de 2011
La industrialización en la web
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.
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD LOCALIZACIÓN / IDIOMAS
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . BASE DE DATOS
Abstracción del modelo de Base de DatosBD LOCALIZACIÓN / IDIOMAS
martes 8 de febrero de 2011
La industrialización en la web
-‐ 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
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . PROCESOS
PROCESOS INPUT / OUPUT
martes 8 de febrero de 2011
La industrialización en la web
Avances tecnológicos / Ideas . PROCESOS
APIS en la nube
martes 8 de febrero de 2011
La industrialización en la web
CASO DE ÉXITO:ELCHE CF
martes 8 de febrero de 2011
La industrialización en la web
CASODE ÉXITO:
ELCHE CFCMS
martes 8 de febrero de 2011
La industrialización en la web
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
martes 8 de febrero de 2011
La industrialización en la web
@mention!!!
Gracias a todo el equipo denitsnets | studios
en especial:Josh Pina (@joshnts)
Elisabet Padilla (@elisabetpadilla)Pere Monerris (@websmonerris)
martes 8 de febrero de 2011
La industrialización en la web
<?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]
martes 8 de febrero de 2011