Software 10

Programación web II
Unidad 3. Diseño web profesional
Ingeniería en Desarrollo de Software

Semestre 8
Programa de la asignatura:
Clave:
15144843
Universidad Abierta y a Distancia de México
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 1

Índice
Unidad 3. Diseño web profesional...................................................................................... 3

Presentación de la unidad ................................................................................................. 3
Propósitos.......................................................................................................................... 3
Competencia específica..................................................................................................... 3
1. Diseño responsivo con bootstrap ................................................................................... 4
1.4. Clases y elementos de Bootstrap................................................................................ 4
1.1. Descarga e instalación de bootstrap ........................................................................... 8
1.2. Uso de grids responsivos .......................................................................................... 13
1.3. Navbar responsivo .................................................................................................... 20
2. Herramientas de marketing .......................................................................................... 24
2.1. El sitio web como herramienta de comunicación ....................................................... 25
2.2. Herramientas de marketing para el desarrollo de sitios web ..................................... 27
Cierre de la unidad .......................................................................................................... 31
Para saber más ............................................................................................................... 31
Fuentes de consulta ........................................................................................................ 32

Presentación de la unidad
Bienvenidos a esta tercera unidad de la asignatura Programación web II, en la que se

reafirmarán los saberes adquiridos en las unidades anteriores, integrando temas actuales
tales como el diseño responsivo y las herramientas de marketing, que permiten que los
sitios web puedan ser visualizados desde cualquier dispositivo móvil, así como integrar
elementos necesarios para tener un buen posicionamiento en la red.
Con la modernidad cambiante y móvil, los sitios web también deben innovarse de acuerdo
a los requerimientos actuales. Hoy en día los dispositivos móviles son comunes y son los
más utilizados por los usuarios, por ello es necesario que los sitios web presenten
características de movilidad que permitan a esos usuarios verificar dichos sitios sin
complicaciones; es decir, de forma cómoda, como lo haría en una computadora de
escritorio o laptop. Por lo anterior, en esta unidad aprenderás a incorporar esta tecnología
a través de ejemplos para implementar en su desarrollo.
Propósitos
 Incorporar tecnología de diseño responsivo para que tus sitios web puedan verse
en todo tipo de dispositivos, que tengan un navegador como las tabletas, teléfonos
móviles o computadoras.
 Diseñar espacios atractivos que presenten mayor interacción con los usuarios y
movilidad de contenido.
Competencia específica
 Implementar frameworks para el desarrollo profesional de un sitio mediante

estándares de calidad.
 Implementar etiquetas de metadatos en un sitio web para el posicionamiento y
desarrollo profesional mediante las herramientas de marketing.

1. Diseño responsivo con bootstrap
El término Responsive Web Design se acuña en la búsqueda de soluciones web.

Concretamente la idea nació en el año 2008 cuando el consorcio W3C, en su
recomendación Mobile Web Best Practices (W3C, 2008), definió el concepto OneWeb, el
cual se basa en la idea de realizar un diseño web accesible desde cualquier dispositivo,
buscando que la experiencia del usuario se enriquezca. W3C (2008).
El concepto Responsive Web Design no depende únicamente de un código, sino que se

refiere a diseñar una visualización para el usuario donde el contenido es lo más
importante, y es esto lo que el diseñador debe tener cuenta. Este concepto aporta una
filosofía para afrontar el diseño de una página web. Todas estas características son las
principales razones de por qué el término Responsive Web Design está ganando
popularidad e importancia en nuestros días
Considerando que es necesario hacer un diseño responsivo, una de las herramientas de

desarrollo es bootstrap, cuyas características son las siguientes (Arias, 2013):
 Uso de Responsive Web Design. Permite la creación de web adaptable para
dispositivos como celulares y tabletas.
 Usa estándares para trabajar HTML5 y CSS3, lo que permite la adaptabilidad en
webs ya existentes.
 Permite integrar librerías fácilmente, como el Jquery de JS.
 Utiliza el lenguaje de hojas de estilo dinámico, lo cual permite un mayor
comportamiento a partir de variables y operaciones.
1.4. Clases y elementos de Bootstrap
La importancia de conocer y saber la aplicación de las clases radica en que, mediante

éstas, se determina en qué parte de la estructura del diseño del sitio se puede aplicar
cada una y poder obtener un mejor diseño responsivo debidamente distribuido en el sitio
que se esté desarrollando.
Las clases y elementos de Bootstrap se explican a continuación:
 La clase navbar-fixed-top: Esta clase hace que la barra de navegación se

mantenga en la posición de arriba de forma fija; aun cuando nos despleguemos
por la página de arriba hacia abajo ésta se mantendrá en la misma posición.
 El btn-navbar: Es usada por el nav responsivo para poder utilizar botones
dentro de la barra de navegación (la clase span class icon-bars son tres
barras que se observan en los botones).

 La clase nav-collapse: Indica el contenido que será desplegado dentro de la

barra de navegación responsiva.
 La clase navbar-form navbar-left: Esta clase genera una barra de
navegación posicionada del lado izquierdo del sitio.
 La clase nav navbar-nav navbar-right: Esta clase genera una barra de
navegación posicionada del lado derecho del sitio.
 La clase dropdown-toggle: Esta clase tiene un método sencillo para mostrar u
ocultar el menú desplegable.
 Clase dropdown-menu: Permite que el menú sea desplegable.
En el siguiente código se muestra un ejercicio de personalización del mismo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Programacion Web UNADMX</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="../grupo501/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap
.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.mi
n.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.m
in.js"></script>
<script language="JavaScript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">UNADMX</span>

<span class="icon-bar"> </span>

</button>
<a class="navbar-brand" href="#">D.S.</a>
</div>
<div class="collapse navbar-collapse" id="Ejemplo de barra

de navegación colapsada">
<ul class="nav navbar-nav">
<li class="active"> <a
href=”http://www.unadmexico.mx/index.php?option=com_content&view=article&
id=161&Itemid=655">Desarrollo de software <span class="sr-
only">(current)</span></a></li>
<li><a href="#">Programación Web</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-expanded="false">Menú
desplegable <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Unidad 1</a></li>
<li class="divider"></li>
<li><a href="#">Autorreflexiones</a></li>
<li><a href="#">Asignación a cargo del
faclitador</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control"
placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>


toggle="dropdown" role="button" aria-expanded="false">Menú
desplegable <span class="caret"></span></a>
<ul class="Unadmx" role="menu">
<li><a href="#">Desarrollo de software</a></li>
<li><a href="#">Programación web</a></li>
<li class="divider"> </li>
<li><a href="#">Liga separada</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Una vez editado, el código se observa de la siguiente forma:
Ejemplo de barra de navegación
Con estos ejemplos se expone un panorama general de lo que es Boostrap para integrar
todos los códigos que por defecto tiene el framework, mismos que podrás observar en la
página oficial de Bootstrap que actualmente está en la siguiente URL:
http://getbootstrap.com/getting-started/#examples
Cabe recordar que la finalidad de Bootstrap es que no se desarrolle tanto código, sino que
se tome el que ya se tiene predefinido y se adapte al diseño del sitio web.

1.1. Descarga e instalación de bootstrap
Para comenzar a trabajar con boostrap:

Lo primero que se debe realizar es su instalación.
Visualización de la Página de Bootstrap
Para esto es necesario consultar la siguiente dirección http://getbootstrap.com/ y

seleccionar la opción Download Bootstrap; al dar clic re-direccionará a otra página, que es
la siguiente:
Imagen menú de descarga de Boostrap
En la sección que dice Download Boostrap se selecciona y descarga un archivo en

formato .zip

Visualización de la carpeta descargada de Boostrap

Hay que descomprimir el archivo y anexarlo a la carpeta del proyecto donde se realizará
la programación del sitio web. Una vez realizado esto, quedará como se muestra en la
siguiente imagen:
Imagen del contenido de la carpeta de Boopstrap
Para entender cómo trabaja Bootstrap se realizará el primer ejemplo, que es el clásico
Hola Mundo, cuyo código desarrollado se expone a continuación:
Lo primero que se realizará es la estructura HTML, y para esto hay que crear un archivo
con nombre index.htm dentro de la carpeta del proyecto que previamente se ha
realizado, la cual contiene las carpetas descomprimidas, además del código fuente para
que las páginas se puedan ajustar al dispositivo donde se está desplegando el contenido

del sitio web.
Imagen de las carpetas de Bootstrap
El desarrollo del archivo index.html debe tener lo siguiente:

<HTML>
<HEAD>
<TITLE>Hola Mundo</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>
Cuando se guarda, se anexa dentro la carpeta de proyecto y se visualiza como aparece

en la siguiente imagen:

Imagen del contenido de la carpeta de Bootstrap
Posteriormente hay que abrir de nuevo el archivo y anexar en una META una etiqueta de
nombre VIEW PORT, esta etiqueta viewport permite definir el ancho, alto y escala del
área que utiliza el navegador para mostrar contenido, la cual es la siguiente:
<meta name=”viewport” content=”width=device-width, user-

scalable=no”>
En el caso de que se necesite dejar fijo el ancho y el alto del viewport, se pude usar el
número de pixeles que se quiere utilizar, o bien, se pueden usar las constantes device-
width y device height. Normalmente los desarrollos se hacen con estas constantes
en lugar de una ancho fijo; esto para que se pueda adaptar a cualquier ambiente donde
se quiera desplegar el contenido web.
Entonces, para nuestro ejemplo, quedaría de la siguiente forma, anexando la etiqueta

meta.

<head>
/>
scalable=no”>
</head>

<body>
<p1>Probando Bootstrap UNADMX</p1>
</body>
</html>
Una vez que agregamos la etiqueta META VIEWPORT hay que hacer referencia a la
carpeta CSS que está en la carpeta de proyecto para poder darle el estilo de bootstrap. Y
esto se realiza con la siguiente instrucción:

<head>
/>
scalable=no”>
<link rel="stylesheet" href="css/bootstrap.min.css"
</head>
<body>
</body>
</html>
Si se ejecuta en el navegador el archivo index.html que se creó, se desplegará el

contenido como se muestra en la siguiente imagen:
Ejemplo sencillo de bootstrap

En la siguiente tabla se describen las propiedades de la etiqueta META viewport.

Descripción
Propiedades
width La anchura de la ventana virtual del dispositivo.
device-width La anchura física de la pantalla del dispositivo.
height La altura de la "ventana virtual" del dispositivo.
device-height La altura física de la pantalla del dispositivo.
initial-scale El zoom inicial cuando se visita la página. 1.0 no tiene zoom.
minimum-scale La cantidad mínima que el visitante puede hacer zoom en la página.
1.0 no tiene zoom.
La cantidad máxima que el visitante puede hacer zoom en la página.
maximum-scale
1.0 no tiene zoom.
user-scalable Permite que al dispositivo acercar y alejar. Los valores son yes o no.
Propiedades de la etiqueta META Viewport. Safary Developer Library (2014)
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/
MetaTags.html
1.2. Uso de grids responsivos
A continuación se abordarán los clásicos GRIDS de Bootstrap, que son las rejillas que
utilizan la mayoría de los Frameworks. Bootstrap maneja 12 columnas; por regla del
framework siempre deben ser 12 o menos, pero nunca más de 12. Se codificará el primer
ejemplo y se agregarán las líneas de código que indica la página de Bootstrap desde
donde se descarga y se le da clic en el botón de copy, y se ingresarán pegándolas en el
header del index.html.

Líneas de código para los grids de Bootstrap

El código se observa de la siguiente forma:

<head>
/>
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
.min.css">
<script
n.js"></script>
<script
in.js"></script>
</head>
<body>
<h1>UNADMX</h1>
<p>Cambia el tamaño del navegador para que observes el
efecto.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col
tamaño -4</div>
<div class="col-sm-4" style="background-
color:lavenderblush;">.col- tamaño 4</div>
<div class="col-sm-4" style="background-color:lavender;">.
col tamaño -4</div>
</div>
</div>
</body>
</html>
Probando el desarrollo, si se redimensiona el navegador se puede ver el efecto de cómo

se va ajustando el contenido.

Ajuste de contenido en pantallas de distintos tamaños
Ahora lo que se va a realizar es anexar un botón en la primera fila del grid. Recordando
que el grid total es de 12, si se suman las que se anexaron al diseño, se obtienen 3 grids
de 4, y el total de 12.
Para activar un menú desplegable, hay que colocarlo dentro de un .btn-group y

proporcionar las clases necesarias para que el botón pueda desplegar los submenús. Las
clases que están dentro de Bootstrap son:
class="btn btn-default dropdown-toggle” para definir el tipo de botón, y la
clase class="dropdown-menu" para definir los submenús.
El desarrollo del código es el siguiente (y en negrita está la sección de código referente al
botón).


<head>
/>
scale=1">
.min.css">
<script
n.js"></script>
<script
in.js"></script>
</script>
</head>
<body>
<h1>UNADMX</h1>
<p>Cambia el tamaño del navegador para que observes el
efecto.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col
tamaño -4
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">Desarrolo de Software <span
class="caret"></span>
</button>
<li><a href="#">Programación Web</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Unadmx</a></li>

</ul>
</div>
</div>
<div class="col-sm-4" style="background-
color:lavenderblush;">.col- tamaño 4</div>
<div class="col-sm-4" style="background-color:lavender;">.
col tamaño -4</div>
</div>
</div>
</body>
</html>
Cuando se ejecuta el código, éste se muestra como la imagen siguiente:
Ejemplo de uso de Botones responsivos
Por último se desarrollará un formulario sencillo. Para ello se necesita anexar la clase
class="form-group" que está dentro de Bootstrap para hacer referencia a la
construcción del formulario y la clase “form-control”, que es la que permitirá
programar cada una de las cajas de texto y darle el formato de formulario. El código
desarrollado es el siguiente:

<head>
/>


scale=1">
.min.css">
<script
n.js"></script>
<script
in.js"></script>
</script>
</head>
<body>
<p1>Probando Bootstrap UnADMX</p1>
<div class="container">
<h2>Formulario básico UnADMX</h2>
<form role="form">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Ingresa Correo">
</div>
<label for="pwd">Contraseña:</label>
<input type="password" class="form-control" id="pwd"
placeholder="Ingresa Contraseña">
</div>
<div class="checkbox">
<label><input type="checkbox"> Recordar
contraseña</label>
</div>
default">Enviar</button>
</form>
</body>

Una vez escrito el código dentro de la carpeta del proyecto, al ejecutarlo en el navegador
es posible ver el diseño como se muestra a continuación:
Imagen de visualización del ejemplo Formulario básico
1.3. Navbar responsivo
Ahora veremos cómo hacer lo que se conoce como Navbar responsivo, y para esto es
necesario copiar el código predefinido que viene en la página oficial de Bootstrap en la
sección de componentes actualmente en la siguiente dirección:
http://getbootstrap.com/components/#navbar
Página de componentes de Bootstrap. http://getbootstrap.com/components/#navbar
Una vez ingresando a la URL es necesario buscar la sección de código correspondiente al

diseño de los Navbars.

Sección de código Navbars

A continuación se selecciona el botón que dice Copy (en la parte derecha), para pegar
en el editor que se esté utilizando para el desarrollo de las páginas web.
Es importante no olvidar que el encabezado de referencia a las carpetas de los archivos

de Bootstrap debe estar contenido dentro de la etiqueta de <head></head> de su
documento html; y la estructura del código se observará de la siguiente forma:

<head>
/>
scale=1">
<link rel="stylesheet" href="../grupo501/css/bootstrap.min.css">
.min.css">
<script
n.js"></script>
<script
in.js"></script>
</script>
</head>
<body>
<nav class="navbar navbar-default">

<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-
only">(current)</span></a></li>
toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<input type="text" class="form-control"
placeholder="Search">
</div>
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>

<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Si se ejecuta el código en el navegador web es posible observar la siguiente pantalla.
Imagen de ejecución del ejemplo Navbar
2. Herramientas de marketing
La mayoría de los negocios de cualquier tipo puede obtener muchos beneficios al tener un
sitio web en el cual se han integrado herramientas de marketing, sitio que hay que encajar
en el plan de marketing. La mayor parte de las personas a veces se enfocan
principalmente en el plan de sitio web para hacer ventas, sin embargo, la web es una
herramienta que abarca muchos aspectos tales como conseguir que las personas
encuentren el sitio o captar clientes potenciales. También es posible orientar a las
personas sobre cómo y qué comprar o en qué momento, es decir, aportar a una cultura
del consumo consciente y productivo. Por supuesto, si se construye bien el sitio web,
puede tener varias funciones, tales como:
 Una herramienta para poder posicionar nuestro sitio en los buscadores web.
 Para mejorar y difundir la imagen de la empresa u organización.
 Para educar a quienes tienen un negocio acerca de cómo desarrollarse en el
mercado. Para vender productos y servicios.
 Ser una herramienta de comunicación directa con los clientes.
Para revisar algunos conceptos de marketing, consulta el documento U3. Concepto de

marketing en los Materiales de desarrollo de la unidad.

Para revisar algunas características de calidad que se debe considerar al realizar un plan
de marketing, consulta el documento U3. Características de calidad en los Materiales de
desarrollo de la unidad.
2.1. El sitio web como herramienta de comunicación
Este último aspecto se está volviendo la norma, la herramienta de comunicación en vivo.

La comunicación debe incluir dos partes: en este caso, la empresa y el visitante. De esta
manera, el sitio se desarrolla desde ambos sitios, la empresa está involucrada con la
actualización y el cambio, y los visitantes están involucrados con la interacción en el
mismo sitio. Algunos tipos de interacción que se realizan en un sitio web son:
 Pedidos.
 Suscribirse a eventos o información.
 Al escuchar o ver el streaming de audio y video.
 Chat en vivo.
 Blogs, etcétera.
¿Cómo puede un sitio web atraer al cliente adecuado?

Esto depende de dos cosas:
Cómo se desarrolla el sitio.- Este punto es importante, ya que desde el desarrollo del
código se implementa la estructura para la localización del sitio utilizando las etiquetas
META para su búsqueda.
Si se conoce bien el mercado objetivo, desarrollar el sitio con esos usuarios en mente:
 Teniendo en cuenta la forma en que lo utilizará, explorar el sitio web.
 Cómo van a encontrar el sitio web de la organización.
 Lo que esperan ver / y qué harán cuando ingresen al sitio.
 Lo bien que pueden lograr las acciones que realizarán en el sitio.
Cómo se comercializa el propio sitio.- Para poder comercializar es importante utilizar
las herramientas de marketing que anteriormente habíamos comentado.
Si nadie sabe acerca de un sitio, éste va a ser ignorado por su mercado meta. Como un
ejemplo muy básico, si el negocio es la venta de casas, por supuesto, que se tendrá que
promocionar el sitio fuera de línea mediante la impresión y la comunicación de la URL en
todas partes, considerando principalmente a personas que están interesadas en conocer
el tipo de casas de turismo en el sitio.
También se querrá que se enumeren los resultados de los sitios web en los directorios
locales en Google y Yahoo (esto se hace en automático cuando se realiza la búsqueda
del sitio), y que encuentren los bienes raíces o palabras clave de origen, así como las
condiciones en el área. Apuntando al marketing en línea para el área de desarrollo, lo

que se necesita en este ejemplo no es tratar de encontrar una búsqueda para desplegar
los agentes inmobiliarios en Google, pues no tendría sentido, pero si se busca para los
agentes inmobiliarios en México, sería factible.
Elementos de un plan de marketing. Lamb, Hair y McDaniel (2011). p.36.
Para revisar en qué consiste el plan de marketing y cuáles son sus elementos, consulta el
documento U3. Plan de marketing, en los Materiales de desarrollo de la unidad.

2.2. Herramientas de marketing para el desarrollo de sitios web
Las herramientas de marketing se utilizan para poder posicionar los sitios en las
búsquedas que realizan los usuarios. Dependiendo de lo que el usuario solicite será lo
que el buscador le listará. Para esto hay que saber ocupar dichas herramientas, de modo
que el sitio que se esté desarrollando pueda encontrar lo que se requiere con cualquier
palabra de búsqueda.
Para revisar algunos aspectos importantes sobre el mercadeo web, revisa los textos U3.
Elementos de marketing, U3. Marketing online y U3. Recomendaciones de marketing para
el desarrollo de sitios web, en los Materiales de desarrollo de la unidad.
¿Cuánto cuesta un sitio web como una herramienta de marketing cada año?
Hay cuatro costos a considerar en el desarrollo y mantenimiento de un sitio:

 Costos de desarrollo (entre $ 10,000 y $20,000, cada 3-4 años en la actualidad;
datos aproximados).
 Hosting y cuotas mensuales (de $ 300 en adelante).
 La dotación de personal para mantenerlo (depende de la complejidad de las
instalaciones).
 Los costos de comercialización (si se contrata a una empresa, $ 3.600).
Otra opción para poder calcular el costo es utilizar una herramienta para poder hacerlo, la
cual se encuentra en la siguiente liga para mayor información de su uso:
www.montsepenarroya.com.
¿Cómo empezar a utilizar un sitio web como una herramienta de marketing?

 Definir el objetivo del sitio.
 Definir el mercado objetivo.
 Identificar un concepto único.
 Investigar sitios similares.
 Considerar características del sitio.
 Hacer un presupuesto para el sitio.
 Tener en cuenta la estrategia de marketing.
 Reunir contenido.
 Desarrolladores.
Para profundizar en estos temas se sugiere visitar el siguiente enlace: http://www.internet-

marketing.es/que-es-internet-marketing.html
Además de esto, hay que apoyarse en herramientas para que el sitio web se encuentre
bien posicionado. Algunas de estas herramientas son:

Semrush: Es una de las mejores herramientas de análisis. Las tendencias de búsqueda,

la competencia y dólares gastados por la competencia son algunos de los rasgos
distintivos de tomar las conjeturas de cualquier esfuerzo de marketing.
De la investigación de cómo los productos se anuncian para encontrar la mejor forma de
texto publicitario SEMrush es el compañero perfecto para un departamento de marketing
bien dirigido. SEMrush recopila cantidades masivas de datos SERP por más de 106
millones de palabras clave y cerca de 48 millones de dominios, incluyendo: AdWords
copias de anuncios y posiciones, posiciones orgánicas para dominios y direcciones URL
de destino, los volúmenes de búsqueda, CPC, la competencia, el número de resultados, y
con esto se realiza el análisis de mercadeo del sitio.
Opensite: Explorer: Esta herramienta permite analizar los sitios web de la competencia,
permite filtrar a nivel de página, subdominio o dominio, tipo de palabras clave utilizadas,
así como otras de métricas de popularidad y autoridad, ideal para poder realizar un
estudio de popularidad y enlaces competitivo.
(http://impulsandoelmarketingonline.com/seomoz-open-site-
explorer/#sthash.WsocsPzP.dpuf).
Google Adwords: Permite averiguar, además, la popularidad de las palabras clave y la

competencia que existe para ellas.
Google AdWords es una herramienta que sirve para cuando se desea atraer nuevos
visitantes al sitio web, aumentar las ventas en línea, hacer que lo llamen o incentivar a los
clientes a regresar por más.
Para conocer más a detalle los beneficios de la herramienta se recomienda consultar el

siguiente enlace: https://www.google.com.mx/adwords/
Xenu: Encuentra dominios caducados, además de escanear las páginas de tu

competencia y ver si tienen algún enlace saliente que esté caducado El programa hace un
listado de todos los enlaces salientes a dominios que ya no existen. Esto significa que la
página escaneada tiene, en algún sitio, un enlace que apunta a una web que caducó.
Esto nos sirve para poder utilizar dominios que ya no se utilizan y que, de alguna forma,
ya están posicionados, de modo que se puede aprovechar ese posicionamiento para
alojar nuestro sitio. Para conocer más a detalle esta herramienta se sugiere visitar su
página web, donde también está disponible la descarga de la aplicación.
http://miposicionamientoweb.es/como-conseguir-dominios-de-calidad/
Por ejemplo, si se instala Xenu y se anexa la liga de la UnADM se desplegará la lista de

los sitos que ya no están en uso, como se puede observar en la siguiente imagen:

Ejemplo de sitios caducado de la UnADM

Clicky: Sirve para poder visualizar el tráfico que se tiene en el sitio. Clicky tiene varias
características que ayudan a soportarlo, aparte de la competencia específica del espía y
los canales RSS que permiten a los propietarios de sitios web obtener información en
tiempo real acerca de los visitantes al sitio; es la inteligencia de tráfico en tiempo real
para el sitio web. Con Clicky activado, se entenderá de dónde provienen los visitantes al
sitio, cómo interactúan con su sitio, y hasta cierto punto quiénes son los visitantes al sitio.
Registros precisos de cada visitante, y combinado con herramientas de segmentación y
análisis avanzados, ayudan a tomar decisiones prudentes y, finalmente, controlar el
destino del sitio web. El sitio web de la aplicación es el siguiente:- http://clicky.com/
Sistrix: Esta herramienta sirve para poder analizar el tráfico que se tiene en el sitio web
durante un periodo de tiempo. Es importante conocerlo para poder realizar estadísticas de
visitas al sitio y poder tomar decisiones en cuanto a las herramientas de marketing y para
posicionar el sitio de modo que los visitantes lo ubiquen con cualquier palabra de
búsqueda. Sistrix es un servicio para la optimización de sitios web con palabras clave, ya
que proporciona herramientas para propietarios de sitios web para aumentar el tráfico a
sus sitios. La API Sistrix permite a los desarrolladores acceder e integrar la funcionalidad
de Sistrix con otras aplicaciones.
Para poder conocer los beneficios y características de la herramienta hay que ingresar al
sitio web de la aplicación, el cual se encuentra en la siguiente liga.-http://www.sistrix.com/
Herramientas email marketing
Awebern: Esta herramienta se utiliza para poder generar formularios de registro y

gestionar el envío automático de correo electrónico para los clientes. Permite tanto crear
como incrustar el formulario.
Muchos de sus diseños son realmente sencillos, pero hay muchos que son buenos. Lo
más importante es que se puede personalizar con un editor visual y luego incrustar el
formulario que acaba de crear en el sitio web.
Mailchimp: Sirve para enviar un mensaje de correo electrónico a los clientes, utiliza un
formulario HTML incrustado para recoger suscripciones de correo electrónico para las
campañas de boletines y promociones que se quieran enviar por correo electrónico.
El sitio web de esta herramienta está disponible en el sitio. www.mailchimp.com/
Revisa algunas recomendaciones de desarrollo de sitios web en los siguientes

documentos U3. Estándares de lenguaje de marcaje, U3. Posicionamiento, U3. Contrato
de un dominio en los Materiales de desarrollo de la unidad.

Cierre de la unidad
El diseño web responsivo es claramente una solución eficaz con el fin de ofrecer una
experiencia confortable al usuario. Es una evolución del diseño web que despierta el
interés a los diseñadores en un nuevo desafío ergonómico y asegura a los usuarios una
experiencia enriquecida. En cuanto a los inconvenientes de esta técnica, se solucionan a
nivel del diseño y a nivel del desarrollo del sitio web.
Es necesario identificar las diversas alternativas para el desarrollo de sitios web, pues
existen una diversidad de sitios alternativos móviles que dirigen a los visitantes en
posesión de un celular o tableta hacia el sitio móvil o a aplicaciones móviles que, aunque
son mejores para controlar la experiencia del usuario, son bastante costosas de
desarrollar y no permiten una indexación óptima.
Para saber más
Para reafirmar los temas de esta unidad, te invito a revisar los siguientes recursos que
muestran ejemplos y ejercicios clave para usar Bootstrap:
http://aprendiendoando.com/bootstrap-clase-1-introduccion
Para descargar los archivos de instalación de Bootstrap debes ingresar al siguiente URL:
 http://getbootstrap.com/
Para descargar el Sublime Text3 e instalar en tu equipo, debes ingresar al siguiente URL:
 http://www.sublimetext.com/3
Para conocer algunos estándares de desarrollo de páginas web, revisa los siguientes
sitios.
 http://www.w3.org/TR/IndexedDB/
 CSS3 HTML5 http://html5.dwebapps.com/html5-llega-a-su-estado-de-

recomendacion-del-w3c/
Algunas recomendaciones de marketing las podrás consultar en los siguientes sitios:

 http://www.estudioseijo.com/noticias/el-plan-de-marketing-24-crear-un-sitio-web-
enfocado-a-los-objetivos.htm
 http://www.estudioseijo.com/noticias/el-plan-de-marketing-14-definiendo-los-
objetivos-de-mi-empresa.htm

Fuentes de consulta
 Arias, M.A. (2014). Responsive design. Desarrolla webs sensitivas con Bootstrap.
Create Space Independent Publishing Platform.
 Kroenke, D.M. (2003). Procesamiento de bases de datos. Fundamentos, diseño e

implementación. pp. (415-418). México: Pearson Educación.
 Lamb, C.W., Hair, J.F. jr., y McDaniel, C. (2011). Marketing. p. 35-39. México:
CENGAGE Learning.
 LibrosWEB (2014). Tutoriales: Bootstrap 3. Recuperado de

http://librosweb.es/bootstrap_3/
 Maciá, F. (2013). Marketing Online 2.0. Cómo atraer y fidelizar clientes en Internet.
España: Anaya Multimedia.
 Moro M.y Rodés A. (2014). Marketing digital. (1ª Edición, Versión electrónica).
España: Paraninfo.
 RAE (2015). Mercadotecnia. Recuperado de

http://buscon.rae.es/drae/srv/search?id=7QIBsQPUWDXX2DkU0tIg
 Rojo, A. (s.f.). Responsive Design con Bootstrap. (2ª Edición, Versión electrónica).
México: Kindle Amazon.
 W3C (2008). Mobile Web Best Practices 1.0. Recuperado de

http://www.w3.org/TR/mobile-bp/

Software 10

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

Software 10

Cargado por

Copyright:

Formatos disponibles

Programación web II

Unidad 3. Diseño web profesional

Ingeniería en Desarrollo de Software

Unidad 3. Diseño web profesional

Universidad Abierta y a Distancia de México

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 1

Unidad 3. Diseño web profesional...................................................................................... 3

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 2

Unidad 3. Diseño web profesional

Bienvenidos a esta tercera unidad de la asignatura Programación web II, en la que se

 Implementar frameworks para el desarrollo profesional de un sitio mediante

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 3

1. Diseño responsivo con bootstrap

El término Responsive Web Design se acuña en la búsqueda de soluciones web.

El concepto Responsive Web Design no depende únicamente de un código, sino que se

Considerando que es necesario hacer un diseño responsivo, una de las herramientas de

1.4. Clases y elementos de Bootstrap

La importancia de conocer y saber la aplicación de las clases radica en que, mediante

Las clases y elementos de Bootstrap se explican a continuación:

 La clase navbar-fixed-top: Esta clase hace que la barra de navegación se

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 4

 La clase nav-collapse: Indica el contenido que será desplegado dentro de la

En el siguiente código se muestra un ejercicio de personalización del mismo:

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 5

<span class="icon-bar"> </span>

<div class="collapse navbar-collapse" id="Ejemplo de barra

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 6

<a href="#" class="dropdown-toggle" data-

Una vez editado, el código se observa de la siguiente forma:

Ejemplo de barra de navegación

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 7

1.1. Descarga e instalación de bootstrap

Para comenzar a trabajar con boostrap:

Visualización de la Página de Bootstrap

Para esto es necesario consultar la siguiente dirección http://getbootstrap.com/ y

Imagen menú de descarga de Boostrap

En la sección que dice Download Boostrap se selecciona y descarga un archivo en

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 8

Visualización de la carpeta descargada de Boostrap

Imagen del contenido de la carpeta de Boopstrap

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 9

del sitio web.

Imagen de las carpetas de Bootstrap

El desarrollo del archivo index.html debe tener lo siguiente:

Cuando se guarda, se anexa dentro la carpeta de proyecto y se visualiza como aparece

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 10

Imagen del contenido de la carpeta de Bootstrap

<meta name=”viewport” content=”width=device-width, user-

Entonces, para nuestro ejemplo, quedaría de la siguiente forma, anexando la etiqueta

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<link rel="stylesheet" href="css/bootstrap.min.css"

Si se ejecuta en el navegador el archivo index.html que se creó, se desplegará el

Ejemplo sencillo de bootstrap

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 12

En la siguiente tabla se describen las propiedades de la etiqueta META viewport.

1.2. Uso de grids responsivos

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 13

Líneas de código para los grids de Bootstrap

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 14

El código se observa de la siguiente forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"