DOCUMENTACIN Y MAQUETACIN DE UNA

PGINA WEB
 1
INTRODUCCION

En esta actividad realizars la maquetacin de un sitio, es importante para ello,

considerar las etapas de desarrollo de un sitio web que se abord en la asignatura
Programacin web II, una vez que cuentes con la informacin que se requiere para
disear un sitio web, como la primera etapa del desarrollo, debers documentar esta
informacin y disear la maquetacin de tu sitio.

Para desarrollar esta actividad es importante que recuperes los conocimientos

adquiridos acerca de las fases de desarrollo de un proyecto y de un sitio web. Puedes
retomar las conclusiones acerca de un problema, necesidad o rea de oportunidad a la
que pueda aplicarse una nueva tecnologa web, con base en ello, es necesario que
realices el layout un proyecto de diseo de sitio web. Utiliza las etiquetas HTML5, que
se revisaron en la unidad 1. Tecnologas para mi sitio web.
 2
Realiza el anlisis y diseo de una pgina web para alguna organizacin o para
atender un problema, rea de oportunidad o necesidad.
Se llev a cabo un anlisis en el cual llegue a conclusin de realizar una pgina web la
cual me pueda servir para poder darme a conocer y brindar soporte informtico para
empresas y particulares, para poder percibir un dinero extra.
La pgina deber contar con un diseo amigable en el cual el cliente pueda visualizar el
servicio brindado (reparacin y mantenimiento de ordenadores, instalacin y configuracin
de hardware, software. Instalaciones de redes LAN y WIFI) y los medios por los cuales me
podrn contactar.
El diseo deber de ser dinmico y responsiva para que el usuario pueda visualizar la
pgina de cualquier dispositivo sin perder el diseo de la misma.

Documenta la descripcin del caso seleccionado: requerimientos de usuario,

objetivo, tecnologas a utilizar
La pgina tendr el objetivo de darme a conocer y poder brindar soporte informtico, para
poder ofrecer el mejor servicio es necesario disponer de un buen departamento tcnico
compuesto por personal calificado, que pueda responder rpida y profesionalmente a
todas sus necesidades.
Nuestro servicio tcnico est preparado para solventar cualquier tipo de incidencia que
puedan tener sus sistemas informticos en su empresa, a cualquier nivel, y cuentan con
una dilatada experiencia en la materia.
Ofrecemos servicios de mantenimiento informtico, porque la mejor reparacin de su
sistema es la prevencin y el asesoramiento continuado segn sus necesidades en cada
momento.
El objetivo principal del portal ser solucionar los problemas que se puedan presentar a
los usuarios o empresas a nivel software Hardware, todo esto siempre con personal
calificado, el cual estara actuando de manera inmediata para solventar su problema y
mantener satisfecho al cliente.

La pgina estar desarrollada con cdigo HTML5 el cual establece una serie de nuevos
elementos y atributos que reflejan el uso tpico de los sitios web modernos. Algunos de
ellos son tcnicamente similares a las etiquetas <div> y <span>, pero tienen un
significado semntico, como por ejemplo <nav> (bloque de navegacin del sitio web) y
<footer>.

CSS3 sirve para definir la esttica de un sitio web en un documento externo y eso mismo
permite que modificando ese documento (la hoja CSS) podamos cambiar la esttica
entera de un sitio web ese es precisamente el poder de CSS, en otras palabras, el
mismo sitio web puede variar totalmente de esttica cambiando solo la CSS, sin tocar
para nada los documentos HTML o jsp o asp que lo componen, ya con CSS3 se suman
 3
muchas nuevos efectos que harn de la que la parte visual de nuestra pgina sea mucho
ms agradable y llamativa, como sombras, transformaciones de figuras, creacin sencilla
de bordes y efectos 3D.
Conclusin CS
Posteriormente se estara buscando un Hosting gratuito los cuales ofrecen en hospedaje
gratuito y si quieres tambin el dominio te ofrecern un subdominio sea si quieres que se
llame tuweb.com se llamara tuweb.subdominio.com pero bueno esto para empezar est
bien ya que no tiene ningn gasto. Entre los ms destacados se pueden mencionar:

000webhost : Es una empresa lder en la prestacin de servicios de primera clase

alojamiento web gratuito sin publicidad! No hay costes ocultos, los anuncios no y no
trminos restrictivos. Velocidades rpidas y mxima fiabilidad y apoyo a los usuarios
fanticos son slo algunas de las caractersticas que usted recibir con nuestro servicio.

Zobyhost : Establecido formalmente en Octubre del 2008, zobyhost.com es un sitio

independiente con el objetivo de brindar alojamiento web gratuito para usuarios de habla
hispana. Trabajan junto a empresas de primer nivel, elegidas por sus cualidades y
capacidades, entre otros.

Crea un prototipo o layout del sitio mediante la maquetacin, con base en los
requerimientos del caso seleccionado.
En la siguiente imagen se puede observar la maquetacin de la pgina web la cual se
realiz mediante mockflow.com la cual nos permite disear y elaborar modelos de
interfaz de usuario para sitios web y aplicaciones en menos tiempo.
WireframePro proporciona un editor de arrastrar y soltar con todas las funciones para
dibujar maquetas de interfaz de usuario. Incluye soporte para pginas maestras, modo de
presentacin, capas, tamao automtico de lienzo, interactividad, iconos, por nombrar
algunos.
Como se puede observar en la imagen la pgina contara con un encabezado el cual
contendr el nombre de la pgina y posteriormente un men en el cual se podrn ingresar
a las diferentes opciones como contacto, servicios, imgenes, cabe mencionar que la
pagina solo contara con una hoja en la cual por medio del men se podr desplazar por
las diferentes opciones, todo esto parea que el usuario que ingrese no se le haga tedioso
estar navegando por diferentes hojas, cabe mencionar que la pagina ser responsiva.
 4

Codifica la maquetacin de tu sitio mediante HTML5 y CSS3.

Genera una imagen del resultado de la maquetacin con HTML5 y CSS3 y anexa el
cdigo generado