Industrialización Web: Especialización y Procesos Estándar

La
industrialización
en
la
web
Elad Rodriguez
nitsnets | studios

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


La
industrialización
en
la
web

¿Qué
signiﬁca
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
deﬁniPva
aumentando
capital

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


La
industrialización
en
la
web

máquinas personas
Avances
tecnológicos ESPECIALIZACIÓN


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.


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
ﬁnito?
Probablemente
no.
La
inﬁnidad
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.


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áﬁcamente,
maquetación
CSS,
usabilidad,

accesibilidad,
animación...


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?


La
industrialización
en
la
web

por
tanto...

¡Estamos
listos!


La
industrialización
en
la
web

Personal
de
desarrollo
ESPECIALIZACIÓN


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/reﬂexion-‐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...

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.


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.


La
industrialización
en
la
web

Avances
tecnológicos

TECNOLOGÍA
-‐
No
es
determinante
la
elección
de
esta
tecnología
para
conseguir
un
ﬁn.

-‐
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.


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
deﬁnida.
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!!!


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áﬁca
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
beneﬁcios


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
ﬁnal
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
DESARROLLAR


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 PureMVC


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

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.


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íﬁca.
É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

....


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/


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


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/


La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
Metalenguajes

-‐
Es
interesante
el
concepto
de
metalenguajes;
es
decir
hacer
una
especiﬁcació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.


La
industrialización
en
la
web

http://www.adobe.com/devnet-archive/ﬂex/tourdeﬂex/web/#illustIndex=0;sampleId=70030;docIndex=0


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...


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]

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-‐web


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.


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
deﬁnir
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";


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.

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." />


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/cms


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.


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áﬁca,
de
la
vista
:-‐S


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.


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/


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).


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]


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
ﬁchero
además
de
mostrarla
por
pantalla.
eb1ac5963a63ca0729f55bcce3a29d60

-‐
El
Pempo
de
generación
lo
procesa
el
primer

usuario
que
ve
dicha
imagen.

La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
.
INTERFAZ
Tratamiento
de
imágenes.
SOLUCIONES


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/


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
CSS


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


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' }
})
}); }});}}


La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
.
INTERFAZ
Editor
de
Layouts
(EDL)
VISTA
DE
CADA
MÓDULO


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">
! ! ! !
! ! ! !
! ! ! ! </div>
! ! ! !
! ! ! ! <?php /* Columna 308px */ ?>
! ! ! ! <div class="structure_column_right">
! ! ! !

1.php
! ! ! !
! ! ! ! </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>

La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
.
INTERFAZ
Editor
de
Layouts
(EDL)

ESTRUCTURAS
/
REJILLAS
/
LAYOUTS


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
ﬁnal
exactamente
igual
como
el
cliente
lo
ha
maquetado.

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


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
ﬂexibles
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
ﬁcheros
/
imágenes

-‐
Localización
/
idiomas

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

modiﬁcar
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.


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.


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


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
ﬁchero

pertenece
cada
campo

con
un
PATH
así
como
en
que
directorio
se
encuentra.

Se
crea
una
tabla
o
campo
por
cada
ﬁchero
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


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
EXTERNAS


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.


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.


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.


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


La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
.
PROCESOS
PROCESOS
INPUT
/
OUPUT
-‐
En
deﬁniPva
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
deﬁnidas,
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...

La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
.
PROCESOS
PROCESOS
INPUT
/
OUPUT


La
industrialización
en
la
web

Avances
tecnológicos
/
Ideas
.
PROCESOS
APIS
en
la
nube


La
industrialización
en
la
web

CASO
DE
ÉXITO:
ELCHE
CF


La
industrialización
en
la
web

CASO
DE
ÉXITO:
ELCHE
CF
CMS


La
industrialización
en
la
web

Avances
tecnológicos
/
Conclusión
SOLUCIÓN
DE
PROBLEMAS

Al
ﬁnal
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
;-‐)


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)


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.com


Industrialización Web: Especialización y Procesos Estándar

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Similar a Industrialización Web: Especialización y Procesos Estándar

Similar a Industrialización Web: Especialización y Procesos Estándar (20)

Más de ADWE Team

Más de ADWE Team (20)

Último

Último (20)

Industrialización Web: Especialización y Procesos Estándar