Este documento describe cómo diseñar interfaces gráficas de usuario para páginas web utilizando HTML, CSS y JavaScript. Explica la estructura básica de una página web y cómo agregar estilos con hojas de estilo en cascada (CSS) para dar formato a elementos como encabezados, menús de navegación, secciones laterales y de contenido principal. También cubre propiedades CSS como colores de fondo, alineación de texto, tipos y tamaños de fuente para dar formato a los contenedores y elementos de la página.
1. 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
2. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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" /> <!-- Le
dice al navegador pagina reponsive -->
<title> Sitio Web BancOro</title>
</head>
<body>
<!-- inicio header -->
<header>
<h2> Imagen Corporativa </h2>
</header>
<!-- fin header -->
<!-- inicio nav -->
<nav>
<ul>
<li>Principal</li>
<li>Titular</li>
<li>Cuentas Bancarias</li>
<li>Transacciones Bancarias</li>
<li>Reportes</li>
<li>Salida</li>
</ul>
</nav>
<!-- fin nav -->
<!-- inicio aside -->
<aside>
<div> Sidebar/ barra Lateral</div>
</aside>
<!-- fin aside -->
3. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
<!-- inicio section -->
<section >
<div>
<span>Contenido principal</span>
<article>Banca Online</article>
<article>Servicios de la Banca</article>
</div>
</section>
<!-- fin section-->
<!-- inicio footer -->
<footer>
Copyright 2019
</footer>
<!-- fin 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
4. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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
5. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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
6. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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;
}
7. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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%;
}
8. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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';
}
9. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
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: