El documento describe el proceso de industrialización de la fabricación de sitios web. Explica que la industrialización requiere avances tecnológicos y especialización del personal, similar a la revolución industrial. También señala algunos desafíos actuales como la falta de consenso en la tecnología y procesos estandarizados, pero que el uso de frameworks, herramientas y especialización del personal pueden ayudar a avanzar hacia un modelo más industrializado.
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
éxito
martes 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ÓN
martes 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
10. La
industrialización
en
la
web
Personal
de
desarrollo
ESPECIALIZACIÓN
martes 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
beneficios
martes 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
DESARROLLAR
martes 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 PureMVC
martes 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
bugs
martes 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/output
martes 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=0
martes 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-‐web
martes 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/cms
martes 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
:-‐S
martes 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.
SOLUCIONES
martes 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
CSS
martes 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/cms
martes 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ÓDULO
martes 8 de febrero de 2011
49. La
industrialización
en
la
web
Avances
tecnológicos
/
Ideas
.
INTERFAZ
Editor
de
Layouts
(EDL)
ESTRUCTURAS
/
REJILLAS
/
LAYOUTS
martes 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
-‐
Nuevo
martes 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
/
idiomas
martes 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
ONLINE
martes 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
/big
martes 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
EXTERNAS
martes 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
/
IDIOMAS
martes 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
/
OUPUT
martes 8 de febrero de 2011
63. La
industrialización
en
la
web
Avances
tecnológicos
/
Ideas
.
PROCESOS
APIS
en
la
nube
martes 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.com
martes 8 de febrero de 2011