Guia Maquetacion HTML5

___________ Unidad Educativa Colegio “Santa Ana”
Profesor Blanco Jean Carlos
Introducción
. La interfaz web son elementos gráficos que permiten al usuario acceder a los contenidos,
navegar e interactuar. Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es
importante. Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es importante.
La interfaz web son elementos gráficos que permiten al usuario acceder a los contenidos, navegar
e interactuar.
La maquetación web es el proceso en el que el prototipo gráfico también denominado «layout »

(con los requisitos estructurales y estéticos definidos y aprobados en un análisis inicial) pasa a
transformase en código html, css y js (estándares web) para que los navegadores puedan
interpretarlo correctamente.
El proceso de maquetación web es la transformación del diseño de un producto web en un

conjunto de archivos (html, css, js) capaces de ser reproducidos por los navegadores web.
Objetivo de la Guía
Diseñar interfaz graficas a usuarios
Requerimientos. :Se debe contar con: Un (1) computador teniendo como mínimo el Sistema Operativo
Windows, Servidor apache, HTML, CSS, lenguaje de Programación PHP, Editor de texto(VSC Notepad++)
Unidad III: Herramientas de Diseño de Interfaz Web
Objetivo de la Unidad:
Al finalizar esta unidad de aprendizaje los alumnos diseñan y desarrollan interfaz graficas a
usuarios utilizando tecnologías de software libre del lado del Cliente.
Practica : creación y maquetación de Pagina Web
Estructura básica de una Pagina Web

Realiza el esquema básico de una página en html 5, en el editor de tu preferencia,

en cuanto a los requerimientos para el sitio web de la entidad bancaria BancOro
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device−width, initial−scale=1.0" /> 
<title> Sitio Web BancOro</title>
</head>
<body>

<header>
<h2> Imagen Corporativa </h2>
</header>


<nav>
<ul>
<li>Principal</li>
<li>Titular</li>
<li>Cuentas Bancarias</li>
<li>Transacciones Bancarias</li>
<li>Reportes</li>
<li>Salida</li>
</ul>
</nav>


<aside>
<div> Sidebar/ barra Lateral</div>
</aside>



<section >
<div>
<span>Contenido principal</span>
<article>Banca Online</article>
<article>Servicios de la Banca</article>
</div>
</section>


<footer>
Copyright 2019
</footer>

</body>
</html>
Guardar en el servidor local y luego ejecutar desde el cliente navegador web

Al ejecutar se visualiza la siguiente página web
Nada que ver con esto

Debido que para obtener una página con esta apariencia visual debemos
utilizar, CSS, un lenguaje de diseño gráfico pensado para crear hojas en cascada,
podrás mejor tu código HTML con funcionalidades propias de una página web.
Ahora comencemos, con las hojas de estilos
Continuando con la estructura de HTML, debes incluir la etiqueta link en la
cabecera del documento html, los atributos rel y href. El atributo rel significa
“relación” y es acerca de la relación entre el documento y el archivo que estamos
incorporando por medio de href. En este caso, el atributo rel tiene el valor
stylesheet que le dice al navegador que el archivo stylo.css es un archivo CSS con
estilos requeridos para presentar la página en pantalla.
<link rel="stylesheet" href="stylo.css" type="text/css">
En el código de la página anterior insertamos esta etiqueta
<head>
<meta charset="utf-8">
<title> Sitio Web BancOro </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
Dando estilo a nuestra web

Hemos especificado que nuestro fichero stylo.css se encontrará en la misma
dirección del archivo .html, y comenzamos escribiendo la sintaxis de css
html{
margin: 0;
padding: 0;
background: #efefef;
color: #fff;
}
body{
width: 80%;
margin: 10px auto;
}
header{
background: #B7B9B8; }
Le estamos dando color al fondo del encabezado de la pagina
nav ul li{
display: inline-block;
margin: 0 10px;
padding: 4px 10px;
border: 1px solid
#fff; border-radius:
4px;
}
aside{
float: left;
width: 25%;
height: 200px;
background: #5A9E95;
}
Si la queremos a la derecha se cambia el valor de left a rigth

float: right;
section{
float: right;
width: 70%;
height: 200px;
background: #96BC6C;
}
article{
margin: 10px auto;
background: #0072BC;
width: 90%;
}
footer{
background: #F36623;
}
Para finalizar le vamos a dar estilo a los contenedores diseño de cajas las
propiedades de alinear el texto, tipo de letra , tamaño de la letra margen y espacio
entre contenedores
header, nav, aside, section, article,
footer{ margin: 10px 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
font-family: 'Tahoma';
}
Ahora debemos utilizar la propiedad clear con el valor both. La propiedad clear,
propiedad que simplemente restaura las condiciones normales del área ocupada
por el elemento, no permitiéndole posicionarse adyacente a una caja flotante. El
valor usualmente utilizado es both, el cual significa que ambos lados del elemento
serán restaurados y el elemento seguirá el flujo normal (este elemento ya no es
flotante como los anteriores). Esto, para un elemento block, quiere decir que será
posicionado debajo del último elemento, en una nueva línea. La propiedad clear
también empuja los elementos verticalmente, haciendo que las cajas flotantes
ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el
documento en pantalla como si los elementos flotantes no existieran y las cajas se
superponen.
footer{
background: #F36623;
clear: both;
}
Ahora nuestra web luce algo más parecida al ejemplo:

Guia Maquetacion HTML5

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

Guia Maquetacion HTML5

Cargado por

Copyright:

Formatos disponibles

___________ Unidad Educativa Colegio “Santa Ana”

Profesor Blanco Jean Carlos

La maquetación web es el proceso en el que el prototipo gráfico también denominado «layout »

El proceso de maquetación web es la transformación del diseño de un producto web en un

Diseñar interfaz graficas a usuarios

Unidad III: Herramientas de Diseño de Interfaz Web

Practica : creación y maquetación de Pagina Web

Estructura básica de una Pagina Web

Realiza el esquema básico de una página en html 5, en el editor de tu preferencia,

Guardar en el servidor local y luego ejecutar desde el cliente navegador web

Nada que ver con esto

Dando estilo a nuestra web

Si la queremos a la derecha se cambia el valor de left a rigth

Ahora nuestra web luce algo más parecida al ejemplo:

También podría gustarte