Libro - Universo Web

Universo Web
Autor: Jael Lena

Universo Web
ÍNDICE
1. INTRODUCCIÓN.................................................................................................................... 4
2. VAMOS POR PARTES…......................................................................................................... 4
2.1 ALGUNOS CONCEPTOS A DESARROLLAR...................................................... 5
2.1.1 Web server versus web browser........................................................................ 5
2.1.2 HTTP, URL y otros conceptos básicos.............................................................. 6
2.1.3 Landing versus web............................................................................................... 8
2.1.4 ¿Qué es una cookie?............................................................................................. 9
3. LOS DATOS Y LA REGULACIÓN QUE SE VIENE.......................................................... 10
4. LOS COCINEROS DE LA WEB: FRONT-END Y BACK-END...................................... 12
4.1 FRONT-END............................................................................................................ 13
4.2 BACK-END............................................................................................................... 14
4.3 ¿PARA QUÉ SIRVE UN STACK TECNOLÓGICO?........................................... 15
4.4 LENGUAJES DE PROGRAMACIÓN WEB........................................................ 15
4.4.1 Del lado del cliente o browser.................................................................... 16
4.4.2 Del lado del servidor..................................................................................... 22
4.5 ¿QUÉ ES LA PROGRAMACIÓN ORIENTADA A OBJETOS?.................. 24
5. ETAPAS DE UN PROYECTO WEB.................................................................................... 24
5.1 DEFINICIÓN DEL PROYECTO............................................................................ 26
5.2 ARQUITECTURA DE LA INFORMACIÓN (IA)................................................. 28
2
5.2.1 Delimitación de la Arquitectura de la Información................................ 28
5.2.2 Template Hierarchy....................................................................................... 33
5.3 DELIMITACIÓN DE LINK-BULDING Y SITEMAP (XML PARA SEO).......... 34
5.4 PROTOTIPADO DE WEB (WIREFRAMES) – UI, USER INTERFACE.......... 35
5.4.1 Grillas de diseño............................................................................................ 35
5.4.2 Anatomía de un sitio web............................................................................ 36
5.5 ELECCIÓN DEL TIPO DE PROGRAMACIÓN: FRONT Y BACK. ENLATADO
O DESARROLLO PROPIO........................................................................................... 40
5.5.1 El mundo de los CMS................................................................................... 41
5.6 MAQUETACIÓN Y DISEÑO................................................................................. 45
5.7 INTERACTION DESIGN........................................................................................ 46
5.8 DESARROLLO FRONT-END................................................................................ 47
5.9 DESARROLLO BACK-END Y BASE DE DATOS.............................................. 47
5.10 OPTIMIZACIÓN PARA SEO PRE-PUBLICACIÓN Y W3C.......................... 48
5.11 CROSS BROWSER TESTING............................................................................. 49
5.12 UX TESTING.......................................................................................................... 49
5.13 PUBLICACIÓN: ¡ESTÁ VIVA!............................................................................. 50
5.14 OPTIMIZACIÓN PARA SEO POST-PUBLICACIÓN..................................... 50
5.15 TESTING Y NAVEGACIÓN................................................................................. 50
5.16 OPTIMIZACIÓN Y ANÁLISIS............................................................................. 50
5.17 CONCLUSIÓN....................................................................................................... 51
BIBLIOGRAFÍA........................................................................................................................... 52
3
1. INTRODUCCIÓN
Todos los conceptos que se abordarán en el presente capítulo pueden resultar muy técnicos e,
incluso, complejos. Esto se debe a que las nociones asociadas al universo web constituyen la base
de todos los desarrollos que deberá de realizar quien se desempeña en el mundo del Marketing
digital. Además, se presenta la dificultad de tener que lidiar con profesionales de la programación
y diseñadores web, quienes poseen su propia jerga.
Muchas de las decisiones que se deberán de tomar a nivel estratégico dependen también del
conocimiento que se posea sobre el tema. Así como se puede elegir al equipo correcto para que
decida por uno, es vital entender cómo funciona el corazón para ejecutar cualquier cirugía, sea
esta de pequeña o gran envergadura.
Los directores de marketing que poseen un amplio anclaje en el universo digital se ven forzados a
comprender los cimientos del mismo y qué hacen sus colaboradores. También se ven obligados a
contratar mejores profesionales y adaptarse a las tendencias de consumo y desarrollo.
2. VAMOS POR PARTES….
Todas las acciones de marketing digital tienen un inicio, un lugar de aterrizaje y un final. Es casi
como una historia: principio, nudo y desenlace. El principio está vinculado a la estrategia, de la
cual se desprenden los objetivos. El nudo engloba la realización de las campañas, la diagramación
táctico-operativa que permite cumplir con las metas propuestas y, asociado a ello, la medición
de los resultados. Por último, el desenlace simboliza el análisis de las acciones emprendidas y la
revisión de lo logrado: si la compañía ganó o perdió dinero y cuánto.
Teniendo en mente una parte de la capa estratégica y todo lo relacionado a los modelos de nego-
cios digitales, podrá desarrollarse su punto más importante: el universo web. Sin embargo, antes
de emprender el camino que conducirá a su abordaje, se definirá una serie de conceptos que
facilitarán la comprensión de las etapas por venir:
·· Los usuarios que ingresan a un sitio web o landing representan el tráfico, el

cual puede puede ser orgánico (organic) o pago (paid):
Concepto
El tráfico web es la cantidad de datos enviados y recibidos por quienes
ingresan a un sitio. Esto se determina por el número de visitantes y la
cantidad de páginas que visitan.
·· Tráfico orgánico: proviene de las búsquedas a través de, valga la

redundancia, motores de búsqueda (SEO) y por indexación, recomen-
dación y visitas frecuentes
·· Tráfico pago: viene por campañas
4
·· Los lugares desde donde provienen dichos usuarios antes de entrar a la pági-
na en cuestión se denominan fuentes de tráfico (traffic sources)
·· Cuando un sujeto ingresa a un sitio, se dice que aterriza, de allí se deriva el

concepto de landing
·· Al llegar y navegar la página, la persona acepta implícitamente las políticas del

navegador (browser), entre ellas, aquellas referidas a las cookies
·· Toda interacción de un usuario sobre la web puede ser almacenada para su

posterior análisis
·· La información de un usuario puede ser obtenida gracias a cookies, UTMs,

funciones GET del URL, funciones POST de formularios y acciones sociales
(estos temas serán desarrollados más adelante)
·· En el universo web, se identifican dos “caras” en el manejo de la información:

una, del servidor y otra, del cliente
2.1 ALGUNOS CONCEPTOS A DESARROLLAR
2.1.1 Web server versus web browser
Ingresar a una web es como hacer que dos partes se hablen entre sí. Una de ellas almacena los
datos para cuando la otra se los solicite: la primera es el servidor y la segunda, el navegador.
El web server guarda la información en un lenguaje que al usuario le resultaría de difícil compren-
sión. Para que este pueda recibirla de modo ameno, el navegador (web browser) debe de interpre-
tar el código con el cual ha sido almacenada, decodificarlo y presentárselo de modo entendible al
cliente, es decir, al usuario. Como puede apreciarse, aquí se perciben los dos lados de los servicios
online.
Un web server, entonces, es un programa que utiliza el protocolo HTTP (Hypertext Transfer Pro-
tocol) para servirles los archivos que forman las páginas web a los usuarios, en respuesta a sus
solicitudes, que son reenviados por los clientes HTTP desde sus computadoras. El más popular
es Apache server.
Figura Nº 1: Imagotipo de Apache server
Fuente: Sysadmit (2014). Apache [Figura].

5
Por su parte, un web browser (comúnmente, conocido como navegador) es una aplicación de
software cuya función es recuperar, presentar y recorrer los recursos de información en la World
Wide Web, reconocidos por un Identificador de Recursos Uniforme (URI/URL), que puede ser una
página web, una imagen, un video u otra pieza de contenido.
Figura Nº 2: Web browsers más populares
Fuente: CareCo (2015). Which Web Browser Should I Be Using [Figura].
2.1.2 HTTP, URL y otros conceptos básicos
Al explicar las dos partes de la web, se trajo a colación dos términos nuevos a desarrollar: HTTP Y
URL. A su vez, asociados a ellos, surgen otros conceptos que permitirán entender cómo funcionan
algunos puntos básicos del mundo web que todo marketero debe de entender.
En la Historia del Marketing Digital, se definió a la World Wide Web, o comúnmente denominada
web, como un conjunto de documentos hipertextuales (hipervinculados) que puede verse en un
navegador (web browser) y emplea la lógica de almacenamiento cliente-servidor (explicada en el
apartado anterior). En otras palabras, se aloja en un servidor y el cliente “llama” a esa información.
El servidor la “ve” de una manera y el usuario, de otra más amigable, gracias al browser o navegador.
El texto hipertextual que necesita ser codificado y decodificado se denomina HTML (HyperText
Markup Language). Se trata del lenguaje con que el navegador muestra el contenido de un sitio. Es
decir, está del lado del navegador, del lado del cliente.
Ahora bien, esta información tiene que ser transferida desde el servidor al navegador y, para ello,
existe un protocolo llamado HTTP (Hypertext Transfer Protocol), que constituye el modo en que
el contenido es transferido.
Existen cientos, miles, millones de webs publicadas en Internet, cada una con un código único,
una dirección con la que puede ser encontrada, por ejemplo, 50.30.37.146, la cual se denomina
web site address. Dado que no es fácil de recordar para quien desea ingresar a una web, se creó
el sistema de dominios o DNS (Domain Name System). Este último es capaz de saber cuál es el
número de cada dirección y asignarle una etiqueta, el dominio, que es el que utilizan los usuarios
y se registra en el DNS. Cabe destacar que en 2015 había 294 millones registrados.
6
Notas
Los dispositivos, al igual que las webs, también tienen una dirección IP.
Un aspecto más a tener en cuenta: cuando un server le envía información al navegador, lo hace
a través de Internet. En este punto, importante que los conceptos Internet y World Wide Web no
se confundan. Internet es el medio a través del cual se transfieren los datos, ya sea en formato de
video, audio o texto, o por medio de Skype, WhatsApp o cualquier otro servicio. La WWW o Web
es uno de ellos y cuenta con muchos servidores webs que les transmiten información a los navega-
dores con un protocolo de envío (HTTP) hacia una dirección (website address) y la “presentan” en
una web.
Link
Para una explicación más sencilla sobre cómo funciona la WWW, pue-
de consultarse el video What is the world wide web? - Twila Camp,
disponible en el siguiente enlace: https://www.youtube.com/watch?-
v=J8hzJxb0rpc
En ciertas ocasiones, las direcciones HTTP requieren mayor seguridad de lo normal, dado que se
trata de páginas que manejan información sensible. Para ello, se implementa sobre esta ruta una
capa conocida como certificado SSL: pequeños archivos de datos que les enlazan digitalmente una
clave criptográfica a los detalles de una organización. Cuando se instala en un servidor web, activa
el candado y el protocolo HTTPS, y permite realizar conexiones seguras de un servidor web a un
navegador. Por lo general, se utiliza para proteger las transacciones con tarjetas de crédito, la trans-
ferencia de datos y los inicios de sesión. Recientemente, se ha convirtiendo en la norma cuando se
resguarda la navegación de los sitios de redes sociales.
Notas
En 2014, Google anunció que los algoritmos de posicionamiento en
motores de búsqueda empezarán a “premiar” a aquellos sitios que
contaran con un certificado SSL. Para conocer más sobre esta medida,
puede consultarse el artículo HTTPS as a ranking signal, publicado en
el Google Webmaster Central Blog y disponible en el siguiente enlace:
https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html.
Cabe destacar que la web tiene que alojarse en algún lado. Dicho lugar es el hosting, un servicio
de almacenamiento brindado físicamente por un servidor, que es la computadora donde se alojan
distintos hostings o servicios. En este sentido, un data center constituye un conjunto de servers. El
contenido que se encuentra en estos últimos es susceptible de sufrir daños, con lo cual también
se ve afectada toda la información albergada en él. Para que ella no sea tan vulnerable, se creó el
concepto de redundancia, que hace referencia a los datos replicados en distintos servidores, que
deben de ser utilizados en caso de una caída del sistema.
7
Figura Nº 3: Síntesis de los conceptos abordados
Realizando un breve repaso de lo desarrollado hasta el momento, se recuerda que Internet es el

universo donde las computadoras se conectan entre sí y el medio que permite que muchos servi-
cios funcionen. Dentro de ellos, uno de los más usados es la WWW o Web, cuyo funcionamiento
requiere de dos partes: el lado del servidor y el lado del cliente.
Cuando un usuario desea acceder a un sitio web, lo hace a través de un navegador ingresando
una dirección, un dominio, en el URL. Cuando esto ocurre, la información almacenada del lado
del servidor en código viaja a través de Internet hacia el navegador. Posteriormente, este último
tiene el desafío de transformar esa data en algo que el sujeto pueda interpretar, como pueden
ser imágenes, videos o textos. Para ello, crea una interfaz gráfica amigable para el usuario (GUI –
Graphical User Interface).
Por otra parte, la URL (Universal Resource Locators) o Localizador Universal de Recursos es la di-
rección que identifica los distintos sitios web. Por lo general, está compuesta por dos partes,
separadas por dos puntos seguidos de una doble barra (://).
2.1.3 Landing versus web
Un expositor de un congreso realizado en Uruguay dijo en una oportunidad que “la diferencia
entre una landing y una web es que una es una selva con miles de variantes de árboles y lianas, y
la otra es el patio de tu casa”.
Una web es un sitio corporativo donde se presentan el producto o servicio, la empresa y todos los
detalles institucionales que se desee. Su objetivo principal es ofrecer una vidriera virtual donde
los potenciales compradores, que llegan allí gracias a motores de búsqueda, pasean y miran de
qué se trata el negocio. El hecho de que encuentren una página antes que otras se relaciona con
el lugar que ocupa el sitio ante un resultado de búsqueda. Esto se llama SEO y es uno de los tra-
bajos más importantes a realizar en la web.
8
La diferencia sustancial con las landings es que estas se caracterizan por no tener puntos de fuga.
En otras palabras, están diseñadas para que el usuario aterrice en ellas y sólo pueda realizar la
acción para la que está pensada esa landing page o irse. Es preciso mencionar que no se indexan
en Google, por lo que sólo se llega a ellas a través de campañas.
Figura Nº 4: Puntos de fuga
Puntos
de fuga
Fuente: elaboración propia.
2.1.4 ¿Qué es una cookie?
Una cookie HTTP (también llamada cookie web, cookie de Internet, cookie de navegador o simple-
mente cookie) es una pequeña pieza de datos enviada desde un sitio web y almacenada en el
ordenador del usuario mientras navega. Estas fueron diseñadas para ser un mecanismo confia-
ble por el que las páginas recordarán información, actividades de navegación y otros datos del
sujeto tales como: qué introdujo previamente en campos de formularios, por ejemplo, nombres,
direcciones, contraseñas y números de tarjetas de crédito.
Video
El siguiente video de adversitement.com explica qué es y cómo funcio-
na una cookie: https://www.youtube.com/watch?v=hLKTMY19GBE
Entender cómo funcionan las cookies es clave, ya que muchas de las acciones que se desean
medir se realizarán por medio ellas. Además, resulta de gran importancia establecer en un sitio
web una política de cookies.
Dado que, tal como refleja el audiovisual, las interacciones de navegadores y la múltiple cone-
xión de información entre sitios puede perfilar a una persona, la Unión Europea, en su actualiza-
ción del Reglamento de Protección de Personas Físicas y datos personales, trata a las cookies como
un identificador permitido siempre y cuando cumplan con determinados requisitos. Los datos
y almacenamiento de datos de usuario no son ilegal bajo estas normas, aunque la legislación
vigente es bastante pobre.
9
Link
Ingresar a
h t t p : //e u r - l e x . e u r o p a . e u / l e g a l - c o n t e n t / E N / T X T/ ? q i -
d=1462439808430&uri=CELEX:32016R0679 para consultar el Regla-
mento (UE) 2016/679 del Parlamento Europeo y del Consejo, de 27 de abril
de 2016, relativo a la protección de las personas físicas en lo que respecta al
tratamiento de datos personales y la libre circulación de estos datos y por el
que se deroga la Directiva 95/46/CE (Reglamento General de Protección de
Datos) (Texto pertinente a efectos del EEE).
Es importante que no perder de vista el desarrollo del modelo de cookies aclarándole al usuario
que al ingresar al sitio acepta la política de cookies y lo que se obtiene de data.
Link
Para saber un poco más sobre cookies, puede ingresarse a http://coo-
kiepedia.co.uk/all-about-cookies. También es interesante el artículo
The EU General Data Protection Regulation (GDPR), Cookie Consent
and Customer Centric Privacy, disponible en el siguiente enlace:
https://www.cookielaw.org/blog/2016/5/13/the-gdpr,-cookie-con-
sent-and-customer-centric-privacy/.
3. LOS DATOS Y LA REGULACIÓN QUE SE VIENE
Es muy importante interiorizar estos conceptos y el modo en que se trabaja la data, puesto que
sobre estos aspectos están fundándose las normas y leyes que en el futuro cercano determinarán
el tratamiento de los datos personales.
En la actualidad, es incipiente cómo se trabaja con la información relativa a los usuarios. En este
sentido, la regulación ha ido muy lento detrás de la vorágine de cambios que han tenido lugar en
Internet y los tech business. La data personal virtual ha empezado a generar debates y llama cada
vez más la atención de los juristas, dado que se presenta como un desafío a enfrentar.
En este contexto, en agosto de 2016 WhatsApp dio el primer puntapié hacia un universo de data
cross-device y cross-app, que comienza a generar perfilados muy complejos. En esta decisión, con-
tradijo la primera política de privacidad que utilizó al hacer merge los datos de Facebook y WA,
con lo cual se violó el consentimiento de millones de usuarios (McLaughlin & Bodoni, 2016). El
caso es interesante de analizar. Facebook, por su parte, ha enfrentado otras rondas judiciales, ta-
les como las de data biométrica (Reuters, 2016). Sin embargo, el antecedente más importante es
el fallo judicial de la Unión Europea a través del cual se invalidó el tratado US-EU Safe Harbor de
almacenamiento de datos de personas de la EU en servidores de Estados Unidos. De este modo,
se empiezan a marcar algunos límites físicos sobre una batalla que tendrá mucha historia.
10
Link
A continuación se presenta una serie de artículos de interés que con-
templan los casos mencionados anteriormente y otros de gran relevan-
cia referidos a la problemática en cuestión:
- Facebook’s WhatsApp Privacy Changes Raise EU, U.S. Concerns:
https://www.bloomberg.com/news/articles/2016-08-29/whatsa-
pp-privacy-changes-raise-eu-concern-over-user-data-control
Figura Nº 5: Titular del artículo referido al caso de Whatsapp
Fuente: registro propio, extraído de McLaughlin y Bodoni (2016).
·· Facebook on back-foot in data storage lawsuit: http://www.

newshub.co.nz/home/world/2016/05/facebook-on-back-foot-
in-data-storage-lawsuit.html
·· Storing European User Data on USA Servers? Better read this…:

https://www.wordfence.com/blog/2015/10/european-da-
ta-on-usa-servers-safe-harbor/
·· JUDGMENT OF THE COURT (Grand Chamber) 6 October

2015: http://curia.europa.eu/juris/document/document.jsf?tex-
t=&docid=169195&pageIndex=0&doclang=EN&mode=req&-
dir=&occ=first&part=1&cid=125031
·· The implications for storage of EU data protection regula-

tion: http://www.computerweekly.com/feature/The-implica-
tions-for-storage-of-EU-data-protection-regulation
·· European Facebook Privacy Lawsuit Heads To Court In Vienna:

https://techcrunch.com/2015/04/09/european-facebook-pri-
vacy-lawsuit-heads-to-court-in-vienna/
En el ámbito del marketing, uno de los primeros aspectos que se aprende es cómo analizar el PEST
environment. En el universo techie, esta clase de situaciones macro deberían de simbolizar un indicador
de luz roja que invite a prestar mucha atención.
Otro antecedente sobre las pequeñas líneas y situaciones contextuales de las barreras invisibles que
imponen los países en temas relacionados con “la nube” fue el caso de Google y su acusación de eva-
sión de impuestos. El hecho no sólo es interesante por cómo fue evolucionando y sus características,
sino que además el debate y el rol que desempeñó Matt Brittin (presidente de EMEA Business & Opera-
tions for Google) constituyen un importante tema de análisis.
11
Link
Para ampliar la información referida a la acusación que recibió la multi-
nacional, puede consultarse el artículo Google denies misleading Parlia-
ment in grilling over tax, publicado en el siguiente enlace: http://www.
telegraph.co.uk/finance/personalfinance/tax/10061746/Google-de-
nies-misleading-Parliament-in-grilling-over-tax.html
4. LOS COCINEROS DE LA WEB: FRONT-END Y BACK-END
Contando con una pequeña aproximación de lo que es una web, es momento ahora de adentrarse en
los lenguajes de programación más comunes y las opciones que poseen los websites chefs para armar
un sitio.
Existen dos clases principales de chefs, quienes son responsables de los cientos de trabajos de de-
sarrollo web que se encuentran en el mercado. Esto se debe a que el universo online se encuentra
dividido en las dos mitades mencionadas anteriormente: el lado del servidor y el lado del browser.
Justamente, la diferencia también se produce en cuanto al desarrollo de la web, donde se identifican
dos caras: el back-end y el front-end. Cada una de ellas cuenta con perfiles de desarrollo distintos,
por lo que son dos cocineros diferentes, con especializaciones particulares y un dominio de un set de
lenguajes muy específicos.
Es posible encontrar actualmente profesionales, conocidos como ninjas, que manejan ambos lados de
la programación y el diseño. En general, ellos no son bien vistos porque quien hace todo, finalmente,
no acaba teniendo un conocimiento profundo en algo puntual. Sin embargo, es preciso señalar que
los desarrolladores web para pymes son mejor vistos, dado que cuentan con los saberes para poder
brindarle un servicio a un cliente sin la necesidad de tener expertise en un lenguaje en particular.
En una definición demasiado simplista, el back-end developer conoce y adora el código. El front-end
developer, por su parte, es un diseñador que busca mejorar la experiencia de usuario.
Figura Nº 6: Back-end y front-end
Back-end Front-end
12
4.1 FRONT-END
Los cocineros del front-end son diseñadores que manejan lenguajes web del lado del browser,
es decir, referidos a lo que ve el cliente y hace atractivo al contenido del sitio. Ellos trabajan con
lo que está de cara al cliente final, sin importar cómo se carga la información o en qué lenguaje
está programado.
Aquí se emplean lenguajes como HTML5, CSS3, Javascript, jQuery y XML, entre otros. Todos
ellos son códigos puros que pueden asemejarse al proceso de armar un pastel de cumpleaños
desde la base haciendo todo en casa. Muchos diseñadores web utilizan los llamados frameworks
de desarrollo, que son enlatados de códigos que facilitan el armado de un sitio. Siguiendo con
la analogía anterior, ellos simbolizarían la compra del pionono hecho y los demás ingredientes
necesarios, gracias a lo cual resultaría menos complejo armar la torta. Obviamente, su empleo
no es tan sencillo como parece, pero sí ofrece una solución muy práctica.
Figura Nº 7: Front-end developer

Algunos de los frameworks más populares del lado del front-end son:
- Para CSS: bootstrap, Blueprint y Cascade Framework.
Figura Nº 8: Frameworks del front-end para CSS
- Para JavaScript: Angular, React, Backbone y Ember, entre otros.
13
Figura Nº 9: Frameworks del front-end para JavaScript
Link
Si se desea conocer más sobre los frameworks del front-end para JavaS-
cript, se sugiere el artículo Top JavaScript Frameworks, Libraries and Tools
and When to Use Them. El texto se encuentra disponible en el siguiente
enlace: https://www.sitepoint.com/top-javascript-frameworks-libra-
ries-tools-use/
4.2 BACK-END
El back-end developer se encuentra a cargo de toda la parte del código más cercana al desarrollo
desde el Web server y tecnologías como PHP, .NET (antes ASP), Java, Pearl, Python y Ruby. Ellos
desarrollan la programación de los sitios, hacen que funcione, en definitiva, son el motor de la
máquina. Para programar los lenguajes, son normalmente excluyentes, dado que algo que está
en PHP no habla directo con algo que está en .NET. Por tal motivo, en numerosas ocasiones los
chefs necesitan crear traductores o conectores entre lenguajes. A fin de evitar complicaciones,
lo más recomendable es optar por un lenguaje de programación y quedarse con él.
Figura Nº 10: Back-end developer
Back-end
Developer
PHP
.NET (antes ASP)
Java
PERL
Python
Ruby
Fuente: elaboración propia
14
Al igual que en el caso del front-end, existen frameworks de desarrollo para los lenguajes de
programación. Lo más conocidos son los de PHP, tales como Laravel, Cake PHP, ZEND, Sym-
fony, CodeIgniter y Yii, entre otros.
Figura Nº 11: Frameworks de back-end
Fuente: elaboración propia
Link
Para más información sobre frameworks de PHP, se recomienda la lec-
tura del artículo 10 PHP Frameworks For Developers – Best of, que
puede encontrarse ingresando a: http://www.hongkiat.com/blog/
best-php-frameworks/.
4.3 ¿PARA QUÉ SIRVE UN STACK TECNOLÓGICO?
Un stack tecnológico es un conjunto o pila de tecnologías cuya función es desarrollar proyectos

que, normalmente, trabajan de forma conjunta para resolver una determinada problemática. Este
suele estar conformado por lenguajes y/o frameworks que actúan en diferentes capas de la apli-
cación:
·· Front-end
·· Back-end
·· Base de datos
·· Sistema operativo
Cabe destacar que las primeras dos capas fueron analizadas recientemente y que las nociones re-
feridas al sistema operativo no serán tenidas en cuenta. Sobre la base de datos, por el momento,
sólo es necesario saber que constituyen el lugar donde se almacena la información y se vincula
para mostrar datos, valga la redundancia, y las relaciones existentes entre ellos.
4.4 LENGUAJES DE PROGRAMACIÓN WEB
Anteriormente, se ofreció una aproximación al funcionamiento web y sus lenguajes de programa-

ción, desarrollo y diseño. Ahora es momento de emprender una definición corta de varios térmi-
nos de relevancia para la problemática que se aborda en el presente módulo.
15
4.4.1 Del lado del cliente o browser
a. HTML
HTML es el idioma utilizado para crear páginas web. Se trata del lenguaje de marcado de hiper-
texto:
·· Hipertexto: se refiere a los hipervínculos que una página HTML puede contener.
·· Lenguaje de marcado: se trata del modo en que se usan las etiquetas para de-
finir el diseño de la página y los elementos dentro de ella.
A continuación, se muestra un ejemplo de HTML utilizado para definir una página web básica con
un título y un solo párrafo de texto.
Figura Nº 12: HTML
<!doctype html>
<html>
<head>
</head>
<body>
<p>This is an example of a paragraph in HTML.</p>
</body>
</html>
La primera línea define qué tipo de contenido presenta el documento. “<! Doctype html>” sig-
nifica que el sitio está escrito en HTML5. Las páginas HTML correctamente formateadas deben
de contener etiquetas <html>, <head> y <body>, todas ellas incluidas en el ejemplo anterior. El
título, los metadatos y los vínculos a los archivos referenciados se colocan entre las <head>. El
contenido real, entre las <body>.
La web ha pasado por muchos cambios en las últimas décadas, pero HTML siempre ha sido el
lenguaje fundamental utilizado para el desarrollo. Curiosamente, mientras que los sitios se han
vuelto más avanzados e interactivos, HTML ha conseguido mayor simpleza. Si se compara el
origen de una página HTML5 con una similar escrita en HTML 4.01 o XHTML 1.0, la primera,
probablemente, contendría menos código. Esto se debe a que el HTML moderno se basa en hojas
de estilo en cascada o en JavaScript para formatear casi todos los elementos.
b. HTML5
Es un esfuerzo traer orden al caos del desarrollo web mediante la organización de prácticas comu-
nes y abarcando la implementación de varios navegadores. HTML5 es simplemente un término
paraguas para la próxima generación de aplicaciones online y cómo se ampliará la funcionalidad
con mejor marcado (HTML), estilo (CSS) e interactividad (JavaScript).
16
Figura Nº 13: HTML5
Fuente: W3C (s.f.). Un logo de HTML5 [Figura].
Notas
HTML5 es el quinto estándar principal de HTML. El desarrollo del es-
tándar empezó en 2007 y los website del HTML5 comenzaron a con-
vertirse en corriente principal en 2010. El estándar final de HTML5 fue
estandarizado oficialmente por el World Wide Web Consortium (W3C) el
28 de octubre de 2014.
El elemento Canvas forma parte de HTML5 y permite la representación dinámica y scriptable

de formas 2D e imágenes de mapa de bits. Esto significa que se pueden desarrollar animaciones
que no “matan” la performance del navegador. Hoy son opciones de primera línea para sustituir a
Flash en la creación de elementos animados.
Link
Los siguientes ejemplos de animación HTML5 han sido implementados
usando tecnologías HTML5, CSS3 y JavaScript. Es muy interesante lo
que se puede lograr con ellas:
- http://codepen.io/estelle/pen/LyItm
- http://lab.hakim.se/origami/
- http://www.craftymind.com/factory/html5video/CanvasVideo.html
c. CSS
Cascading Style Sheets Specification (CSS) es un lenguaje de computadora que se utiliza para
escribir instrucciones de formato (reglas), las cuales le indican a un navegador cómo debería “bus-
car” el contenido de la página web en términos de: diseño, posición, alineación, anchura, altura,
color, tipografía, ubicación de una imagen, patrón, etcétera.
Figura Nº 14: CSS
Fuente: How to Program Wiki (s.f.). CSS3.png [Figura].
17
En el ejemplo de CSS expuesto en la Figura Nº 15, básicamente, se le indica a un título 1, el más
destacado de todos (heading 1 o h1), que tiene que llevar la fuente Arial, si no la encuentra, la
Verdana; si no, Serif; que el tamaño tiene que ser de 20 pixeles, que debe de emplearse el color
azul y tener un subrayado azul de 2 px. Como puede apreciarse, la regla de CCS supone abrir y
cerrar con dos llaves ({ }).
Figura Nº 15: Ejemplo de CSS
h1 {
font-family: arial, verdana, serif;
font-size: 20px;
color: blue;
}
Este tipo de regla es mandatoria, se pone al principio del documento HTML y, luego, cada vez que
se utilice un título del tipo 1. Otro modo de escribir el CSS es en la misma línea de código que se
usará aclarando las reglas cada vez que se pone un titular.
Figura Nº 16: Otro ejemplo de CSS
<h1 style=”font-family: arial, verdana, serif; font-size: 20px; color: blue;
Esta regla es la más utilizada al momento de enviar Emaling porque le aclara en cada línea, ya sea
párrafo, título, imagen, etcétera, todo lo que tiene que “llamar”.
Link
Si se desea consultar más ejemplos de CSS, se recomienda consultar
el siguiente enlace: https://www.w3schools.com/css/css_examples.asp
18
d. JavaScript
Figura Nº 17: JavaScript
Fuente: Ramos (2015). JavaScript [Figura].
JavaScript es un lenguaje de programación comúnmente utilizado en el desarrollo web. Origi-

nalmente, fue elaborado por Netscape como un medio para agregarles elementos dinámicos e
interactivos a los sitios web.
Se trata de un lenguaje de scripting del lado del cliente, lo cual significa que sus funciones pueden
ejecutarse después de que una página web se haya cargado sin comunicarse con el servidor. Por
ejemplo, una función puede comprobar un formulario antes de enviarlo para asegurarse de que
se han completado todos los campos requeridos. Esto se debe a que el código que se emplea aquí
puede producir un mensaje de error antes de que cualquier información se le transmita realmente
al servidor. Al igual que los lenguajes de script del lado del servidor, como PHP y ASP, el código
JavaScript se puede insertar en cualquier parte del HTML de una página web.
A continuación, se muestra un ejemplo de una función básica de JavaScript que agrega dos nú-
meros, la cual se llama con los parámetros 7 y 11. Si el código de abajo fuera incluido en el HTML
de un sitio, mostraría el texto “18” en un cuadro de alerta.
Figura Nº 18: Ejemplo de una función básica de JavaScript
<script>
{
return a + b;
}
var total = sum(7,11);
alert(total);
</script>
Las funciones JavaScript se pueden llamar dentro de las etiquetas <script> o cuando se producen
eventos específicos.
19
Concepto
Un evento es algo que realiza el usuario desde el lado del navegador
como puede ser cliquear, hacer scroll, pasar por arriba con el mouse,
llenar un formulario, etcétera. Los ejemplos incluyen onClick, onMou-
seDown, onMouseUp, onKeyDown, onKeyUp, onFocus, onBlur y on-
Submit, entre otros.
Mientras que el JavaScript estándar todavía se utiliza para realizar funciones básicas del lado
del cliente, muchos desarrolladores web prefieren actualmente usar bibliotecas JavaScript como
jQuery para agregarles elementos dinámicos más avanzados a los sitios web.
e. jQuery
Figura Nº 19: jQuery
Fuente: Ramos (2012). JQuery [Figura].
JQuery es la biblioteca de JavaScript más utilizada en los últimos años que les permite a los desa-
rrolladores web agregarles una funcionalidad adicional a sus sitios web. Es de código abierto y se
proporciona de forma gratuita bajo la licencia del MIT. Para implementarla, simplemente se debe
de hacer referencia al archivo jQuery JavaScript dentro del HTML de una página.
Algunos sitios web alojan su propia copia local de jQuery, mientras que otros sólo hacen referen-
cia a la biblioteca alojada por Google o el servidor jQuery. Por ejemplo, una página puede cargar
la biblioteca jQuery utilizando la siguiente línea dentro de la sección <head> del HTML:
Figura Nº 20: Ejemplo de jQuery
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Una vez que se carga la biblioteca, el sitio puede llamar a cualquier función jQuery soportada
por esta. Ejemplos comunes incluyen modificar el texto, procesar los datos del formulario, mover
elementos en una página y realizar animaciones. JQuery también puede trabajar con código Ajax
y lenguajes de scripting, como PHP y ASP, para acceder a información desde una base de datos.
Dado que jQuery se ejecuta en el lado del cliente (en lugar del servidor web), puede actualizar
información en una página en tiempo real, sin recargar el sitio. Un ejemplo común es el autocom-
pletado a través del cual un formulario de búsqueda muestra automáticamente las búsquedas co-
munes mientras el usuario escribe su consulta. De hecho, así es como muchos sitios proporcionan
sugerencias cuando se escribe en el cuadro de búsqueda.
20
Además de su licencia gratuita, la otra razón principal por la que ha ganado popularidad es su
compatibilidad entre navegadores. Dado que cada uno de ellos hace que HTML, CSS y JavaScript
sean diferentes, puede resultar difícil para un desarrollador web hacer que un sitio web aparezca
igual en todos ellos. Así, en lugar de tener que escribir funciones personalizadas para cada brow-
ser, se puede utilizar una sola función jQuery que funcione en Chrome, Safari, Firefox e Internet
Explorer. Este soporte multi-navegador ha llevado a muchos desarrolladores a cambiar de JavaS-
cript estándar a jQuery, ya que simplifica enormemente el proceso de codificación.
f. XML
Los soportes para Extensible Markup Language (XML) se utilizan para definir documentos con un
formato estándar que puede ser leído por cualquier aplicación compatible con ellos. El lenguaje
se puede emplear con páginas HTML, pero el propio XML no es un lenguaje de marcado, sino un
metalenguaje que puede emplearse para crear lenguajes de marcado para aplicaciones específi-
cas. Por ejemplo, puede describir los elementos a los que se puede acceder cuando se carga una
página web. Básicamente, le permite crear una base de datos de información sin tener una base
de datos real. Aunque se utiliza comúnmente en aplicaciones online, muchos otros programas
también pueden utilizar documentos XML.
g. ActionScript (Flash)
Figura Nº 21: Flash
Si bien se menciona este lenguaje, el objetivo es explicar por qué no se recomienda utilizarlo en
el desarrollo web. Las páginas que emplean Flash son obsoletas, así como los banners realizados
a partir de este formato, aunque en la actualidad es uno de los pocos masificados para tal fin. Lo
recomendable es intentar no emplearlo, ya que los browser los anulan, ralentizan la carga del sitio
y no son visibles desde la versión mobile.
ActionScript es un lenguaje de programación orientada a objetos (OOP), diseñado específica-

mente para la animación de sitios web. Originalmente, fue publicado con Macromedia Flash 4 y
mejorado para Flash 5.
21
4.4.2 Del lado del servidor
a. PHP
El Pre-procesador de hipertexto o PHP es un lenguaje HTML-incrustado de scripting web. Esto

significa que su código se puede insertar en el HTML de un sitio. Cuando se accede a una página
PHP, el código PHP es leído o “analizado” por el servidor en el que ella reside. La salida de las
funciones de PHP, normalmente, se “devuelven” como código HTML, que puede ser leído por el
navegador.
Debido a que el código PHP se transforma en HTML antes de cargar la página, los usuarios no
pueden verlo. Esto hace que los sitios PHP sean lo suficientemente seguros para acceder a bases
de datos y otra información sensible.
Mucha de la sintaxis de PHP se toma prestada de otros lenguajes como C, Java y Perl. Sin embar-
go, ella tiene una serie de características únicas y funciones específicas.
El objetivo de este lenguaje es permitirles a los desarrolladores web escribir páginas generadas
dinámicamente de forma rápida y sencilla. PHP también es ideal para crear sitios basados en ba-
ses de datos.
Figura Nº 22: PHP
La parte del <!DOCTYPE html>

documento que
dice que es un <html>
HTML y abre
el body
<body>
<?php Hello world!
$x es una variable,
le dice entonces que $x = 100;
la variable es 100
condición: if if ($x !== 90) {
!== significa “es diferente” echo "Hello world!";
echo le dice que “imprima” }
en la pantalla algo, que
lo muestre ?>
Cierra el HTML </body> ¿Qué está diciendo la sentencia PHP?

y el body </html>
Si la variable no es igual a 90,
entonces, imprime en la
pantalla la frase “Hello world!”
b. Java
Java es un lenguaje de programación de alto nivel creado por Sun Microsystems. Originalmente,
fue diseñado para desarrollar programas para decodificadores y dispositivos portátiles, pero más
tarde se convirtió en una opción popular para la creación de aplicaciones web.
Oracle adquirió Sun Microsystems en enero de 2010. Por lo tanto, Java ahora es mantenido y
distribuido por dicha compañía.
22
c. .NET
ASP.NET es un conjunto de herramientas de desarrollo web ofrecidas por Microsoft. Programas

como Visual Studio .NET y Visual Web Developer les permiten a los desarrolladores web crear
sitios dinámicos utilizando una interfaz visual. Por supuesto, los programadores pueden escribir
su propio código y secuencias de comandos, e incorporarlos en ellos.
Para que un sitio ASP.NET funcione correctamente, debe de publicarse en un servidor web que
admita aplicaciones ASP.NET. El servidor de Internet Information Services (IIS), de Microsoft,
es, con mucho, la plataforma más común para páginas de estas características. Si bien existen
algunas opciones de código abierto disponibles para sistemas basados en Linux, estas alter-
nativas a menudo proporcionan menos de soporte completo para esta clase de aplicaciones.
d. Python
Python es un lenguaje de programación de alto nivel diseñado para ser fácil de leer e implemen-
tar. Es de código abierto, lo que significa que su uso es libre, incluso para aplicaciones comercia-
les. Puede ejecutarse en sistemas Mac, Windows y Unix, y ha sido portado a máquinas virtuales
Java y .NET.
Por otra parte, se considera un lenguaje de scripting, como Ruby o Perl, y se utiliza a menudo para
crear aplicaciones online y contenido dinámico en la Web. También es compatible con una serie
de programas de imágenes 2D y 3D, lo que les permite a los usuarios crear plug-ins personaliza-
dos y extensiones.
e. Ruby
Mientras que en el mundo físico “ruby” se refiere a una piedra preciosa roja, en el de las compu-
tadoras, es un lenguaje de programación orientado a objetos, creado por Yukihiro Matsumoto.
Al igual que sucede con Perl, su fuerza radica en su simplicidad. La sintaxis es muy básica y está
completamente orientada a objetos. Esto significa que cada tipo de datos manejados por el len-
guaje se trata como un objeto, incluso aquellos simples y enteros. El código fuente puede ser
descifrado por el intérprete Ruby oficial o por JRuby, basado en Java.
Ruby es un lenguaje de código abierto, como PHP, lo que significa que su descarga y uso son gra-
tuitos. Además, puede ser compilado y ejecutado en prácticamente cualquier sistema operativo,
incluyendo Unix, Windows y Mac OS X.
f. SQL
Structured Query Language es un lenguaje de consulta utilizado para acceder y modificar infor-
mación en una base de datos. Fue creado en 1975 de la mano de IBM y se llamó SEQUEL para
Structured English Query Language.
23
En la actualidad, se utiliza comúnmente para el desarrollo y la gestión de bases de datos web.
Aunque ahora se considera un lenguaje estándar, todavía existe una serie de variaciones de la
misma, como mSQL y mySQL.
Mediante el uso de un lenguaje de secuencias de comandos como PHP, los comandos SQL, entre
los cuales se destacan “insertar”, “actualizar” y “eliminar”, se pueden ejecutar cuando se carga un
sitio. Esto hace posible crear páginas web dinámicas que pueden mostrar información diferente
cada vez que se cargan.
4.5 ¿QUÉ ES LA PROGRAMACIÓN ORIENTADA A OBJETOS?
La programación orientada a objetos (OOP) es un modelo de lenguaje de programación organi-

zado alrededor de objetos, en lugar de “acciones”, y datos, en lugar de lógica. Históricamente, un
programa ha sido visto como un procedimiento lógico que toma datos de entrada, los procesa y
produce datos de salida.
El desafío de la programación fue visto como la forma de escribir la lógica, no de cómo definir
los datos. Cuando se encuentra orientada a objetos, se considera que lo que realmente interesa
son los elementos que se desea manipular, no la lógica requerida para manipularlos. Ejemplos
de objetos van desde seres humanos (descritos por nombre, dirección, etcétera) hasta edificios
y pisos (cuyas propiedades pueden ser descritas y administradas), y los pequeños widgets en un
escritorio de computadora (como botones y barras de desplazamiento).
5. ETAPAS DE UN PROYECTO WEB

En los apartados anteriores fueron desarrolladas las bases de la programación, gracias a lo cual
es posible comprender cómo funcionan las dos caras principales de una web. En el ámbito del
marketing, este es un aspecto fundamental, ya que constituye el pilar de todas las acciones que
se llevan a cabo en el universo online, que es el equivalente al punto de venta digital.
Las empresas y campañas más maduras entienden la web como el sitio de aterrizaje indirecto de
otras actividades y, por ende, como el ancla infaltable de cualquier estrategia. Sin embargo, en la
actualidad existen organizaciones que no cuentan con un sitio propio y se basan en su presencia
en social media, market-shares o mega-markets, lo cual es viable, pero no recomendable.
Ahora bien, toda web organizacional comienza con un proyecto de desarrollo que presenta dis-
tintas etapas a considerar:
1º Definición del proyecto

·· Relevamiento del negocio
·· Delimitación de hitos claves: identificación de contenido
2º Arquitectura de la información (IA)

·· Delimitación de la misma
·· Template Hierarchy
·· Validación con el cliente

24
3º Delimitación de Link-Bulding y sitemap (XML para SEO)
4º Prototipado de web (wireframes) - UI

·· Armado de wireframes de todas las páginas del sitio
5º Elección de tipo de programación: front y back. Enlatado o Desarrollo propio
6º Maquetación y diseño
·· Armado de maquetas de todas las páginas del sitio
7º Interaction Design
8º Desarrollo front-end
9º Desarrollo back-end y base de datos
10º Optimización para SEO pre-publicación y W3C
11º Cross Browser testing
12º UX testing
13º Publicación: ¡está viva!
14º Optimización para SEO post-publicación
15º Testing y navegación
16º Optimización
17º Análisis
Todas estas instancias tienen su tiempo estimado de desarrollo y sus entregables, los cuales pue-
den definirse como cada uno de los hitos a ser brindados al cliente en cada una de las etapas del
proyecto, que serán desarrolladas en profundidad a continuación.
25
5.1 DEFINICIÓN DEL PROYECTO
En esta etapa se dimensiona la empresa:
·· El producto o servicio que ofrece
·· Su propuesta de valor
·· Los diferenciales que posee como compañía
·· El mercado al que apunta
·· Sus áreas
·· La trayectoria que la respalda
·· Sus datos
·· Los medios de contacto (vale la pena destacar que deben de ser aquellos que la
empresa usa habitualmente)
Importante
La propuesta de valor de la firma y su mercado meta tienen que estar
siempre presentes en el desarrollo web porque ayudarán a tomar deci-
siones de diseño, programación, estructuración de sitio y UX. Esto se
debe al hecho de que no es lo mismo diseñar para gente de 60 años
que para jóvenes de 16.
Con toda esta información, se podrán delimitar las secciones que tendrá que tener la web. Siem-
pre se encuentran de base las siguientes:
·· Home
·· Producto o servicio
·· Contacto
Luego, el sitio puede contener otras, tales como Sobre nosotros, Trayectoria, Nuestros productos,
Servicios y Blog. Los llamados hitos claves delimitarán las secciones.
26
Ejemplo
Para poder comprender los conceptos que se abordarán en todo el
desarrollo de la página web, se trabajará con dos ejemplos, que re-
presentan un caso simple y otro complejo.
Ejemplo simple: la estructuración de un sitio web SAAS de un sof-

tware de control de plagio de contenidos
only
original
content
Onlyoriginalcontent.com es una empresa joven, de cinco años de

antigüedad, orientada al B2B. El decision maker de la compra suele
ser el depurador de contenido de una empresa de medios o una que
depende mucho del contenido, como puede ser una universidad on-
line. En este caso, esta figura es encarnada por hombres y mujeres
de más de 30 años.
La propuesta de valor de la firma se basa en la velocidad en la de-
puración, además de la exactitud. Mientras que sus competidores
depuran cada página en 10 segundos, onlyoriginalcontent.com lo
hace en dos.
La compañía está apuntando a rediseñar su sitio web y tener bue-

nos resultados en los motores de búsqueda, porque el consumidor
promedio que busca este servicio lo hace por referidos o Google.
El soft tiene tres tipos de pricing: por única vez, hasta 100 páginas;
básico, hasta 100 hojas por mes y avanzado, más de 100. Se habla,
entonces, de un modelo de LeadGen.
Por otra parte, se está evaluando recurrir al marketing de contenidos

para mostrar la importancia de contar con contenido sin duplicar en
las estrategias SEO. Para ello, se ha tercerizado un Content Manager,
que escribe seis notas mensuales.
Ejemplo complejo: la estructuración de un sitio web de e-commer-

ce de calzado femenino
Zapatos
online
y más!
La propuesta de valor de calzadosonlineymas.com es ofrecer “un cal-

zado siempre cómodo para cada ocasión”. El diferencial es la garantía
de que el número que lleve el consumidor es el número que ajusta
perfecto a su pie. La compañía lleva 10 años en el mercado y está
orientada a Latinoamérica, principalmente, a Colombia, Perú y Mé-
xico. Su target está compuesto en su mayoría por mujeres (78%) de
entre 25 y 50 años. Muy específicos para el B2C.
27
La estrategia de la empresa es posicionarse fuertemente en redes
sociales y apoyarse en una Instagramer, Lolita Acac (de Always cute
and comfortable), quien muestra qué zapatos usar para cada ocasión
y brinda consejos sobre moda (ropa, colores, calzado, etcétera). Ade-
más, recientemente ha hecho un partner con una tienda de acceso-
rios online que vincula para cada calzado alguna mochila o cartera.
Entregables
El entregable de esta etapa es el listado de las secciones claves que

llevará el sitio. Entonces, el del primer ejemplo es: Home, Quienes
somos, El soft, Demo free y Contacto.
El del segundo caso es: Home, Productos y Contacto. Luego esto

requerirá un desglose mayor.
5.2 ARQUITECTURA DE LA INFORMACIÓN (IA)
La Arquitectura de la Información es la estructuración lógica de las páginas y el contenido del sitio

de modo tal que le permita al usuario una navegación orgánica, natural, fluida y exitosa. IA, por
sus siglas en inglés (Information Architecture), representa la base de todas las áreas de desarrollo
posterior en un sitio web y de ella depende el trabajo del SEO, UX, IxD, etcétera. Por otra parte,
constituye un punto crítico del desarrollo de cualquier página y requiere mucho tiempo de plani-
ficación a conciencia para obtener resultados exitosos.
Recuerda
Armar una IA no es tarea fácil y demanda un verdadero análisis del
contenido porque es la base de una navegación exitosa.
5.2.1 Delimitación de la Arquitectura de la Información
Para poder estructurar un sitio web, se necesita visualizar que hay tres tipos de páginas de con-
tenido:
·· Páginas estáticas: aquellas que detallan información específica, pero no sufrirán
muchas modificaciones una vez publicadas.
·· Páginas de contenido dinámico: comúnmente, referidas al contenido de blogs,

que cambiará, se actualizará y trabajará con mayor frecuencia. Muchas de ellas
trabajan con categorías y sub-categorías.
·· Páginas de producto: dependiendo de la empresa, será el nivel de complejidad

que tengan. Al igual que en el caso anterior, muchas trabajan con categorías y
sub-categorías.
28
Una vez definidos los hitos más importantes del sitio web, se delimitarán los siguientes aspectos:
·· Importancia
·· Vinculaciones entre sí
·· Tipo de página de contenido
a. Importancia
La importancia se define por modelos de estructuración de sitios, que pueden ser:
1. Jerárquicos: de arriba hacia abajo, por prioridades. Se parecen a los modelos de

dendrograma.
2. Base de datos: según sus vinculaciones.
3. Faceted classification: por propiedad múltiple de cada elemento y sin un orden fijo.
4. Orgánica: sin relación de prioridades.
Aquí se trabajará con la más popular, la de orden jerárquico, y se definirá la importancia de cada
página. Para ordenar esta presencia, una de las técnicas más usadas y útiles es la de Card Sorting,
donde se utilizan Post-it para establecer una jerarquía y priorizar el contenido.
Concepto
Card Sorting es un método utilizado para ayudar a diseñar o evaluar la
arquitectura de información de un sitio. En una sesión de clasificación
de tarjetas, los participantes organizan los temas en categorías que po-
seen sentido para ellos y pueden etiquetar grupos. Para realizarlo, se
pueden emplear tarjetas reales, trozos de papel o alguna de las varias
herramientas de software de clasificación de tarjetas en línea.
Esta metodología utiliza las mismas técnicas de ordenamiento y priorización que Kanban Project
Management, Business Model Canvas, LEAN Canvas y softwares de tarjetas como Trello, por lo
que puede utilizarse cualquiera de ellas para realizar un tablero de tarjetas.
Con el modelo de Card Sorting, se emplearán las tarjetas para ordenar las prioridades y analizar
qué otras páginas son necesarias.
En onlyoriginalcontent.com, se distinguen las secciones Home, Quiénes somos, El soft, Demo

free y Contacto. Durante un brainstorming, surgieron ideas para que las distintas versiones del
software tuvieran nombres más simpáticos y se decidió que ello sería parte de la estrategia de
contenidos. Por ejemplo, Basic per month: depurar un poquito todos los meses. La estructura,
entonces, quedó con seis secciones en total.
29
Figura Nº 23: Secciones de onlyoriginalcontent.com
onlyoriginalcontent.com
El Trial
Home About software Demo Blog Contact
us
Historia One time

only
otras secciones
Basic
per
month s cliente
s
Nuestro nials
o
Testim tas frec.
Pregun os de uso
Términ
Advanrced
pe
month
Por otra parte, calzadosonlineymas.com presenta las siguiente secciones: Home, Productos y
Contacto. En el brainstorming que se realizó aquí, se definieron las categorías más importan-
tes para el sexo femenino. La sesión de Card Sorting estuvo integrada por seis mujeres y dos
hombres. La estructura que resultó de la misma consta de varias categorías repetidas, y es aquí
donde se deben de analizar las subcategorías y las vinculaciones entre sí.
Figura Nº 24: Secciones de calzadosonlineymas.com
calzadosonlineymas.com
Home Casual Trabajo Noche/ Siempre Contact

Elegante Playa bella
Stilettos Zapatos Ballerinas Todo lo

Ballerinas que haga
instagramer
Zapatos Sandalias Ojotas
Sandalias
Sandalias Panchas otras secciones
Zapatos
Taco Bajo
ciales
Redestrsos
Nosoneors
Part aja con nos
Trab s
Envíosletter
New untas frec.
Preg
La importancia se formaliza en un árbol de información, que cuenta con los detalles de jerarquía
y, en caso de utilizarse otra estructuración, plasma el modelo elegido.
30
Link
Existen otros sitios importantes a contemplar que se habían delimitado
antes, pero que se utilizarán o ubicarán en menú auxiliar o el pie de
la página. Por otra parte, también hay numerosas herramientas para el
armado de AI y/o Sitemaps. Por ejemplo:
·· http://cmap.ihmc.us/cmaptools/
·· https://www.powermapper.com/products/mapper/
Retomando los ejemplos expuestos para el desarrollo conceptual, se obtendrían los siguientes
árboles de información:
Figura Nº 25: Árboles de información
calzadosonlineymas.com
Home Casual TrabajoN oche/ PlayaS iempre Contacto

Elegante bella
Ballerinas
Zapatos Ballerinas
Sandalias Sandalias
Ojotas
Sandalias
Zapatos Zapatos
Panchas
Taco bajo
Redes sociales Nosotros Preguntas frec. Partners Trabaja con nos
Envíos
Para saber si esta arquitectura está bien realizada, se analiza con una técnica que se llama Tree
testing. Es el árbol de información planteado de un modo más formal que busca la fluidez de la
navegación por parte del usuario.
Concepto
Tree testing es una técnica de usabilidad para evaluar la posibilidad de
encontrar los temas en un sitio web. También se conoce como Inverse
Card Sorting. Existen varias herramientas online para realizarlo:
optimalworkshop.com/treejack
31
b. Vinculaciones
Una vez que se ha determinado la importancia y armado el árbol, es necesario empezar a ana-
lizar las vinculaciones básicas tanto para los sitios más simples como para los más complejos,
como es el caso del e-commerce, las interacciones por categorías y tags.
En primer lugar, es preciso comprender la interacción básica: a la capa básica analizada recien-
temente se le comenzarán a ubicar interacciones estratégicas, que se transformarán en las
vinculaciones, los links entre páginas.
Figura Nº 26: Ejemplo de vinculaciones en onlyoriginalcontent.com

onlyoriginalcontent.com
Home About us Trial Blog Contact

Demo
Historia
Basic x month
Basic x month Advanced x month
Advanced x month
Trial Demo
Nuestros clientes
Nuestros clientes Preguntas frec. Términos de uso
En el caso del e-commerce, las interacciones estratégicas están asociadas a categorías y lo que
se conoce como Faceted classification o clasificación por facetados, que implica que cada ítem
puede tener una serie de características asociadas, que se vuelven vinculantes.
Para poder hacer una calificación facetada, se necesita conocer cuáles son todas las caracterís-
ticas variables de un producto. En el caso de los zapatos, puede ser: tipo de calzado, momento
del día, color, talle, textura e, incluso, categorías especiales como “envío gratis”.
Figura Nº 27: Faceted classification de calzadosonlineymas.com
32
Todas las facetas o características de un producto se conocen como categorías, que pueden
tener a su vez sub-categorías, según sea el caso. Las vinculaciones entre las mismas son claves
para el buen desarrollo de la navegación.
c. Tipo de página de contenido
Finalmente, con el árbol de navegación, es posible imaginar cuáles páginas son estáticas, de
producto o de contenido, mejor conocidas como páginas de blog.
5.2.2 Template Hierarchy
El concepto de Jerarquía de Templates deviene de Wordpress, pero evoluciona hasta transfor-

marse en el modo de ordenar las plantillas que se utilizarán. Además, facilita el diseño y la crea-
ción de maquetas para el desarrollo web. Para ello, es preciso identificar cuántas páginas con
distinto diseño se tendrá, es decir, cuántas maquetas habrá que realizar. Una web puede tener
100 productos, pero la página de diseño es siempre la misma, al igual que las notas o páginas de
productos, que tienden a ser siempre iguales.
En el caso de onlyoriginalcontent.com, se cuenta con 14 maquetas a realizar, que están com-

puestas de páginas estáticas y dinámicas.
Figura Nº 28: Jerarquía de templates de onlyoriginalcontent.com
Para el caso del e-commerce, es preciso contemplar todas las páginas asociadas a la compra on-
line. Si bien ahora serán mencionadas, en el módulo e-commerce se las verá con mayor detalle.
En en el caso de calzadosonlineymas.com, deben de realizarse, aproximadamente, 20 maquetas.
33
Figura Nº 29: Jerarquía de templates de calzadosonlineymas.com
5.3 DELIMITACIÓN DE LINK-BULDING Y SITEMAP (XML PARA SEO)
Se ha arribado al punto que más le gustaba al SEO hace unos años y que sigue agradándoles a los
motores de búsqueda: el armado de links internos dentro del sitio web. Si esta estructuración es
ordenada y prolija, los robots de los buscadores le darán a la página un mejor espacio en los re-
sultados. En la próxima unidad, se conocerá un poco más sobre SEO y estos elementos que ahora
serán apenas mencionados.
A priori, se debe entender que ya se hizo el trabajo de indexación interna en la etapa anterior, el
cual debe de cargarse en un archivo (un XML) que, cuando se publique la web, debe de ser subido
al sitio. Este archivo, denominado sitemap, no es visto por el usuario, dado que es específico para
informarles a los motores de búsqueda las páginas que se pueden rastrear en la web en cuestión.
Los mapas de sitio pueden mejorar el posicionamiento en buscadores, dado que aseguran que
todas las páginas de un sitio puedan ser encontradas. Esto es especialmente importante si este
emplea menús Adobe Flash o JavaScript que incluyen enlaces HTML y estén declarados.
34
5.4 PROTOTIPADO DE WEB (WIREFRAMES) – UI, USER INTERFACE
En el presente apartado, se abordará en profundidad el diseño web. Para ello, el viaje conceptual
comenzará con la creación de wireframes o maquetas de diseño. Estas últimas, también conoci-
das como esquemas de página o plano de pantalla, son una guía visual que representa el esquele-
to o estructura visual de un sitio. En este sentido, la mejor manera de comenzar a maquetar una
página es dibujando con papel y lápiz las zonas de mayor interés.
Figura Nº 30: Ejemplo de un wireframe
Sin embargo, antes de hacer cualquier dibujo, es preciso tener en mente tres aspectos muy im-
portantes para todo diseño web:
·· Grillas y bases para dispositivos
·· Anatomía de un sitio web
·· Responsive, Adaptative, Mobile first
5.4.1 Grillas de diseño
Todos los sitios web poseen un esqueleto base, conformado por una grilla de diseño que ayuda en
la distribución de contenido en pantalla. Se esquematiza con líneas, que forman distintos anchos,
y calles, que le dan espacio a cada bloque de contenido. Con las tendencias de diseño responsivo
y mobile, no es tan estática como antes, sino mucho más fluida.
35
Figura Nº 31: Ejemplo de grilla de diseño
Son muy comunes en el uso de frameworks de desarrollo front-end como Bootstrap. El ancho
más común de diseño es de 940 px, aunque con las resoluciones de pantalla actuales se está tra-
bajando con 1140 y 1200 px, en promedio.
5.4.2 Anatomía de un sitio web
Para poder interpretar mejor la maquetación, se debe de entender las distintas partes de un sitio
web. Toda página se compone de tres elementos fundamentales, en base a los cuales se estruc-
turan tanto la programación como el diseño:
·· Header
·· Main Content
·· Footer
36
Figura Nº 32: Anatomía de una página web
Desde arriba hacia abajo, la Figura Nº 33 presenta todas las secciones de las que se compone una
web. Existen tres tipos de menús: de navegación, que es el principal; el secundario, que acompa-
ña algunas páginas, el auxiliar, que se suele encontrar en una barra superior de menor categoría,
aunque es más importante que el secundario.
Los títulos se conocen como headings y se abrevian con la letra H. Cada uno de ellos posee un
tamaño que va desde el 1 hasta el 6, promedio. El H1 es el principal y se nomencla de ese modo
para identificar cuáles son los de mayor envergadura. Luego, se encuentra el secundario, denomi-
nado H2. La numeración continúa progresivamente hasta llegar a otros formatos de títulos más
pequeños y menos relevantes.
Los tabs, párrafos, galerías, paginado, legales y social links se entienden por sí mismos.
Los breadcrumbs, por su parte, constituyen el modo de mostrarle al usuario dónde se encuentra
en ese momento. Por último, los widgets son iframes específicos que incrustan contenido.
37
5.4.3 Responsive versus Adaptative Design
El Responsive Web Design (RWD) o Diseño Web Responsivo es una técnica de diseño que es-
tablece medidas de ancho en tamaños proporcionales para hacer una estructura flexible y que el
contenido se adapte a los distintos dispositivos.
Por su parte, el Adaptive Web Design (AWD) o Diseño Web Adaptado es una técnica que utiliza
tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px y 1600px. Gracias a
ella, se crea un diseño a medida para cada uno de ellos. Cuando se detecta el dispositivo, se le
suministra el diseño que mejor se adapta de entre los realizados. El contenido adaptativo es la
base para una evolución de web que se conoce como Progressive Web App (PWA).
Concepto
Un concepto más para incorporar a la creación de la IA es el de locali-
zación o wayfinding. Este apunta a que el usuario pueda manejarse con
facilidad dentro de una web y siempre sepa dónde está y cómo volver
a cada lugar sin perderse. Si bien está asociado al geo-mapping y es
muy utilizado en cartelería, tiene su bajada al universo web en cuatro
elementos claves para modelar:
·· Breadcrumbs
·· Titulaciones y categorías
·· Tabs
·· Uso de colores y escalas de grises
Habiendo comprendido un poco más sobre la temática, se pasará al prototipado de web o crea-
ción de wireframes, que es la base del UI o User Interface, creación gráfica de usuario.
Como ya fue dicho previamente, una vez que se ha establecido cuántas maquetas se deben de
realizar para el sitio, es momento de diagramarlas en la página con una suerte de cajas y ubicar los
elementos más importantes en ellas.
38
Figura Nº 33: Prototipado de la web
Tal como se mencionó anteriormente, los CTA (call to action) y la segmentación y propuesta de va-
lor de la empresa son muy importantes en esta etapa, porque el maquetado debe de reflejar una
propuesta de valor y ser capaz de orientar al cliente hacia el objetivo final de la compañía, como
fue expresado en la Unidad I. Vale la pena destacar que es sólo maquetado, sin capas de diseño.
En este entregable, el cliente suele intervenir bastante porque es donde se tiene que plasmar la
interacción del usuario sobre su negocio.
39
5.5 ELECCIÓN DEL TIPO DE PROGRAMACIÓN: FRONT Y BACK. ENLATADO O DESARROLLO
PROPIO
Una vez que se han definido todos estos pasos, es preciso elegir qué camino tomar en cuanto a la
programación. Los conceptos de front-end y back-end fueron desarrollados al inicio de la unidad,
por lo que en esta instancia es necesario realizarse la siguiente pregunta para poder avanzar: ¿Se
desea un sitio auto-administrable o se prefiere, en cambio, que la parte de carga y gestión sea rea-
lizada por otro? En caso de inclinarse por la primera opción, surge otro interrogante ¿se prefiere
un enlatado o se busca un desarrollo a medida?
Las respuestas a estas preguntas dependen de las características de la empresa y el rubro en el

cual ella se desempeña, al igual que muchas veces del presupuesto.
Aquí, se distinguen, entonces, cinco escenarios posibles:
·· Administrados por un web developer: el back-end de carga de contenido no es

amigable y lo entiende sólo un programador:
·· Interno
·· Externo
·· Administrados por la empresa: el back-end de carga de contenido es amigable:
·· CMS
·· WebApp de desarrollo de sitios
·· Desarrollo de sistema de administración
·· Si el sitio no es autoadministrable, se deberá de considerar un presupuesto fijo

para ello y contar con un web developer que administre esta información. Este
especialista puede ser o bien parte de la empresa, o bien ser un externo con-
tratado que tiene otros clientes de desarrollo web.
En el caso de los sitios autoadministrables, una de las soluciones más comunes son los CMS, Cus-
tomer Management System y las WebApps de desarrollo de sitios estilo Wix.com, muy en boga
en los últimos tiempos.
40
Figura Nº 34: Elección del tipo de programación
Una vez determinado el camino a seguir, en caso de tratarse de un desarrollo, la elección del
lenguaje de programación queda en manos del desarrollador, quien podrá brindar asesoramiento
respecto de cuál es la mejor opción.
5.5.1 El mundo de los CMS
En la actualidad, el mercado de los CMS es bastante amplio, dado que existen muchas alternativas
de desarrollo de estas características. En la siguiente imagen podrán verse algunas de ellas en un
pequeño fragmento del Martech Landscape, que se desarrollará más adelante.
Figura Nº 35: Alternativas de desarrollo CMS
Fuente: Brinker (2014). Web Site/WCM/WEM [Figura].
A pesar de haber evolucionado bastante, los principales jugadores del mundo de los CMS son:
Wordpress, Joomla y Drupal. Cabe destacar que todos los CMS trabajan más o menos con la mis-
ma premisa, por lo que se avanzará con uno de ellos como modelo: Wordpress.
Para poder comenzar, se descarga un enlatado que trae pre-programadas varias partes del sitio
web. Para ello, se debe de ingresar a https://wordpress.org/download/ y descargar la versión
actual en el idioma de preferencia. Una vez descargada la configuración, el trabajo del sitio se
realizan con un especialista en el tema. A grandes rasgos, se tiene que alojar en local para trabajar
en él y luego se subirá a la nube, aunque también se puede trabajar en la nube directamente, pero
en un ambiente de desarrollo, no en el final, donde se publica.
41
Figura Nº 36: WordPress
WordPress tiene por defecto un front-end y un template de diseño básicos, y un back-end amiga-
ble, que es la característica de todos los CMS.
Una vez configurado en local, WordPress cuenta con dos tipos de contenido pre-creados: páginas
y entradas. Este es uno de los puntos más complejos de entender, ya que la diferencia entra am-
bas radica en el tipo de contenido que se trabaja sobre ellas.
a. Diferencias entre un post y una página
Figura Nº 37: Comparación entre un post y una page
Post Page
Se pueden crear interacciones SI NO

Tiene Sitemap SI NO
Puede tener categorías SI NO
Puede ser encontrado por RSS SI NO
NO SI
Puede tener tags SI NO
Puede ser jerárquico NO SI
A priori, la diferencia más notoria es que un post se comporta como una página de contenido que
tiene categorías y tags, e, incluso, fecha de publicación, y puede ser encontrada por un RSS. Una
página, por el contrario, no presenta estas características, pero sí puede ser ordenada jerárquica-
mente otorgando prioridades.
Concepto
Un RSS (Rich Site Summary) es un formato XML para sindicar o distribuir
contenido de fuentes a través de la web, incluyendo periódicos, revistas
y blogs.
42
Las páginas de productos en los casos e-commerce se comportan como post, porque pueden
tener tags y categorías. Por ejemplo:
·· Categoría Zapatos: noche, casual, trabajo, entre otras
·· Tags para un zapato en particular: elegante, rojo, cuero, etcétera
Entendiendo esta diferencia se comprende una de las bases más importantes de WordPress.
Ahora bien, las secciones del sitio son configuramos particularmente, así como los menús y demás
elementos críticos.
Además de venir pre-creados, los CMS tienen la opción de incorporar plantillas de diseño y tem-
plates, que por muy bajo costo pueden brindarle un aporte estético a un sitio. Estos últimos po-
seen miles de opciones de customizado y los hay incluso para rubros e industrias específicas. Los
más buscados son los corporativos, los de e-commerce y los de blogs.
Ejemplo
Envato, un grupo de diseño que vende todo tipo de elementos, es
dueño de Themeforest.com, una de las plataformas de templates más
importantes. Ingresando al siguiente enlace podrán hallarse numero-
sas opciones de diseño: https://themeforest.net/category/wordpress.
Incluso, recientemente ha lanzado un producto llamado “Hosted Wor-
dress”, donde la parte compleja del alojamiento y la publicación es brin-
dada por ellos: https://themeforest.net/wordpress/hosted
Wordpress trabaja además con plugins, que son pequeños desarrollos enlatados que se pueden
utilizar para funciones específicas, por ejemplo, calendarios, formularios, optimización de SEO,
backup automático, caché, etcétera.
Link
En el artículo 24 Must Have WordPress Plugins for Business Websites
in 2017, podrán encontrarse diversas opciones de plugins para imple-
mentar. La publicación se encuentra disponible en el siguiente enlace:h-
ttp://www.wpbeginner.com/showcase/24-must-have-wordpress-plu-
gins-for-business-websites/
Desarrollar un sitio en WordPress es una experiencia muy enriquecedora y recomendable para

cualquier marketero digital. No debe de tenerse miedo de romper nada porque, como se suele
decir, el universo del marketing online es totalmente variable y cambiante. “No trabajamos con
Plutonio y la mejor manera de aprender es rompiendo”.
b. Web-Apps de desarrollo de sitios
Otra de las maneras de realizar un sitio web auto-administrable es utilizando una web-app estilo
wix.com. Para el e-commerce, se destaca tiendanube.com. Estas plataformas permiten crear un
43
sitio web completo desde cero y administrarlo por cuenta propia. En algunos casos queda supe-
ditado al dominio padre, por ejemplo: tiendanube.zapatosonlineymas.com.
A grandes rasgos, y dependiendo de la necesidad, es una solución viable. Lo único no gestionable

es el SEO, pero facilita la delegación de dominios, la publicación y demás acciones que son com-
plejas para un usuario sin madurez en desarrollo.
c. CMS desarrollo propio
La última opción de gestión de contenidos es un CMS con desarrollo propio. En otras palabras,
no se utiliza un enlatado, sino que además de crear el sitio en sí mismo se ordena la elaboración
de un back-end amigable. Esto es recomendable para empresas de gran envergadura porque los
costos son altos y, normalmente, realizar este desarrollo está alineado a un objetivo de negocios
en particular, por ejemplo: el posicionamiento en motores de búsqueda, con lo que se contratará
un SEO. Otra meta puede ser la auto-administración, pero con mayor seguridad que un enlatado,
aunque esto hoy por hoy puede ser muy subjetivo.
d. Análisis de cada caso
Ahora que se conoce un poco más sobre las opciones para el desarrollo del sitio web, es posible
tomar algunas decisiones en base a los dos casos que se ha venido desarrollando a lo largo de la
presente unidad.
only
original
content
Por su presupuesto e inversión, es posible que la empresa onlyoriginalcontent.com utili-

ce un enlatado. Los wireframes siempre serán necesarios para el posterior desarrollo, pero
en este caso la mejor opción, por tiempo y costos, será avanzar con WordPress. Para ello, los
pasos 7, 8 y 9 del Proyecto Web no serán de gran trabajo porque muchos elementos vincula-
dos a estos vienen pre-creados. El dueño de la empresa ha decidido también comprar un the-
me, por lo que el diseño que irá sobre los wireframes estará supeditado al tema seleccionado.
Zapatos
online
y más!
En el caso de zapatosonlineymas.com, se decidió por el desarrollo de un sitio web propio, donde

la sección e-commerce se utilizará con una plataforma específica para ello. Ecommerce. El desa-
rrollo propio se realizará en PHP y HTML5 con CSS3. Para la plataforma, se eligió Magento como
solución corporativa entre las opciones viables. Se aprobaron los wireframes y el proyecto se
encuentra en manos de los diseñadores multimediales que están creando la estética.
44
Link
En el artículo Top 5 Ecommerce Platforms for 2017, se presentan las cin-
co plataformas de Ecommerce más importantes del momento. Para con-
sultarlo, se debe de ingresar al siguiente enlace: http://www.inc.com/
bill-carmody/top-5-ecommerce-platforms-for-2017.html.
5.6 MAQUETACIÓN Y DISEÑO
Una vez definido el lenguaje de programación de front-end y back-end, se procede a diseñar los
wireframes en alineación con la estética de la empresa y, con la aprobación del cliente, a maque-
tarlos.
Lo recomendable es pre-diseñar elementos web con sus respectivos colores, tipografías, íconos,
botones, desplegables, etcétera, ya que de ese modo se obtiene un GUI set o un UI kit, que facilita
luego el maquetado y permite unificar criterios de diseño. Se les conoce como. Este concepto se
conoce como UI o User interface Design.
Figura Nº 38: User Interface Design
45
Notas
A la hora de maquetar existe una técnica que se basa en un análisis
clave para definir la posición de los elementos: Eye Tracking Mapo, tam-
bién conocida como Hot points in page. Esta técnica mapea en colores
la información que el usuario visualiza analizando sus movimientos ocu-
lares. El eyetracker es la herramienta con la que se realiza dicha acción
y consiste en un monitor especial que lanza rayos infrarrojos a los ojos
de quien mira la imagen sujeto de análisis. Las empresas no pueden
ejecutar el mapeo, pero sí tomar la información para conocer cuáles son
los puntos más “calientes” que visualiza un usuario al navegar una web.
Figura Nº 39: Hot points in page
El autor y fundador de Adaptive Path, Jesse James Garrett, define el diseño de interfaces (UI)
como la selección de los elementos de interfaz adecuados, como texto, botones, campos textua-
les, listas de códigos de colores, etcétera, para la tarea que el usuario está intentando lograr. Se
busca organizarlos la pantalla de manera tal que haya una fácil comprensión y resulten sencillos
de utilizar. El objetivo es hacer la interacción del usuario tan eficiente y simple como sea posible.
5.7 INTERACTION DESIGN
Muy de moda actualmente, el diseño de la interacción trabaja sobre la conexión entre un dis-
positivo, su interfaz y el usuario. Arma la lógica para que las acciones que se desea realizar con
cualquier dispositivo se produzcan exitosamente, sin importar el sistema o soporte. Cada vez que
se visita un sitio desde un dispositivo digital, el diseño de la interacción es lo que responde.
El UxD, por su nomenclatura, hace que cada objeto en una web sea útil, aprendible y, finalmente,
intuitivo. Además, debe de brindar ese elemento casi humano que hace que la tecnología sea
agradable y fácil de interactuar.
La palabra que más importa para UxD es intuitivo.
Notas
La descripción de UXD según Google
El rol del diseñador de interacciones es abordar tareas complejas y

transformarlas en diseños intuitivos, accesibles y fáciles de usar para
miles de millones de personas en todo el mundo, desde el primer usua-
46
rio hasta el sofisticado experto. Para lograr este objetivo, es necesa-
rio colaborar con equipos de diseñadores, investigadores, ingenieros
y gerentes de productos durante todo el proceso de diseño, desde la
creación de flujos de usuario y wireframes hasta la de maquetas y pro-
totipos de interfaces de usuario. En cada etapa, se anticipará lo que lo
clientes necesitan, se abogará por ellos y se asegurará que el producto
final sorprenda y deleite.
5.8 DESARROLLO FRONT-END
En caso de tratarse de un sitio de desarrollo propio, el front-end es la parte de programación de

lenguajes, como HTML y CSS. Esto corresponde a un especialista que se conoce como front-end
developer, desarrollado anteriormente.
Link
Ingresando al siguiente link, se podrá conocer un poco más sobre el rol
de dicho especialista, cuánto gana y detalles del puesto:
http://www.payscale.com/research/US/Job=Front_End_Develo-
per_%2F_Engineer/Salary
5.9 DESARROLLO BACK-END Y BASE DE DATOS
El desarrollo back-end corresponde a los lenguajes de programación asociados al lado del servi-
dor, siendo los “motores” que hacen funcionar la máquina. Esto corresponde a un especialista que
se conoce como back-end developer, abordado previamente.
Link
A través del siguiente enlace, podrá conocerse un poco más sobre su
rol, salario y detalles del puesto: http://www.payscale.com/research/
US/Job=Back_End_Developer%2f_Engineer/Salary
Ambos desarrolladores deberían de trabajar muy de cerca para conseguir los resultados espera-
dos.
Junto con el back-end viene otra capa más del stack tecnológico: la de la base de datos. Esta
última puede ser entendida como un “almacén” donde se guardan grandes cantidades de infor-
mación de forma organizada para que luego pueda ser encontrada y utilizada fácilmente. Además,
estos volúmenes se encuentran agrupados o estructurados según reglas.
5.9.1 Tipos de base de datos
Existen diferentes tipos de bases de datos:
·· MySql: base de datos con licencia GPL basada en un servidor. Se caracteriza

por su rapidez. No es recomendable usar para grandes volúmenes de datos.
47
·· PostgreSql y Oracle: son sistemas de base de datos poderosos. Administran
muy bien grandes cantidades de datos y suelen ser utilizados en intranets y
sistemas de gran calibre.
·· Access: desarrollada por Microsoft. Esta base de datos debe de ser estable-
cida bajo el programa access, el cual crea un archivo .mdb con la estructura
ya explicada.
·· Microsoft SQL Server: es una base de datos desarrollada por Microsoft más
potente que la anterior. Se utiliza para manejar grandes volúmenes de infor-
maciones.
5.10 OPTIMIZACIÓN PARA SEO PRE-PUBLICACIÓN Y W3C
Muchas de los aspectos específicos de SEO que se necesita optimizar serán desarrollados en la
semana específica de esta temática. Sin embargo, es importante revisar y aplicar la meta-data y
las reglas de links y optimización, y recordar que existen otras buenas prácticas para mejorar la
performance de la web.
Este concepto es conocido como Web Performance Optimization (WPO) y surge como conse-
cuencia del cambio de algoritmos de buscadores que premian la velocidad de los sitios ¿Por qué
los browsers analizan el tiempo de carga de un sitio? Porque cuanto menor sea este, más páginas
podrán rastrear los robots de los buscadores.
En otras palabras, el elemento clave aquí es la velocidad. El WPO cuenta con muchos conceptos
complejos de análisis que van desde el código hasta el servidor, pasando por miles de reglas inter-
medias. De todos ellos se destaca uno: Page Load Time o Time to Interact. Este último mide cuánto
se demora el navegador en procesar y descargar todo el contenido de una página web. El PLT o
TLT ha sido considerado el indicador más importante del rendimiento del sitio, el cual se
mide con herramientas como Page Speed, para Google, e Yslow, para Yahoo.
Link
Se recomienda probar distintas URL en la herramienta para observar
cómo funciona y qué sucede: https://developers.google.com/speed/
pagespeed/insights/
Figura Nº 40: Page load time
48
5.11 CROSS BROWSER TESTING
Cross Browser testing o prueba de navegación cruzada, como su nombre indica, se trata de un
análisis del sitio web o aplicación en varios navegadores para asegurarse que la página funciona
de forma correcta, consistente y según lo previsto, sin perder calidad ni usabilidad.
Figura Nº 41: Cross Browser testing
Realizar un test cross-browser implica analizar todos los navegadores y sus versionados en los que
será reproducido un sitio web. Esto puede llegar a implicar más de 20 tipos de ajustes a realizar.
Esta tarea puede resultar muy desgastante e improductiva si primero no se analiza cuáles son
los navegadores más utilizados por el mercado. Por ello, para optimizar este punto, existen tres
opciones:
·· Se publica el sitio y con Google Analytics se revela cuáles son los navegado-
res más usados por la audiencia
·· Se hace un análisis de benchamarking sobre una página de la competencia

y con herramientas como similarweb.com se compara qué navegadores usa
·· Se analiza el mercado psicogeográficamente para determinar qué navegado-

res utiliza el mercado meta
Link
Existen múltiples herramientas online para realizar análisis cross brow-
ser:https://www.sitepoint.com/the-7-cross-browser-testing-tools-
you-need-in-2016/
49
5.12 UX TESTING
Una vez terminado todos los procesos, se realiza una última revisión de usabilidad antes de pu-
blicar. La mejor manera de hacerla es con herramientas como: http://usertesting.com/. La misma
realiza análisis de navegación por parte de usuarios reales que nunca han entrado a la página,
graba un video de pantalla y, luego, presenta un reporte que estudia las dificultades existentes.
Cabe destacar que es muy útil y tiene un costo muy bajo.
En esta instancia aún hay tiempo de corregir los errores de UX antes de su publicación.
Notas
Chief Experience Officer: un rol no tan nuevo que va ganando espacios.
En 2015 la revista Forbes publicó un artículo donde se describe el rol
del CXO.
La idea de Chief Experience Officer es nueva en los negocios moder-

nos, pero de hecho es tan antigua como las ventas. Este se asegura
de que la experiencia del usuario desde el engament en adelante sea
consistente y exitosa en todo momento.
El artículo publicado por el prestigioso medio se encuentra disponible

en el siguiente enlace: https://www.forbes.com/forbes/welcome/?-
toURL=https://www.forbes.com/sites/steveolenski/2015/10/24/
does-your-brand-need-a-chief-experience-officer/&refURL
5.13 PUBLICACIÓN: ¡ESTÁ VIVA!
Se ha llegado al momento clave. La publicación es parte de un proceso complejo que si bien no se

detallará ahora, debe de ser considerado como el punto donde los errores tienen que ser salvados
a la brevedad. Ella se realiza en un dominio final y vincula todos los elementos de SEO post-publi-
cación, tal como se plantea en el siguiente punto.
5.14 OPTIMIZACIÓN PARA SEO POST-PUBLICACIÓN
Una vez publicado el sitio web, resulta imprescindible trabajar los links y las redirecciones correc-
tas, colocar y publicar el sitemap, y analizar los enlaces que se desea que se indexen en los busca-
dores y aquellos que se quiere rankear en estos. También es momento de revisar que la meta-data
se tome correctamente y que los demás elementos de SEO estén bien declarados.
Todo esto será visto más adelante en la unidad que corresponde a SEO.
5.15 TESTING Y NAVEGACIÓN
Una vez más, se realiza un análisis de navegación posterior a la publicación, que, básicamente,
controla que todo funcione correctamente.
50
5.16 OPTIMIZACIÓN Y ANÁLISIS
Una web no queda abandonada una vez que se publica. Es necesario analizar y optimizar todo el
tiempo la interacción de los usuarios para mejorar la performance y alcanzar los objetivos esta-
blecidos.
Figura Nº 42: Diagrama de un flujo de interacción en Google Analytics
5.17 CONCLUSIÓN
Finalmente, para poder hacer este análisis y emprender un seguimiento, se comparte una
herramienta GANTT para planificar cada una de las etapas del proyecto de desarrollo de un
sitio web.
51
BIBLIOGRAFÍA
Brinker, S. (16 de noviembre de 2014). The MarTech Landscape 2015: Trends en verschuivingen: Scott Brinker.
Recuperado el 30 de marzo de 2017, de SlideShare: https://www.slideshare.net/projectmanagement_bbp/the-

mar-tech-landscape-2015-trends-en-verschuivingen-scott-brinker
CareCo. (22 de octubre de 2015). Which Web Browser Should I Be Using.
How to Program Wiki. (s.f.). CSS3. Recuperado el 30 de marzo de 2017, de How to Program Wiki: http://howto-
program.wikia.com/wiki/File:CSS3.png
McLaughlin, D., & Bodoni, S. (29 de agosto de 2016). Facebook’s WhatsApp Privacy Raise EU, U.S. Concerns.
Recuperado el 29 de marzo de 2017, de Bloomberg: https://www.bloomberg.com/news/articles/2016-08-29/

whatsapp-privacy-changes-raise-eu-concern-over-user-data-control
Ramos, A. (29 de junio de 2012). [jQuery] Intro to jQuery parte 1. Recuperado el 30 de marzo de 2017, de Phara-
lax Blog: http://pharalax.com/blog/category/scripts-jquery/
Ramos, A. (5 de noviembre de 2015). 4 Frameworks en Javascript 2015. Recuperado el 30 de marzo de 2017, de

Evilnapsis: How to Program Wiki
Reuters. (6 de mayo de 2016). Facebook on back-foot in data storage lawsuit. Recuperado el 30 de marzo de 2017,
de Newshub: http://www.newshub.co.nz/home/world/2016/05/facebook-on-back-foot-in-data-storage-lawsuit.
html
Sysadmit. (26 de marzo de 2014). Linux: Ajustar el número de conexiones simultaneas en Apache . Recuperado
el 29 de marzo de 2017, de Sysadmit: http://www.sysadmit.com/2014/03/Linux-Ajustar-el-numero-de-conexio-
nes-simultaneas-en-Apache.html
W3C. (s.f.). Toma el control - tu web, tu logo. Recuperado el 30 de marzo de 2017, de W3C: http://www.w3c.es/
Divulgacion/html/logo/
52

Libro - Universo Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Libro - Universo Web

Cargado por

Copyright:

Formatos disponibles

Universo Web

Autor: Jael Lena

2. VAMOS POR PARTES…......................................................................................................... 4

2.1 ALGUNOS CONCEPTOS A DESARROLLAR...................................................... 5

2.1.1 Web server versus web browser........................................................................ 5

2.1.2 HTTP, URL y otros conceptos básicos.............................................................. 6

2.1.3 Landing versus web............................................................................................... 8

2.1.4 ¿Qué es una cookie?............................................................................................. 9

3. LOS DATOS Y LA REGULACIÓN QUE SE VIENE.......................................................... 10

4. LOS COCINEROS DE LA WEB: FRONT-END Y BACK-END...................................... 12

4.3 ¿PARA QUÉ SIRVE UN STACK TECNOLÓGICO?........................................... 15

4.4 LENGUAJES DE PROGRAMACIÓN WEB........................................................ 15

4.4.1 Del lado del cliente o browser.................................................................... 16

4.4.2 Del lado del servidor..................................................................................... 22

4.5 ¿QUÉ ES LA PROGRAMACIÓN ORIENTADA A OBJETOS?.................. 24

5. ETAPAS DE UN PROYECTO WEB.................................................................................... 24

5.1 DEFINICIÓN DEL PROYECTO............................................................................ 26

5.2 ARQUITECTURA DE LA INFORMACIÓN (IA)................................................. 28

5.2.2 Template Hierarchy....................................................................................... 33

5.3 DELIMITACIÓN DE LINK-BULDING Y SITEMAP (XML PARA SEO).......... 34

5.4 PROTOTIPADO DE WEB (WIREFRAMES) – UI, USER INTERFACE.......... 35

5.4.1 Grillas de diseño............................................................................................ 35

5.4.2 Anatomía de un sitio web............................................................................ 36

5.5 ELECCIÓN DEL TIPO DE PROGRAMACIÓN: FRONT Y BACK. ENLATADO

5.5.1 El mundo de los CMS................................................................................... 41

5.6 MAQUETACIÓN Y DISEÑO................................................................................. 45

5.7 INTERACTION DESIGN........................................................................................ 46

5.8 DESARROLLO FRONT-END................................................................................ 47

5.9 DESARROLLO BACK-END Y BASE DE DATOS.............................................. 47

5.10 OPTIMIZACIÓN PARA SEO PRE-PUBLICACIÓN Y W3C.......................... 48

5.11 CROSS BROWSER TESTING............................................................................. 49

5.13 PUBLICACIÓN: ¡ESTÁ VIVA!............................................................................. 50

5.14 OPTIMIZACIÓN PARA SEO POST-PUBLICACIÓN..................................... 50

5.15 TESTING Y NAVEGACIÓN................................................................................. 50

5.16 OPTIMIZACIÓN Y ANÁLISIS............................................................................. 50

2. VAMOS POR PARTES….

·· Los usuarios que ingresan a un sitio web o landing representan el tráfico, el

·· Tráfico orgánico: proviene de las búsquedas a través de, valga la

·· Tráfico pago: viene por campañas

·· Cuando un sujeto ingresa a un sitio, se dice que aterriza, de allí se deriva el

·· Al llegar y navegar la página, la persona acepta implícitamente las políticas del

·· Toda interacción de un usuario sobre la web puede ser almacenada para su

·· La información de un usuario puede ser obtenida gracias a cookies, UTMs,

·· En el universo web, se identifican dos “caras” en el manejo de la información:

2.1 ALGUNOS CONCEPTOS A DESARROLLAR

2.1.1 Web server versus web browser

Figura Nº 1: Imagotipo de Apache server

Fuente: Sysadmit (2014). Apache [Figura].

Figura Nº 2: Web browsers más populares

Fuente: CareCo (2015). Which Web Browser Should I Be Using [Figura].

2.1.2 HTTP, URL y otros conceptos básicos

Realizando un breve repaso de lo desarrollado hasta el momento, se recuerda que Internet es el

2.1.3 Landing versus web

Figura Nº 4: Puntos de fuga

Fuente: elaboración propia.

2.1.4 ¿Qué es una cookie?

3. LOS DATOS Y LA REGULACIÓN QUE SE VIENE

Figura Nº 5: Titular del artículo referido al caso de Whatsapp

Fuente: registro propio, extraído de McLaughlin y Bodoni (2016).

·· Facebook on back-foot in data storage lawsuit: http://www.

·· Storing European User Data on USA Servers? Better read this…:

·· JUDGMENT OF THE COURT (Grand Chamber) 6 October

·· The implications for storage of EU data protection regula-