Manual De Usuario Web Design
Enviado por Bascur • 8 de Mayo de 2014 • 1.381 Palabras (6 Páginas) • 225 Visitas
Manual de Implementación Front
Sitio web Cross t -Chile
INTRODUCCIÓN
SOBRE EL DOCUMENTO
Es parte del material entregado a Cross t - Chile para el desarrollo del sitio y debe considerarse como complemento técnico de los archivos, documentos, acuerdos, mapas de navegación, wireframes, maquetas y conocimientos del equipo de Cross t - Chile para guiar la implementa- ción del proyecto
OBJETIVO DEL DOCUMENTO
Especi car el modelo de trabajo correspondiente al front end implementado para el proyecto Cross t - Chile como parte de la metodología desarrollada por AyerJueves aplicada a los desa- rrollos.
LA ENTREGA
Consiste en documentos HTML, CSS, imágenes y librerías JavaScript necesarios para maquetar, según el diseño previamente aprobado, los comportamientos e interacciones contempladas en el proyecto de Corss t - Chile
ESTADO DE LA ENTREGA
Los HTMLs que se entregan son las matrices que deben seguir y replicar según las condiciones y necesidades de cada uno de los códigos que el desarrollo del sitio requiera para su óptima implementación. Estos archivos están debidamente validados (cada uno de ellos) según los estándares recomendados por la W3C.
Las cascadas de estilo CSS consideran las muestras más signi cativas de estilos utilizados en el diseño. La lista de HTMLs que pueden visualizarse están indicadas con los respectivos nombres, los que deben ser visualizados ingresando la ruta especi cada
Los archivos que no tienen ruta o nombre y/o hacen referencia a otros archivos existentes que no se desarrollaron, son archivos que no demandan código nuevo y son replicables en base a la totalidad del código entregado.
Los HTMLs NO se deben considerar como una maqueta navegable. No obstante, se implementó un mínimo de vínculos para ejempli car algunos nexos. La navegación está
de nida en los mapas de contenido, wireframes y maquetas navegables (en caso de existir)
, y es conocida por el equipo de desarrollo del proyecto.
ESTRUCTURA DE DIRECTORIOS Y ARCHIVOS
Dentro del directorio front se encuentran los archivos correspondientes a las plantillas
HTML desarrolladas para el proyecto.
Archivo Descripción
01-home.html Portada del Sitio
02-nosotros.html
03-que.html
04-atrevete.html
05-contacto.html
Pagina per l profesional
Pagina actividad Pagina entrenamiento Pagina contacto
Archivo Descripción
bootstrap.js Archivo principal de comportamientos e interacciones
http://code.jquery.com/jquery-1.9.1.min.js Archivo principal de comportamiento
Archivo Descripción
bootstrap.css Archivo principal con reglas de estilos bootstrap-responsive.css Archivo principal responsivo
ESTRUCTURA FRONT
CONSIDERACIONES GENERALES
El front se construye separando sus diferentes componentes en capas: estructura/contenido en los cheros HTML, presentación/diseño en hojas de estilos CSS, y programación de comportamientos e interacciones en los archivos Javascript
Tipo de documento y codi cación utilizada
Los HTMLs generados para este proyecto cumplen con la validación de la W3C para el tipo de documento HTML
<meta charset="utf-8">
La codi cación de caracteres es UTF8. Recomendamos incorporar en los procesos de desarrollo la constante preocupación por mantener este estándar.
Marcación
La utilización de cada una de las etiquetas en la construcción del código de marcado está basada en su correcta utilización para elevar el nivel semántico del producto, aplicando las convenciones y estándares de nidos por las comunidades de desarrollo
Clases e IDs
La asignación de reglas mediante clases y/o IDs obedece a una estructura que sirve tanto para de nir reglas de estilos como para detectar acciones y generar comportamientos
ESTRUCTURA GENERAL DEL HTML
<!DOCTYPE html>
<head>
</head>
<body>
<div class="navbar navbar-inverse navbar- xed-top">
<div class="navbar-inner">
<div class="container">
<div class="collapse nav-collapse">
<ul class="nav pull-right">
</ul>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="modal-contact-form">
<div class="modal-header">
</div>
<div class="modal-body">
<form action="" class="form-horizontal">
</form>
</div>
<div class="modal-footer">
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="span4">
<div class="c-cta">
<div
...