Diseño Interfaz Graficas Usuarios Pagina Web

Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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
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 Libre
( Canaima/Ubuntu),Servidor apache, HTML, CSS, lenguaje de Programación PHP,Editor de texto(sublime
text,)
Unidad III: Herramientas de Diseño de Interfaz 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:

Diseño Interfaz Graficas Usuarios Pagina Web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Diseño Interfaz Graficas Usuarios Pagina Web

Similaire à Diseño Interfaz Graficas Usuarios Pagina Web (20)

Plus de lissette_torrealba

Plus de lissette_torrealba (20)

Dernier

Dernier (20)

Diseño Interfaz Graficas Usuarios Pagina Web