Your SlideShare is downloading. ×
Industrialización Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Industrialización Web

2,518

Published on

Presentación de Elad Rodríguez sobre Industrialización de los procesos para la creación de Webs en Adwe Alicante

Presentación de Elad Rodríguez sobre Industrialización de los procesos para la creación de Webs en Adwe Alicante

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,518
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. La  industrialización  en  la  web Elad Rodriguez nitsnets | studiosmartes 8 de febrero de 2011
  • 2. 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  éxitomartes 8 de febrero de 2011
  • 3. La  industrialización  en  la  web ¿Qué  significa  industrializar  la fabricació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
  • 4. La  industrialización  en  la  web máquinas personas Avances  tecnológicos ESPECIALIZACIÓNmartes 8 de febrero de 2011
  • 5. 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
  • 6. La  industrialización  en  la  web ¿Qué  problemas  existen actualmente  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
  • 7. 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
  • 8. 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  maquinaria Somos  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ábrica Especializació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  vapor Motores  para  hacer  nuestras  aplicaciones  más  ricas:  youtube,  googlemaps,  twiGer... 4-­‐  La  revolución  en  el  transporte Internet  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?martes 8 de febrero de 2011
  • 9. La  industrialización  en  la  web por  tanto... ¡Estamos  listos!martes 8 de febrero de 2011
  • 10. La  industrialización  en  la  web Personal  de  desarrollo ESPECIALIZACIÓNmartes 8 de febrero de 2011
  • 11. La  industrialización  en  la  web Personal  de  desarrollo MÉTODOS  DE  TRABAJO:  SCRUM 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/ -­‐  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...martes 8 de febrero de 2011
  • 12. 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  Backlog Cada  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  Mee4ng Scrum  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
  • 13. 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  Scrum Se  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
  • 14. 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.1 MySQL  4 Javascript HTML  5  /  CSS Incluso  Flash  y  Flex  para  ciertos  desarrollos  o  complementos  de  desarrollo  estándar.martes 8 de febrero de 2011
  • 15. La  industrialización  en  la  web Avances  tecnológicos   FRAMEWORKS -­‐  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!!!martes 8 de febrero de 2011
  • 16. La  industrialización  en  la  web Avances  tecnológicos   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  beneficiosmartes 8 de febrero de 2011
  • 17. La  industrialización  en  la  web Avances  tecnológicos   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  piezas gracias  a  técnicas  y  soluciones  tecnológicas.  Y  nada  de  copy&paste  por  favor  ;-­‐) OBJETIVO  NO  DESARROLLARmartes 8 de febrero de 2011
  • 18. La  industrialización  en  la  web Avances  tecnológicos   FRAMEWORKS Selección  de  los  frameworks  como  base: Flash  /  Flex librerías ó + ORM  base  de  datos Javascript + (Symfony  ||  CodeIgniter) &&  ZendFramework  &&  pear Gaia  Framework &&  jquery  &&  doctrine PureMVCmartes 8 de febrero de 2011
  • 19. 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  bugsmartes 8 de febrero de 2011
  • 20. La  industrialización  en  la  web Avances  tecnológicos   CMS’s -­‐  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.martes 8 de febrero de 2011
  • 21. La  industrialización  en  la  web Avances  tecnológicos   Plugins  /  Modules -­‐  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                        ....martes 8 de febrero de 2011
  • 22. La  industrialización  en  la  web Avances  tecnológicos   Componentes  /  Librerías -­‐  Existen  miles  de  componentes  y  librerías  en  el  mundo  opensource. Lo  mejor  es  seleccionar  una  de  cada  Ppo  e  integrarla  en  tu  proyecto http://jqueryui.com/martes 8 de febrero de 2011
  • 23. 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/outputmartes 8 de febrero de 2011
  • 24. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas Generadores  de  código.  CRUDS -­‐  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 Symfony y CI: Scaffolding integrado en el framework CodeIgniter: http://code.google.com/p/ci-crud-generator/martes 8 de febrero de 2011
  • 25. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas Metalenguajes -­‐  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. -­‐  Un  concepto  similar  es  el  que  se  plantearon  para  FLEX  con  su  MXML. Incluso  algunos  servidores  servían  directamente  .mxml  creando interfaces  a  un  nivel  mucho  más  elevado  que  HTML.martes 8 de febrero de 2011
  • 26. La  industrialización  en  la  web http://www.adobe.com/devnet-archive/flex/tourdeflex/web/#illustIndex=0;sampleId=70030;docIndex=0martes 8 de febrero de 2011
  • 27. 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
  • 28. 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
  • 29. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  SEO Enrutamiento  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 que www.miblog.com/conferencia-­‐adwe-­‐industrializacion-­‐webmartes 8 de febrero de 2011
  • 30. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  SEO Enrutamiento  web.  SOLUCIONES 1-­‐  Trabajar  directamente  con  el  hbaccess  a  parPr  de  expresiones  regulares. Options FollowSymLinks RewriteEngine on RewriteRule ^(cas|val)/search.html(.*)! ! search.php$2 RewriteRule ^(cas|val)/mapaweb.html(.*)! ! mapaweb.php$2 RewriteRule ^(cas|val)/noticias-(.*)-(.*).html(.*) pagina.php?page=noticias&lang=$1&id=$3&$4 RewriteRule ^(cas|val)/eventos-(.*)-(.*).html(.*) pagina.php?page=eventos&lang=$1&id=$3&$4 RewriteRule ^(cas|val)/(.*).html(.*) pagina.php?page=$2&lang=$1&$3 Resulta  bastante  tedioso  y  te  complica  en  cada  proyecto  según  la  parPcularidad  del  mismo.martes 8 de febrero de 2011
  • 31. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  SEO Enrutamiento  web.  SOLUCIONES 2-­‐  UPlizar  un  framework  de  alto  nivel  como  CodeIgniter  o  Symfony Los  frameworks  suelen  tener  un  módulo  de  roucng  que  nos facilitan  todo  este  proceso  y  nos  permite  definir  estas  urls sin  tener  que  pasar  por  h|access.  Es  el  propio  framework el  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";martes 8 de febrero de 2011
  • 32. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  SEO Enrutamiento  web.  SOLUCIONES 3-­‐  Sistema  estándar  de  estructura  de   ! ! $url ! ! = "http://".$_SERVER[SERVER_NAME].$_SERVER["REQUEST_URI"]; Base  de  Datos  con  una  tabla  página  de   ! ! ! ! $url ! ! $url_aux = str_replace(base_url(),"",$url); ! explode("/",$url); = forma  que  nuestro  controlador  nos   ! ! ! ! $url_count ! count($url_aux) - 1; = cargue  la  página  completa  con  su  SEO   ! ! $url! ! = $url_aux[$url_count]; ! ! //seleccionar de la base de datos (y  su  url)  correspondiente. ! ! 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); Abstracción  y  solución  del  problema.martes 8 de febrero de 2011
  • 33. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  SEO Enrutamiento  web.  SOLUCIONES 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." />martes 8 de febrero de 2011
  • 34. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  SEO Enrutamiento  web.  SOLUCIONES GESTOR  DE  LAS  PÁGINAS h|p://www.nitsnets.com/conferencias/adwe/industrializacion-­‐web/rouPng-­‐db/cmsmartes 8 de febrero de 2011
  • 35. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes -­‐  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.martes 8 de febrero de 2011
  • 36. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONES 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  :-­‐Smartes 8 de febrero de 2011
  • 37. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONES Nosotros  tenemos  un  sistema  que  se  llamaba  nts  |  image  que  mediante  GD2  hacía  estos   recortes.martes 8 de febrero de 2011
  • 38. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONES 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.1 h|p://shikingpixel.com/2008/03/03/smart-­‐image-­‐resizer/martes 8 de febrero de 2011
  • 39. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONES - 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).martes 8 de febrero de 2011
  • 40. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONES VISTA <img src="<?=base_url()?>uploads/images/foto_crop_920_736.jpg" /> <img src="<?=base_url()?>uploads/images/<?=getImageXY(foto.jpg,920,736,true)?>" /> HTTACCESS Options +FollowSymlinks RewriteEngine 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
  • 41. 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   CACHÉ un  fichero  además  de  mostrarla  por  pantalla. eb1ac5963a63ca0729f55bcce3a29d60 -­‐  El  Pempo  de  generación  lo  procesa  el  primer   usuario  que  ve  dicha  imagen.martes 8 de febrero de 2011
  • 42. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONESmartes 8 de febrero de 2011
  • 43. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Tratamiento  de  imágenes.  SOLUCIONES Ademá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.php hbp://www.rborn.info/blog/moozoom/martes 8 de febrero de 2011
  • 44. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Editor  de  Layouts  (EDL) -­‐  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  CSSmartes 8 de febrero de 2011
  • 45. 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/cmsmartes 8 de febrero de 2011
  • 46. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Editor  de  Layouts  (EDL) DRAG&DROP:  CONTENEDOR DRAG&DROP:  ELEMENTOS function activarColumnas() { $(document).ready(function(){ var columnas; //arrastra icono for(var i=1; i<=nColumnas; i++) $().mousemove(function(e){ if(i==0) mouseX = e.pageX+10; columnas += #columna+i; mouseY = e.pageY+10; else $("#raton").css({left:mouseX+"px",top:mouseY+"px"}); columnas += , #columna+i; }) for(var i=1; i<=nColumnas; i++) //hace dragable cada módulo { $(".modulo").draggable({ $("#columna"+i).sortable({ cursor: crosshair, cursor: crosshair, connectToSortable: .columna, connectWith: columnas, helper: function(){ return "<div></div>"; }, tolerance:pointer, scroll: true, start: function (){ handle: .menu, if(!bloquearDrag) { helper: function(event, ui){ return "<div></div>"; }, tipo = $(this).attr(name); stop: function(event, ui) { html = "<div>"+$(.plantilla_+tipo).html()+"</div>"; if($(ui.item).attr("id") == "") $("#raton").html(html); nuevoModulo($(ui.item),$(this).attr("id")); $("#raton").show(); bloquearDrag = true; $("#raton").hide(); } bloquearDrag=false; }, }, stop: function(){ start: function(event,ui){ $("#raton").hide(); if(!bloquearDrag) { bloquearDrag = false; $("#raton").html($(.plantilla_+tipoActual).html()); }, $("#raton").show(); revert: invalid } }) }); }});}}martes 8 de febrero de 2011
  • 47. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Editor  de  Layouts  (EDL) VISTA  DE  CADA  MÓDULOmartes 8 de febrero de 2011
  • 48. La  industrialización  en  la  web ! ! <div class="structure_inside_2"> ! ! ! ! ! <?php /* Columna IZQ */ ?> ! ! ! <div class="structure_column_left"> ! ! ! ! ! ! ! <?php /* Columna 100% */ ?> ESTRUCTURAS ! ! ! ! <div class="structure_inside_1 structure_no_padding"> ! ! ! ! ! ! ! ! ! <?php foreach ($modulos[1] as $modulo) : echo $modulo[html]; endforeach; ?> REJILLAS ! ! ! ! ! ! ! ! ! </div> LAYOUTS ! ! ! ! ! ! ! ! <?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"> ! ! ! ! 1.php ! ! ! ! ! <?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>martes 8 de febrero de 2011
  • 49. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  INTERFAZ Editor  de  Layouts  (EDL) ESTRUCTURAS  /  REJILLAS  /  LAYOUTSmartes 8 de febrero de 2011
  • 50. 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/ Resultado  final  exactamente  igual como  el  cliente  lo  ha  maquetado. -­‐  Independencia -­‐  Simple -­‐  Potente -­‐  Nuevomartes 8 de febrero de 2011
  • 51. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos -­‐  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  /  idiomasmartes 8 de febrero de 2011
  • 52. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  PRODUCTOS  TIENDA  ONLINE MODELO  CLÁSICO PRODUCTO/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.martes 8 de febrero de 2011
  • 53. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  PRODUCTOS  TIENDA  ONLINE ABSTRACCIÓN  BD PRODUCTO/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.martes 8 de febrero de 2011
  • 54. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  PRODUCTOS  TIENDA  ONLINEmartes 8 de febrero de 2011
  • 55. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  SISTEMA  DE  FICHEROS  /  IMÁGENES 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  /bigmartes 8 de febrero de 2011
  • 56. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  SISTEMA  DE  FICHEROS  /  IMÁGENES ABSTRACCIÓN  BD DE  FICHEROS  E  IMÁGENES  EXTERNASmartes 8 de febrero de 2011
  • 57. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  LOCALIZACIÓN  /  IDIOMAS -­‐  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.martes 8 de febrero de 2011
  • 58. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  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.martes 8 de febrero de 2011
  • 59. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  LOCALIZACIÓN  /  IDIOMAS ABSTRACCIÓN  BD LOCALIZACIÓ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.martes 8 de febrero de 2011
  • 60. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  BASE  DE  DATOS Abstracción  del  modelo  de  Base  de  Datos BD  LOCALIZACIÓN  /  IDIOMASmartes 8 de febrero de 2011
  • 61. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  PROCESOS PROCESOS  INPUT  /  OUPUT -­‐  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...martes 8 de febrero de 2011
  • 62. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  PROCESOS PROCESOS  INPUT  /  OUPUTmartes 8 de febrero de 2011
  • 63. La  industrialización  en  la  web Avances  tecnológicos  /  Ideas  .  PROCESOS APIS  en  la  nubemartes 8 de febrero de 2011
  • 64. La  industrialización  en  la  web CASO  DE  ÉXITO: ELCHE  CFmartes 8 de febrero de 2011
  • 65. La  industrialización  en  la  web CASO DE  ÉXITO: ELCHE  CF CMSmartes 8 de febrero de 2011
  • 66. La  industrialización  en  la  web Avances  tecnológicos  /  Conclusión SOLUCIÓN  DE  PROBLEMAS Al  final  ser  ingeniero  supone  solucionar  problemas y  a  poder  ser  no  volver  a  pensar  en  ellos  nunca  más... sino  esto  no  es  diver?do  sino  repe??vo  ;-­‐)martes 8 de febrero de 2011
  • 67. La  industrialización  en  la  web @mention!!! Gracias a todo el equipo de nitsnets | studios en especial: Josh Pina (@joshnts) Elisabet Padilla (@elisabetpadilla) Pere Monerris (@websmonerris)martes 8 de febrero de 2011
  • 68. La  industrialización  en  la  web <?php echo “MUCHAS GRACIAS!”; ?> Elad Rodríguez y todo el equipo de nitsnets | studios twitter: @eladnts blog: www.lostiemposcambian.com work: www.nitsnets.com email: elad@nitsnets.commartes 8 de febrero de 2011

×