Parte01 Manual Diseño Web

SUASNBAR TERREL, JAIME
HUANCAYO - PER
2017
APLICACIONES MVILES Y WEB
AUTOR:
Reservado todos los derechos
EDITOR:

Direccin: Jr.Junin 130 El Tambo
Email: jsuasnabar2000@hotmail.com
Publicacin.
Primera Edicin, abril 2017
Compiled by: Mg. Jaime Suasnbar Terrel

INGENIERA DE SISTEMAS
FORMACIN ESPECIALIZADA
Competencia de la Asignatura
La asignatura corresponde al rea de Formacin Especializada

(Implementacin) siendo de carcter terico-prctico. Se propone
desarrollar la implementacin de sistemas de informacin. Abarca
los siguientes aspectos: fundamentos de la tecnologa mvil y
web; lenguaje y arquitectura; metodologas para el desarrollo de
aplicaciones mviles y web
Competencia y capacidades
COMPETENCIA GENERAL CAPACIDADES

Explica los fundamentos de las
aplicaciones Web y Mviles.
Implementa pginas web utilizando
Implementa aplicaciones web y
HTML y HTML5.
aplicaciones para dispositivos
Implementa aplicaciones web
mviles.
utilizando PHP y MySql.
Implementa aplicaciones mviles
utilizando Android.

Podemos definir a Internet como una "red de redes", es decir, una red que no slo
interconecta computadoras, sino que interconecta redes de computadoras entre s.
Una red de computadoras es un conjunto de mquinas que se comunican a travs de
algn medio (cable coaxial, fibra ptica, radiofrecuencia, lneas telefnicas, etc.) con el
objeto de compartir recursos.
De esta manera, Internet sirve de enlace entre redes ms pequeas y permite ampliar su
cobertura al hacerlas parte de una "red global". Esta red global tiene la caracterstica de
que utiliza un lenguaje comn que garantiza la intercomunicacin de los diferentes
participantes; este lenguaje comn o protocolo (un protocolo es el lenguaje que utilizan
las computadoras al compartir recursos) se conoce como TCP/IP.
As pues, Internet es la "red de redes" que utiliza TCP/IP como su protocolo de
comunicacin.
Internet es un acrnimo de INTERconected NETworks (Redes interconectadas).
Para otros, Internet es un acrnimo del ingls INTERnational NET, que traducido al
espaol sera Red Mundial.
En Ingls website o web site, un sitio Web es un sitio (localizacin) en la World Wide Web
que contiene documentos (pginas Web) organizados de forma jerrquica. Cada
documento (pgina Web) contiene texto o grficos que aparecen como informacin
digital en la pantalla de un ordenador. Un sitio puede contener una combinacin de
grficos, texto, audio, video y otros materiales dinmicos o estticos.
Cada sitio Web tiene una pgina de inicio (en Ingls Home Page), que es el primer
documento que ve el usuario cuando entra en el sitio Web poniendo el nombre del
dominio de ese sitio Web en un navegador. El sitio normalmente tiene otros documentos
(pginas Web) adicionales. Cada sitio pertenece y es gestionado y por un individuo, una
compaa o una organizacin.
Como medio, los sitios Web son similares a las pelculas, a la televisin o a las revistas, en
que tambin crean y manipulan imgenes digitales y texto, pero un sitio Web es tambin
un medio de comunicacin. La diferencia principal entre un sitio web y los medios
tradicionales es que un sitio Web est en una red de ordenadores (Internet) y est
codificado de manera que permite que los usuarios interacten con l. Una vez en un sitio

Web, puedes realizar compras, bsquedas, enviar mensajes y otras actividades
interactivas.
A veces se utiliza errneamente el trmino pgina Web para referirse a sitio Web.
Una pginaWeb es parte de un sitio Web y es un nico archivo con un nombre de archivo
asignado, mientras que un sitio Web es un conjunto de archivos llamados pginas Web.
Si lo comparramos con un libro, un sitio Web sera el libro entero y una pgina Web de
ese sitio Web sera un captulo de ese libro. El ttulo del libro sera el nombre del dominio
del sitio Web. Un captulo, al igual que una pgina Web, tiene un nombre que lo define.
Decimos que sera un captulo y no una pgina del libro porque a menudo es necesario
desplazarse hacia bajo en la pantalla para ver todo el contenido de una pgina Web, al
igual que en un libro te desplazas a travs de varias pginas para ver todo el contenido de
un captulo. El ndice de los captulos del libro sera el equivalente al mapa del sitio Web
(sitemap en Ingls).
Los URL fueron una innovacin fundamental en la historia de la Internet. Fueron usadas
por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos
establecer hiperenlaces en la World Wide Web (WWW o Web). Desde 1994, en los
estndares de la Internet, el concepto de URL ha sido incorporado dentro del ms general
de URI (Uniform Resource Identifier - Identificador Uniforme de Recurso), pero el trmino
URL an se utiliza ampliamente.
URL son las siglas de Localizador de Recurso Uniforme (en Ingls Uniform Resource
Locator), la direccin global de documentos y de otros recursos en la World Wide Web.
La primera parte de la direccin indica qu protocolo utilizar, la segunda parte especifica
la direccin IP o nombre de dominio donde se localiza el recurso.
URL significa Uniform Resource Locator, es decir, localizador uniforme de recurso. Es una
secuencia de caracteres, de acuerdo a un formato estndar, que se usa para nombrar
recursos, como documentos e imgenes en Internet, por su localizacin. Por ejemplo, las
dos URL de abajo apuntan a dos archivos diferentes en el dominio tengodeudas.com. La
primera especifica un fichero ejecutable que se debe encontrar usando el protocolo FTP;
la segunda especifica una pgina Web que se debe abrir usando el protocolo HTTP:
Los navegadores son los sistemas utilizados para conectarnos a la World Wide Web y
acceder a los recursos almacenados en los servidores web.

Cuando escribimos una direccin web, el navegador establece una conexin con el
servidor web a travs del protocolo HTTP (HyperText Transfer Protocol). Teniendo esto
claro, podemos pasar a decir que una URL sera el nombre con el que se asocian a las
direcciones web.
Cuando escribimos una URL, por ejemplo:
"http://www.dominio.com/index.html", el navegador interpreta tres partes:
HTTP (protocolo)
www.dominio.com (nombre del servidor)
index.html (nombre del archivo especificado)
HTTP es un protocolo de transferencia de hipertexto que se usa en la Web.
HTTP es una sigla que significa HyperText Transfer Protocol, o Protocolo de Transferencia
de Hipertexto. Este protocolo fue desarrollado por las instituciones internacionales W3C
y IETF y se usa en todo tipo de transacciones a travs de Internet.
Este protocolo opera por peticin y respuesta entre el cliente (navegador) y el servidor. A
menudo las peticiones tienen que ver con archivos, ejecucin de un programa, consulta a
una base de datos, traduccin y otras funcionalidades. Toda la informacin que opera en
la Web mediante este protocolo es identificada mediante el URL o direccin.
Web 2.0 es un concepto que se acu en 2003 y que se refiere al fenmeno social surgido
a partir del desarrollo de diversas aplicaciones en Internet. El trmino establece una
distincin entre la primera poca de la Web (donde el usuario era bsicamente un sujeto
pasivo que reciba la informacin o la publicaba, sin que existieran demasiadas
posibilidades para que se generara la interaccin) y la revolucin que supuso el auge de
los blogs, las redes sociales y otras herramientas relacionadas.
La Web 3.0 es un trmino que no termina de tener un significado ya que varios expertos
han intentado dar definiciones que no concuerdan o encajan la una con la otra pero que,
en definitiva, va unida a veces con la Web Semntica.
En lo que a su aspecto semntico se refiere, la Web 3.0 es una extensin del World Wide
Weben el que se puede expresar no slo lenguaje natural, tambin se puede utilizar un

lenguaje que se puede entender, interpretar utilizar por agentes software, permitiendo
de este modo encontrar, compartir e integrar la informacin ms fcilmente.
El termino se acuo en 2001 en un artculo cientfico escrito por American Boauthored
Berners-Lee en el que se describa el trmino como lugar en el cual las mquinas pueden
leer pginas Web con la misma facilidad con la que los humanos lo hacemos.
Otros de los trminos que se han utilizado para definir la Web 3.0 hacen referencia a la
transformacin de la Web en una base de datos, un movimiento hacia la fabricacin de
contenido accesible para mltiples buscadores, la influencia de la Inteligencia Artificial, la
Web Semntica o la Web geoespacial.
La Web 3.0 y sus servicios se fundamentan en el colectivo de la Web Semntica,
bsquedas de lenguaje natural, data-mining, aprendizaje automtico y asistencia de
agentes, todo ello conocido como tcnicas de la Inteligencia Artificial o Inteligencia Web.
De acuerdo a algunos expertos, la Web 3.0 est caracterizada y aprovisionada por la
acertada unin de la Inteligencia Artificial y la Web, mientras que algunos expertos han
definido la Web 3.0 como el siguiente paso en la progresin de las tubers que conforman
Internet
En la actualidad est en boca de todos la Web 3.0 pero, en realidad de qu se trata, qu

tecnologas esconde detrs este trmino y, qu diferencias, si hay alguna, existen entre
las distintas versiones que pueden encontrarse de la Web.
Pese a no ser un trmino acuado por informticos, durante los ltimos aos Web 2.0 ha
ido cogiendo ms y ms fuerza, hasta que ya no nos es raro ver como la mitad de los blogs,
foros y pginas de Internet en general hablan de ella como si hubiese existido desde
siempre.
Da a da la tecnologa avanza, y la Web con ella ha ido progresando ao tras ao. Las
redes sociales ya no son ninguna novedad para nadie, las pginas Web hace tiempo que
dejaron de ser meros escaparates a los que ir a ver catlogos de productos, el dinamismo
en la Web es total y las aplicaciones han abandonado el escritorio de nuestros
ordenadores para lanzarse a Internet en forma de herramientas colaborativas.
Y es justo en la cspide de todo ste movimiento donde nace la Web 3.0. La imaginacin
nos permite creer en pginas, visibles desde los espejos de nuestros cuartos de bao,
capaces de recorrer la Web en busca de pginas de noticias y mostrarnos un resumen de
las noticias ms importantes de cada una.

En definitiva, de eso trata la Web 3.0, de pginas capaces de comunicarse con otras
pginas mediante procesamiento de lenguaje natural y, es justo aqu cuando cobra
sentido el nexo entre la Web Semntica y la Web 3.0. sta es la principal interpretacin
que se hace de ste trmino.
Definir toda esta informacin sobre la Web 3.0 ser el fin de la presente pgina, as como
intentar explicar un por qu de la aparicin de este nuevo espacio dentro del World Wide
Web.
La Web Semntica es la nueva generacin de la Web, que intenta realizar un filtrado

automtico preciso de la informacin. Para ello, es necesario hacer que la informacin
que reside en la Web sea entendible por las propias mquinas. Especialmente su
contenido, ms all de su simple estructura sintctica.
Con lo cual, podemos determinar que la Web Semntica trata sobre diferentes mbitos,
por un lado es un conjunto de lenguajes y procedimientos para poder aadir esa
semntica a la informacin para que sea entendible por los agentes encargados de
procesarla. Y por el otro lado trata, el desarrollo y la construccin de los agentes
encargados de procesar esa informacin y filtrar la que es til para los usuarios o para
agentes que tienen que realizar una determinada funcin.
Con este fin, los agentes deben recuperar y manipular la informacin pertinente, lo que
requiere una integracin sin fisuras con la Web y aprovechar totalmente las
infraestructuras existentes.
Al dotar a la Web por lo tanto, de semntica, se pueden obtener soluciones a problemas
habituales en la bsqueda de informacin gracias a la utilizacin de una infraestructura
comn, mediante la cual, es posible compartir, procesar y transferir informacin de forma
sencilla.
Como punto adicional, la Web Semntica tambin trata la forma en la cual se
implementan servicios web fiables e interoperables a gran escala, creando una web de
servicios interpretables e interoperables que agentes inteligentes puedan descubrir,
ejecutar y componer automticamente
Ejemplos de la Web 2.0 y 3.0 podemos encontrar en internet, los que se ilustra en los
siguientes grficos.

Como diseadores o desarrolladores web, cuando nos enfrentamos a un nuevo proyecto
con un cliente es de vital importancia lograr una buena comunicacin con el cliente y
detectar realmente sus necesidades pero esto es un problema cuando en algunos casos
el cliente no sabe lo que necesita realmente o no puede explicarlo de manera adecuada.
Para evitar el tener que volver atrs en nuestros proyectos y para mostrarle al cliente una
mejor visualizacin del proyecto, nace la idea de los mockups, maquetas o wireframes.
Un wireframe bsicamente es un boceto bsico y de baja calidad del desarrollo de una

pgina web o el diseo de una interfaz, la finalidad de este es el mostrar al cliente un
diseo o boceto rpido y facilitar la comunicacin entre cliente y desarrollador.
El wireframe tiene como objetivo proporcionar la visualizacin del diseo o las

funcionalidades de un site o incluso una App de manera netamente referencial y poder
definir objetivos en una etapa temprana del proyecto, incluso hacer modificaciones de
manera rpida, para evitar hacer estos cambios sobre un site o diseo real, nadie quiere
que un cliente le cambie el diseo web cuando este ya est maquetado o s?

Existen una variedad de software que nos permite crear estos tipos de wireframes, a
continuacin enunciamos algunos:
Sitio web: http://www.balsamiq.com/products/mockups

Otro software
Sitio web: https://gomockingbird.com/
Sitio web: http://lovelycharts.com/

Sitio web: http://www.mockflow.com/
Sitio web: http://www.gliffy.com/uses/wireframe-software/

En el caso de wireframes para el diseo de interfaces de dispositivos mviles o
aplicaciones mviles (APPS). Tambin contamos con algunas herramientas que nos
permiten crear estos bocetos y usarlos como referencia en un proyecto para nuestro
cliente, son:
Sitio web: http://iphonemockup.lkmc.ch/

Sitio web: http://www.balsamiq.com/products/mockups
Wireframe CC (Online, este nos permite realizar wireframes dispositivos mviles como
tabletas, celulares, y tambin el monitor de un ordenador)
Sitio web: http://wireframe.cc/

Aunque no parezca, las aplicaciones llevan tiempo entre nosotros. Antes de empezar a
disearlas, queremos que las conozcas: Cules son sus tipos y caractersticas? Qu
diferencias hay entre ellas y con una web mvil?
Las aplicaciones tambin llamadas apps estn presentes en los telfonos desde hace
tiempo; de hecho, ya estaban incluidas en los sistemas operativos de Nokia o Blackberry
aos atrs. Los mviles de esa poca, contaban con pantallas reducidas y muchas veces
no tctiles, y son los que ahora llamamos feature phones, en contraposicin a los
smartphones, ms actuales.
En esencia, una aplicacin no deja de ser un software. Para entender un poco mejor el
concepto, podemos decir que las aplicaciones son para los mviles lo que los programas
son para los ordenadores de escritorio.
Actualmente encontramos aplicaciones de todo tipo, forma y color, pero en los primeros
telfonos, estaban enfocadas en mejorar la productividad personal: se trataba de
alarmas, calendarios, calculadoras y clientes de correo.
Hubo un cambio grande con el ingreso de iPhone al mercado, ya que con l se generaron
nuevos modelos de negocio que hicieron de las aplicaciones algo rentable, tanto para
desarrolladores como para los mercados de aplicaciones, como App Store, Google Play y
Windows Phone Store.
Al mismo tiempo, tambin mejoraron las herramientas de las que disponan diseadores
y programadores para desarrollar apps, facilitando la tarea de producir una aplicacin y
lanzarla al mercado, incluso por cuenta propia.

El mercado de las aplicaciones mviles no para de crecer. Son muchas las empresas que
no quieren dejar pasar la oportunidad de unirse a este negocio y crear una aplicacin que
de respuesta a sus necesidades. Sin embargo, la mayora desconocen qu tipos de
aplicaciones mviles existen y cul es la mejor para ellos, definimos en profundidad qu
tipos de aplicaciones mviles a continuacin.
Una aplicacin nativa es la que se desarrolla de forma especfica para un determinado

sistema operativo, utilizando un Software Development Kit o SDK. Cada una de las
plataformas, Adroid, iOS o Windows Phone, tienen un sistema diferente, por lo que si
quieres que tu app est disponible en todas las plataformas se debern de crear varias
apps con el lenguaje del sistema operativo seleccionado.
Por ejemplo:
Las apps para iOS se desarrollan con lenguaje Objective-C
Las apps para Android se desarrollan con lenguaje Java
Las apps en Windows Phone se desarrollan en .Net
Cuando hablamos de desarrollo mvil casi siempre nos estamos refiriendo a aplicaciones
nativas. La principal ventaja con respecto a los otros dos tipos, es la posibilidad de acceder
a todas las caractersticas del hardware del mvil: cmara, GPS, agenda, dispositivos de
almacenimiento y otras muchas. Esto hace que la experiencia del usuario sea mucho ms
positiva que con otro tipo de apps.
Adems las aplicaciones nativas no necesitan conexin a internet para que funcionen.
La descarga e instalacin de estas apps se realiza siempre a travs de las tiendas de
aplicaciones (app store de los fabricantes). Esto facilita el proceso de marketing y
promocin que explicaremos en prximos posts y que es vital para dar visibilidad a una
app.

Una aplicacin web o webapp es la desarrollada con lenguajes muy conocidos por los
programadores, como es el HTML, Javascript y CSS. La principal ventaja con respecto a la
nativa es la posibilidad de programar independiente del sistema operativo en el que se
usar la aplicacin. De esta forma se pueden ejecutar en diferentes dispositivos sin tener
que crear varias aplicaciones. Las aplicaciones web se ejecutan dentro del propio
navegador web del dispositivo a travs de una URL. Por ejemplo en Safari, si se trata de la
plataforma iOS. El contenido se adapta a la pantalla adquiriendo un aspecto de
navegacin APP.
Puede considerarse esto una APP? En realidad la gran diferencia con una aplicacin
nativa (adems de los inconvenientes que se muestran en la tabla) es que no necesita
instalacin por lo que no pueden estar visibles en app store y la promocin y
comercializacin debe realizarse de forma independiente. De todas formas se puede crear
un acceso directo que sera como instalar la aplicacin en el dispositivo.
Las apps web mviles son siempre una buena opcin si nuestro objetivo es adaptar la web
a formato mvil.
Una aplicacin hbrida es una combinacin de las dos anteriores, se podra decir que
recoge lo mejor de cada una de ellas. Las apps hbridas se desarrollan con lenguajes
propios de las webabpp, es decir, HTML, Javascript y CSS por lo que permite su uso en
diferentes plataformas, pero tambin dan la posibilidad de acceder a gran parte de las

caractersticas del hardware del dispositivo. La principal ventaja es que a pesar de estar
desarrollada con HTML, Java o CSS, es posible agrupar los cdigos y distribuirla en app
store. PhoneGap es es uno de los frameworks ms utilizados por los programadores para
el desarrollo multiplataforma de applicaciones hbridas. Otro ejemplo de herramienta
para desarrollar apps hbridas es Cordova.
Las aplicaciones comparten la pantalla del telfono con las webs mviles, pero mientras
las primeras tienen que ser descargadas e instaladas antes de usar, a una web puede
accederse simplemente usando Internet y un navegador; sin embargo, no todas pueden
verse correctamente desde una pantalla generalmente ms pequea que la de un
ordenador de escritorio.
Las que se adaptan especialmente a un dispositivo mvil se llaman web responsivas y

son ejemplo del diseo lquido, ya que se puede pensar en ellas como un contenido que
toma la forma del contenedor, mostrando la informacin segn sea necesario. As,
columnas enteras, bloques de texto y grficos de una web, pueden acomodarse en el
espacio de una manera diferente o incluso desaparecer de acuerdo a si se entra desde
un telfono, una tableta o un ordenador.

1. La estrategia para obtener beneficios de una aplicacin
a) Es independiente del sistema operativo y plataforma adoptada, porque en todos los
casos el comportamiento de los usuarios es muy similar.
b) Debe basarse en cobrar un precio por la descarga de la aplicacin.
c) Debe basarse en la publicidad porque los usuarios de dispositivos mviles no estn
acostumbrados a pagar por sus descargas.
d) Debe orientarse segn un anlisis previo del perfil de los potenciales usuarios,
porque puede haber variaciones significativas.
e) Debe dirigirse a aquellas plataformas donde hay un mayor porcentaje de usuarios
que paga por sus aplicaciones o es influido por la publicidad.
2. La tipologa de las aplicaciones ms populares se caracteriza por:
a) La uniformidad respecto a nivel mundial y por sistemas operativos.
b) La existencia de ligeras variaciones geogrficas, y ms notables por sistema
operativo.
c) El predominio absoluto de los juegos.
3. La evolucin del panorama de los sistemas operativos para mviles se caracteriza
por
a) Su estabilidad, con el mismo par de sistemas operativos dominando
tradicionalmente el mercado.
b) El predominio de Android e iOS desde antes de la llegada de los smartphones.
c) Su permanente evolucin.
4. En qu generacin aparecen los mensajes cortos de texto (SMS)?
a) 0G.
b) 1G.
c) 2G.
d) 2.5G.
e) 3G.
f) 3.5G.
5. Los usuarios de qu plataforma se muestran ms propensos a comprar aplicaciones
y son ms receptivos a la publicidad en ella?
a) Android
b) iOS
c) No existen diferencias significativas entre estas plataformas (Android e iOS).

6. Cul de las siguientes plataformas de desarrollo no es nativa?
a) Blackberry
b) Firefox OS
c) iOS SDK
d) Symbian
e) Windows Mobile
7. En qu generacin se deja de utilizar la conmutacin basada en circuitos para voz?
a) 0G.
b) 1G.
c) 2G.
d) 2.5G.
e) 3G.
f) 3.5G.
g) 4G.
8. En qu generacin se comienza a usar telefona digital?
a) 0G.
b) 1G.
c) 2G.
d) 2.5G.
e) 3G.
f) 3.5G.
g) 4G.
9. El panorama actual de las plataformas de desarrollo se caracteriza por
a) El predominio de las plataformas nativas, que son las nicas aptas para los
smartphones.
b) Las aproximaciones multi-plataforma se basan en el uso de tecnologas web.
c) La coexistencia de propuestas nativas y multi-plataforma, cada una de ellas con sus
propias ventajas e inconvenientes.
d) Android e iOS son las dos plataformas de desarrollo nativas existentes.
10. Qu se puede fomentar a travs de las herramientas web?
a) Discusiones, irresponsabilidad, libertad
b) Debate, compromiso, responsabilidad
c) Nada
d) Todas las anteriores

11. Las herramientas web no ofrecen espacios on-line para la publicacin de contenidos.
a. Verdadero
b. Falso
12. Las herramientas web pueden mejorar las competencias digitales realizando
bsquedas, comunicndose y procesando la
13. Las herramientas web permiten generar un enfoque poco comunicativo y un

aprendizaje pasivo y experiencial.
a. Verdadero
b. Falso
14. El "aprendizaje 2.0", se basa en los contenidos generados por el usuario y la

arquitectura de
15. El aprendizaje 2.0 permite que los estudiantes y docentes puedan aprender:
Haciendo
a. Interactuando
b. Buscando
c. Todas las anteriores
16. No es quien ensea, sino quien facilita, promueve, gua y acompaa en el

aprendizaje del discente en la actualidad ese es el
17. El profesor 2.0 tiene temor de apropiarse de las nuevas tecnologas?

a. Verdadero
b. Falso
18. Qu es necesario para que el docente aplique correctamente las herramientas web
colaborativas?
a. Documente y las conozca bien
c. Analice sus ventajas
d. No usar computadoras
e. Todas las anteriores

1. Ingresar a Internet con un buscador y localizar 03 sitios web para computadoras
cuyas caractersticas le parezcan a usted excelente y de calidad.
2. En un papel dibujar los 03 mockups del home page de los 03 sitios web
seleccionados para computadoras.
3. Utilizando el software balsamiq dibujar los 03 mockups del home page de los 03
sitios web seleccionados para computadoras.
4. Ingresar a Internet con un buscador y localizar 03 sitios web para mvil cuyas
caractersticas le parezcan a usted excelente y de calidad.
5. En un papel dibujar los 03 mockups del home page de los 03 sitios web
seleccionados para mvil.
6. Utilizando el software balsamiq dibujar los 03 mockups del home page de los 03
sitios web seleccionados para mvil.

Una pgina web es un archivo de texto sin formato, que contiene unos cdigos (tags) que
forman parte del denominado lenguaje HTML. Estos cdigos determinan cmo el
contenido del documento se presenta en el browser (navegador: Internet Explorer o
Mozilla Firefox).
Asimismo, En el mercado existen varios programas Editores de pginas HTML que son de
libre distribucin (Freeware) o que tienen unos das de prueba (Shareware) que facilitan
enormemente el trabajo de diseo. Tambin los ltimos procesadores de textos incluyen
una opcin de guardar el documento en formato .HTM
Toda pgina web tiene la siguiente estructura:
<HTML> </HTML> Marcan el inicio y final de la pgina web.

<HEAD> </HEAD> Marca el inicio y final de la seccin del encabezado de la pgina web.
<BODY> </BODY> Marca el inicio y final de la seccin del cuerpo de la pgina web.
Necesitas al menos tener un programa navegador de Internet (por ejemplo: Internet

Explorer de Microsoft, Google Crhome o Mozilla Firefox).
Block de Notas o cualquier procesador de texto que permita guardar texto sin formato
ASCII (texto). Tus pginas siempre debes guardar con extensin ".HTM".
Cargar tu sitio. Si deseas poner tus pginas de HTML en Internet, necesitars un programa
de transmisin de archivos FTP para realizar el upload a tu servidor web (por ejemplo
WS_FTP, Cute_FTP, etc). Debers de tener en cuenta los siguientes detalles para instalar
en Internet tus archivos de pginas web:

El nombre de la pgina de inicio ha de ser index.html en servidores apache y
default.html en servidores IIS Internet Information Service
Poner todos los nombres de archivos en minsculas para evitar luego errores.
El resto de los archivos de pginas pueden tener cualquier nombre y como extensin
debe ser o .htm o .html
1. Crear una carpeta de trabajo donde se guardarn tus pginas web.

2. Iniciar el Block de Notas o similar.
3. Sin cerrar dicho programa arrancar un programa navegador (por ejemplo:
IExplorer o Mozilla Firefox).
4. Ingresar el cdigo correspondiente a la pgina web en el Block de Notas o similar.
Una vez concluido guardar (en la carpeta creada anteriormente) con extensin
.htm o .html.
5. Si utilizas imgenes en tu pgina web es conveniente crear una carpeta de imgenes
por cada pgina.
1. Sin cerrar el Block de Notas, elige en la barra de tareas, el programa navegador (por
ejemplo: IExplorer o Navigator de Netscape).
2. En el Men Archivo y la opcin Abrir. Con el botn examinar localiza tu carpeta y
en el tu pgina web y clic en Abrir.
3. A continuacin debe visualizarse tu pgina web. Si existe algunos tags visibles (ejm
<H1>, <P>, <TD>, etc.), significa que existe un error en el cdigo de la pgina web.
1. Sin cerrar el Browser, elige en la barra de tareas, el Block de Notas en l revisar y

digitar los cambios y guardar (Men Archivo y Guardar).
2. Para visualizar nuevamente, sin cerrar el Block de Notas, elige en la barra de tareas,
el programa navegador y en el Clic en el Botn Refresh o Actualizar de la Barra de
Herramientas del navegador.

1. Todos los tags se activan entre parntesis triangulares < ....> sin dejar espacio.
2. Pero estos tags una vez activados hay que desactivarlos, para ello se repite el tag
anteponiendo la barra de dividir </ ....>.
Ejemplo, para poner la letra en negrita:
<B> Programacin de Sistemas </B>
Para activar se pone: <B> y para desactivar se pone </B> sin dejar espacio entre
caracteres.
3. Un texto puede ser afectado por uno o ms tags simultneamente.
Ejemplo, para poner la letra en negrita, en cursiva y tachada:
<B> <EM> <STRIKE>
Programacin de Sistemas
</STRIKE> </EM> </B>
La estructura bsica de las partes de una pgina Web son:

<HTML>
<HEAD>
< TITLE > ttulo < /TITLE >
</HEAD>
<BODY>
Parte donde se disea la informacin que mostrar la pgina HTML
</BODY>
</HTML>
El tag <TITLE> y </TITLE> se usa para mostrar el ttulo de la pgina web. Este aparece en
la barra de ttulo del Navegador.
1. Color de Fondo.
Se usa el tag < BODY BGCOLOR="#xxyyzz" > que lleva 3 pares de valores
hexadecimales que corresponden a la cantidad de: xx R(rojo), yy G(verde) y zz
B(azul) que componen el color a definir y que pueden tomar valores entre el 00 al
FF y si se cambian se obtiene distintos colores.
Ejemplo

El color BLANCO es el nmero "#FFFFFF".
El color NEGRO es el nmero "#000000", y
El color ROJO es el nmero "#FF0000".
El color VERDE es el nmero "#00FF00".
El color AZUL es el nmero "#0000FF".
2. Imagen de Fondo.
Se usa el tag <BODY BACKGROUND="imagen.gif">
3. Color de links.
Se usa el tag <BODY LINK="color">
4. Color de links visitados.
Se usa el tag <BODY VLINK="color">
5. Color de Texto del Documento.
Se usa el tag <BODY VLINK="color">
Ejemplo
<HML>
<HEAD>
<TITLE> El ttulo de la pgina </TITLE>
</HEAD>
<BODY TEXT= #008000 BGCOLOR= #800080 LINK=#FFFF00>

Aqui escribe lo que desea, este se visualizar en el navegador
</BODY>
</HTML>
Existen 2 formas de formatear un texto.
Muestra de los tamao de letra: H1, H2, H3, H4, H5 y H6

Nota: (Los dos ltimos pueden no mostrarse adecuadamente dependiendo de la
resolucin de pantalla que est usando el usuario, por tanto mejor no usarlos con
frecuencia): Ejemplo emmet: h$*6>{titulo$}
< H1 > El mayor < /H1 > < H4 > Tamao 4 < /H4 >
< H2 > Tamao 2 < /H2 > < H5 > Tamao 5 < /H5 >
< H3 > Tamao 3 < /H3 > < H6 > El Menor < /H6 >
Si se quiere poner un texto en un aspecto de letra concreto podemos utilizar los siguientes
comandos:

Tags de Estilo Descripcin
<b> Negrita < /b > Negrita
<strike> Tachada < /strike > Tachada
<i> Cursiva < /i > Cursiva
<u> Cursiva </u> Subrayado
<font size=#> Define un tamao de letra para el texto </font>
<font color=color> Define el color de letra para el texto </font>
<font face=Tipo_letra> Define el tipo de letra para el texto </font>
Tags de Formato Descripcin

<p> parrafo </p> Define un prrafo cuyo texto se
redimensiona automticamente.
<center> texto </center> Centra el texto.
<blockquote> texto </blockquote> Inserta una sangra 1.5 cm.
<br> Produce un salto de lnea.
Tags de Fuente Descripcin

<kbd> Mquina < /kbd > Mquina
<sup> Superndice < /sup > NormalSuperndice
<sub> subndice < /sub > Normalsubndice
Para el color del texto se utiliza el comando < FONT COLOR="#xxyyzz" >.
< FONT COLOR="#xxyyzz" > Texto </FONT>
Para definir los prrafos se activa el comando < P > y al final se desactiva con < /P >
Nota: El texto de un mismo prrafo se escribe de seguido al igual que en los procesadores
de texto. Tiene la peculiaridad que se adaptar al tamao y tipo de letra que tenga cada
usuario instalados como estndares en su navegador, salvo que nosotros indiquemos que
sea un tipo y tamao determinado.
Para incluir con una lnea en blanco se activa una sola vez el comando < BR >
Cmo mostrar la informacin clasificada: Para mostrar la informacin ordenada que

aparece en los recuadros de la derecha se usan los comandos de apertura y cierre que
aparecen en los recuadros situados a la izquierda.

Lista con Vieta
< UL > Primer item
< LI > Primer item Segundo item
< LI > Segundo item
< /UL >
Lista Numerada
< OL > 1. Primer item
< LI > Primer item 2. Segundo item
< LI > Segundo item
< /OL >
Lista de definiciones
< DL > Primer trmino
< DT > Primer trmino Definicin de este primer trmino,
< DD > Definicin de este 1er trmino, si el texto es... si el texto es de varias lneas ste
< DT > Segundo trmino aparece con sangra en cada una
< DD > Definicin del segundo trmino de las definiciones de los trminos.
< /DL > Segundo trmino
Definicin del segundo trmino
Tercer trmino
Definicin del tercer trmino
El tag para poder realizar una tabla es: <TABLE> ... </TABLE>
Dentro de la tabla si queremos definir filas <TR> ... </TR>
Dentro de la tabla y una fila si queremos definir celdas <TD> ... </TD>
1. Border=#
Indica el ancho del borde de la tabla en puntos.
2. Cellspacing
Indica el espacio en puntos que separa las celdas que estn dentro de la tabla.
3. CellPadding.
Indica el espacio en puntos el borde y el contenido de esta.
4. Width=# %
Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la
ventana del visor.
5. Height=# %
Indica la altura de la tabla en puntos o en porcentaje en funcin del alto de la
ventana del visor. Si no se indica este parmetro la altura se adecuar de acuerdo
a la altura de los contenidos de las celdas.
1. Align=LEFT/CENTER/RIGHT/JUSTIFY
Indica la alineacin horizontal del contenido de la celda.
2. Valign=TOP/MIDDLE/BOTTOM
Indica la alineacin vertical del contenido de la celda.
3. Rowspan=#

Indica el nmero de filas que ocupar la celda.
4. Colspan=#
Indica el nmero de columnas que ocupar la celda.
Ejemplo con parmetros de Tabla
<TABLE WIDTH=80% BORDER = 1> Celdas </TABLE>
Crea una tabla con un tamao del 80% de la ventana.
Ejemplo con parmetros de Celda
<TABLE WIDTH=600 HEIGHT=400 BORDER = 1>

<TR ALIGN=RIGHT VALIGN=MIDDLE>
<td> Celdas Centradas en forma </td>
<td> Horizontal y Vertical </td>
< /TR>
< TR>
<td> Celda Normal </td>
<td> Celda Normal </td>
</TR>
</TABLE>
Resultando
Ejemplo con tamao de borde 2:

<TABLE BORDER=2> Ramn Javier Enrique
<TR>
<td> Ramn </td> Carolina Rosa Carmen
<td> Javier </td>
<td> Enrique </td>
< /TR>
< TR>
<td> Carolina </td>
<td> Rosa </td>
<td> Carmen </td>
</TR>
</TABLE>
Para poner una lnea horizontal de separacin, activar slo una vez el comando <HR>

Lnea de
Separacin
.
Para incluir una imagen (que es un archivo) en una pgina se usan los siguientes tags de
apertura y cierre:
< IMG SRC="nombre.ext" >
Siendo las extensiones posibles del archivo de imagen: .GIF, PNG o JPG
Ejemplo: En el ejemplo se supone que el archivo de la imagen est en el mismo directorio

o carpeta que el archivo de la pgina.
< IMG SRC="phone.gif" >
Pero tambin se puede situar la imagen con IMG SRC y ALIGN. Pongamos un ejemplo de
situar el archivo de imagen en la zona derecha o izquierda:
<IMG SRC="phone.jpg" ALIGN=RIGHT/LEFT>
Se tiene la siguiente estructura del sitio
Si la imagen se encuetra dentro de una carpeta de la misma localizacin del archivo html,
entocences defina la ruta as:

< IMG SRC="imagenes/phone.gif" >
Si la imagen esta en una carpeta superior del archivo html, entonces defina la ruta as:
< IMG SRC="../imgs/phone.gif" >
Un Hipervnculo permite enlazar varias pginas, slo al hacer clic en l nos lleva de una
pgina web a otra, es el principio fundamental de navegacin en Internet.
Una forma de hacer que desde una pgina podamos acceder a otra pgina es la de usar
una zona de texto que llamaremos "enlace" (en ingls link).
1. ENLACE ABSOLUTO.
Se utilizar el siguiente tag:
<A HREF="referencia del archivo web">
Texto a Visualizar como link
</A>
1.1. Enlaces Sitios Web.

<A HREF="nombre_URL">
Nombre del URL (texto) a visualizar como link
</A>
Ejemplo:
<A HREF="www.istpsam.edu.pe">
Pgina Web del IST Santiago Antnez de Mayolo
</A>
1.2. Enlaces a Archivos Web.

<A HREF="nom_Arch.html">
Nombre del Archivo a visualizar como link
</A>
Ejemplo:
<A HREF="mipag1.htm">
Mi primera pgina web
</A>

1.3. Enlaces a PCs.
<A HREF="#.#.#.#">
Nombre de la PC a visualizar como link
</A>
Ejemplo:
<A HREF="200.60.100.180">
La mquina del Profesor Jaime
</A>
2. ENLACE RELATIVO.
Para construir enlaces dentro de una misma pgina es necesario seguir los siguientes
pasos:
2.1. Definir una etiqueta con:
<A NAME=nom_enlace></A>
La fila correspondiente a este tag, se visualizar como primera fila en la pantalla, luego de
hacer clic en el hipervnculo. Representa la ubicacin a visualizarse.
2.2. Definir el Enlace.
<A HREF="nom_arch.htm#nom_enlace"> Texto a Visualizar como
link </A>
Ejemplo
<A NAME=Inicio>
.
.
<A REF.=PAGINA1.HTM#INICIO>Regresar al
Inicio</A>
3. ENLACE CON IMGENES.

Tambin podemos usar una imagen o un icono, el proceso es similar con el absoluto o
relativo pero debe presentar la siguiente forma:
< A HREF = "pgina1.htm" > < IMG SRC = "icono.gif" > < /A >

1. La web actual permite a los usuarios dejar el papel pasivo?
a. Verdadero
b. Falso
1. Qu entiende por HTML?
a) Hyper Text Mask Language
b) Hard Text Markup Language
c) Hyper Text Markup Language
2. Qu etiqueta utilizamos para definir el cuerpo del documento?

a) <background>
b) <body>
c) <b>
3. Qu etiqueta utilizamos para insertar una lnea horizontal?

a) <br>
b) <hr>
c) <line>
4. Cul es la forma correcta de insertar un comentario?

a) 
b) <--...--!>
c) <comment>
5. Elija la etiqueta apropiada para un texto en negrita.

a) <bold>
b) <bb>
c) <b>
6. Cul es la forma correcta de crear un vnculo?

a) <a target="http://www.unsitio.com">...</a>
b) <a href="http://www.unsitio.com">...</a>
c) <a url="http://www.unsitio.com">...</a>
7. Qu etiqueta define la fila de una tabla?

a) <tr>
b) <td>
c) <row>
8. Qu etiqueta define una lista ordenada?

a) <ol>
b) <ul>
c) <li>

9. Elija la etiqueta apropiada para hacer una lista desplegable.
a) <input type="list">>
b) <input type="menu">>
c) <select>
10. Cmo definimos un rea de texto?

a) <textarea>
b) <input type="textarea">
c) <input type="text">
11. Elija la forma correcta de ingresar una imagen.

a) <img src="/foto.jpg">
b) <imagen src="/foto.jpg">
c) <img href="/foto.jpg">
12. Cmo definimos un color en sistema hexadecimal?

a) <beige>
b) <245,245,220>
c) <#F5F5DC>
13. Qu etiquetas pueden figurar en la seccin <head>?

a) <style>, <meta>, <table>
b) <link>, <title>, <base>
c) <link>, <meta>, <p>
14. Cmo mandamos un e-mail a partir de un vnculo?

a) <a mail="alguien@yahoo.com">...</a>
b) <a mailto="alguien@yahoo.com">...</a>
c) <a href="mailto:alguien@yahoo.com">...</a>
15. Qu es cellspadding?
a) Define el espacio entre celdas de una tabla
b) Define los ttulos de una tabla
c) Define el espacio entre el borde de la celda y su contenido
16. Cmo definimos un texto alternativo para una imagea) n?

a) <img src="/foto.jpg" alt="texto alternativb) o">
b) <img src="/foto.jpg" value="texto alternatc) ivo">
c) <img src="/foto.jpg" text="texto alternativo">
17. Qu etiqueta define un salto de lnea?

a) <br>
b) <break>
c) <linebreak>

18. Cmo colocamos una imagen de fondo en una celda de una tabla?
a) <tr bgcolor="...">...</tr>
b) <tr background="...">...</tr>
c) <td background="...">...</td>
19. Elija la etiqueta que nos d el ttulo ms grande

a) <h1>
b) <h6>
c) <head>
20. Cmo hacemos para abrir un vnculo en otra ventana?

a) <a href="/www.algunsitio.com" new>...</a>
b) <a href="/www.algunsitio.com" target="_new">...</a>
c) <a href="/www.algunsitio.com" target="_blank">...</a>

Parte01 Manual Diseño Web

Cargado por

Información del documento

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

Parte01 Manual Diseño Web

Cargado por

Copyright:

Formatos disponibles

SUASNBAR TERREL, JAIME

SUASNBAR TERREL, JAIME

Reservado todos los derechos

SUASNBAR TERREL, JAIME

Compiled by: Mg. Jaime Suasnbar Terrel

La asignatura corresponde al rea de Formacin Especializada

COMPETENCIA GENERAL CAPACIDADES

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

En la actualidad est en boca de todos la Web 3.0 pero, en realidad de qu se trata, qu

Compiled by: Mg. Jaime Suasnbar Terrel

La Web Semntica es la nueva generacin de la Web, que intenta realizar un filtrado

Compiled by: Mg. Jaime Suasnbar Terrel

Un wireframe bsicamente es un boceto bsico y de baja calidad del desarrollo de una

El wireframe tiene como objetivo proporcionar la visualizacin del diseo o las

Compiled by: Mg. Jaime Suasnbar Terrel

Sitio web: http://www.balsamiq.com/products/mockups

Compiled by: Mg. Jaime Suasnbar Terrel

Sitio web: https://gomockingbird.com/

Sitio web: http://lovelycharts.com/

Compiled by: Mg. Jaime Suasnbar Terrel

Sitio web: http://www.gliffy.com/uses/wireframe-software/

Compiled by: Mg. Jaime Suasnbar Terrel

Sitio web: http://iphonemockup.lkmc.ch/

Compiled by: Mg. Jaime Suasnbar Terrel

Sitio web: http://wireframe.cc/

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

Una aplicacin nativa es la que se desarrolla de forma especfica para un determinado

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

Las que se adaptan especialmente a un dispositivo mvil se llaman web responsivas y

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

13. Las herramientas web permiten generar un enfoque poco comunicativo y un

14. El "aprendizaje 2.0", se basa en los contenidos generados por el usuario y la

16. No es quien ensea, sino quien facilita, promueve, gua y acompaa en el

17. El profesor 2.0 tiene temor de apropiarse de las nuevas tecnologas?

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

Toda pgina web tiene la siguiente estructura:

<HTML> </HTML> Marcan el inicio y final de la pgina web.

Necesitas al menos tener un programa navegador de Internet (por ejemplo: Internet

Compiled by: Mg. Jaime Suasnbar Terrel

1. Crear una carpeta de trabajo donde se guardarn tus pginas web.

1. Sin cerrar el Browser, elige en la barra de tareas, el Block de Notas en l revisar y

Compiled by: Mg. Jaime Suasnbar Terrel

La estructura bsica de las partes de una pgina Web son:

Compiled by: Mg. Jaime Suasnbar Terrel

<BODY TEXT= #008000 BGCOLOR= #800080 LINK=#FFFF00>

Existen 2 formas de formatear un texto.

Muestra de los tamao de letra: H1, H2, H3, H4, H5 y H6

Compiled by: Mg. Jaime Suasnbar Terrel

Tags de Formato Descripcin

Tags de Fuente Descripcin

Cmo mostrar la informacin clasificada: Para mostrar la informacin ordenada que

Compiled by: Mg. Jaime Suasnbar Terrel

Compiled by: Mg. Jaime Suasnbar Terrel

<TABLE WIDTH=80% BORDER = 1> Celdas </TABLE>

Crea una tabla con un tamao del 80% de la ventana.

Ejemplo con parmetros de Celda