jueves, 20 de octubre de 2016

006  Crear interfaz para web
Ing. Honoria Reyes Macedo



INTRODUCCION: En esta práctica se usara html5 para crear un prototipo de interfaz para web. html(HyperText Markup Language) utiliza una serie de etiquetas que el navegador interpreta, se usan para manipular paginas, texto, imágenes, videos, juegos, entre otros.
Esta interfaz se podra utilizar posteriormente en forma dinamica( se podra usar para jsp, php, asp, .net…).

 Este es un ejemplo de un archivo en html5 creado en un block de notas ó en dreamweaver:

El archivo se llama: inicio.html y contiene lo siguiente

<!DOCTYPE html> 
<html lang="es">
 <head>
   <meta charset="iso-8859-1">
   <meta name="description" content="Ejemplo de HTML5">
   <meta name="keywords" content="HTML5, CSS3, JavaScript">
   <title>TITULO DEL DOCUMENTO</title>
   <link rel="stylesheet" href="css/estilos.css">
 </head>
 <body>
     <header>
<h1>ENCABEZADO PRINCIPAL</h1>
<nav>
    MENUS
</nav>
     </header>
     <section>  <p>CONTENIDO</p>
<header>
ENCABEZADO SECUNDARIO
    </header>
<article>   PARTE DEL CONTENIDO
</article> 

      </section>
     <section>
     </section>
     <footer>
<p>
COMENTARIOS, DERECHOS RESERVADOS
</p>
     </footer>
 </body>
</html>


 ACTIVIDADES


1.- Paso 1. Crear Un prototipo de interfaz. Crear un archivo inicio.html en una carpeta paginaWeb
                * El tema a escoger se define en clase
1.1 Utilizar las siguientes etiquetas para definir las secciones o cajas:

section, aside, article, figcation, figure, footer, header, hgroup, nav.

            1.2 Agregar etiquetas como h1, h2, h4, a, div, li, etc.  de acuerdo a las 
                          necesidades de el prototipo

                Ejemplo: El siguiente prototipo de interfaz describe las secciones en las que se divide
                Nota: En la interfaz se describe a donde pertenece cada seccion, por lo que tus secciones las puedes identificar con id(#)

 OPTION 1 EN "header nav li a" => Indica que ese texto esta dentro de una etiqueta a que a su vez esta dentro de una lista li y a su vez dentro de nav que a su vez esta dentro de header






2.- Paso 2. Crear un archivo estilos.css  (cascading style sheets) en una carpeta llamada css dentro de la carpeta paginaWeb, para separar la presentacion de la estructura html

        Nota: En archivo  inicio.html dentro de <head>  hacer referencia al archivo en cascada con:
                             <link rel="stylesheet" href="css/estilos.css" />

2.1 El primer contenido de estilos.css debera indicar los valores iniciales:

@charset "UTF-8";
*{
                border:0;
margin:0; /*Distancia alrededor del elemento*/
                margin-bottom:0;
                padding:0;  /*Distancia entre el borde y su contenido*/
                }

/*Etiquetas semanticas*/
article,figcation,figure,footer,header,hgroup,nav,section
{
                display:block;
}

2.2 El siguiente contenido es para dar un orden y un fondo a cada seccion:
     - Indicar cuales estaran alineadas en forma horizontal. Estas secciones deberan pertenecer a una misma caja o seccion.


        Nota: Se pueden indicar las caracteristicas de varias secciones al mismo tiempo, como por ejemplo section, aside, footer
section, aside, footer {
background:#D2CDD0 url(../img/fondo-interno.jpg);
                display:inline-block;  /*Los pone al mismo nivel en forma horizontal*/    
}

Para indicar que las secciones se alinean en una misma linea de acuerdo a su longitud indicada en width:45%; se usa:
display:inline-block;

Para indicar que fondo se utiliza, se puede indicar el color o la imagen a utilizar:
background:#D2CDD0 url(../img/fondo-interno.jpg);
background-color:#FFF;




2.3 Usar el siguiente contenido. Es para dar bordes, color, margenes, etc. a las etiquetas(directivas) y secciones:

Para el ancho utilizar porcentajes
width:45%;

Para el ancho maximo
max-width:100%;

Para el margen interno
padding:0.25em;

Para el margen externo
margin:0.25em;

Para el margen inferior
margin-bottom:.25em auto;


Para alinear en la parte de arriba(Es utilizado para las secciones que estan en un display:inline-block)
vertical-align:top;


Para alinear en la parte izquierda
text-align:left;

Para posicionar en forma flotante
float: left;/*Se desplaza todo lo posible a la izquierda, y los demas elementos se adaptan en los espacios libres*/
       Nota:  Usando display:inline-block;   Ya no sera necesario utilizar float.

Para poner sombra al texto de los titulos. Ejemplos en un h1 y h2
h1{
     text-shadow: 1px 2px #999;
}

ó

h1{
     text-shadow: 3px 3px 2px #696;   /*Sombra desenfocada*/
}

ó

h2{
     -ms-text-shadow:5px 5px 10px rgba(106,163,253,1); /* x, y, blur, */  /*Para Internet Explorer*/
     -moz-text-shadow:5px 5px 10px rgba(106,163,253,1);              /*Para FireFox*/
     -o-text-shadow:5px 5px 10px rgba(106,163,253,1);  /*Para Opera*/
     -webkit-text-shadow:5px 5px 10px rgba(106,163,253,1);  /*Para Chrome, Zafari*/
     text-shadow:5px 5px 10px rgba(106,163,253,1);
}

La directiva <a> la utilizamos para crear vinculos (hipervinculos) y tambien le damos un formato

 a{
        background:#212121 url(../img/probando.jpg);
border:0.1em  #CFECF0 solid;
border-radius:0.25em;
box-shadow: .25em  .25em  .25em  #009;

}

 Para quitar subrayado de la directiva <a>
text-decoration:none;

Para quitar viñetas en las listas
list-style:none;  /*quita viñetas*/

Para poner viñetas
                list-style-type:circle;
                list-style-type:square;
                list-style-type:disc;

Para poner bordes
                  border:0.1em #009 solid ;
                  border-radius:0.25em; /*Todas las esquina redondeada*/
border-radius:0 0.5em 0 0.5em; /*2  esquinas opuestas redondeadas*/


Para dar efectos de transicion, como ejemplo para la etiqueta a (Se recomienda hacer cambio de color antes de poner la transición)
Ejemplo:
nav a{
     background-color:#FFF;
     display:block;        /*Formar una caja con a*/
     transition:all 0.5s ease-in;
     -ms-transition:all 0.5s ease-in; /*Opcional, para la transicion del boton*/
     -moz-transition:all 0.5s ease-in;
     -o-transition:all 0.5s ease-in;
     -webkit-transition:all 0.5s ease-in;
     transition:all 0.5s ease-in;
}

   y cuando se coloca el puntero sobre a -- >  a:hover
Ejemplo:
nav a:hover{
     background:#212121;
     -ms-transition:all 0.5s ease-out; /*Opcional, para la transicion del boton*/
     -moz-transition:all 0.5s ease-out;
     -o-transition:all 0.5s ease-out;
     -webkit-transition:all 0.5s ease-out;
     transition:all 0.5s ease-out;
}


Para dar estilo a  letras
font-size:1.2em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
text-align:right;

2.4 En su contenido se pueden utilizar tipos de letras personalizadas 

@font-face {
font-family: "fontexo";
src: url("../fonts/exo-bold-webfont.eot");
src: url("../fonts/exo-bold-webfont.eot?#iefix") format("embedded-opentype"),


url("../fonts/exo-bold-webfont.woff") format("woff"),
url("../fonts/exo-bold-webfont.ttf") format("truetype"),
url("../fonts/exo-bold-webfont.svg#Chalet") format("svg");
font-weight: normal;
font-style: normal;
}

Para agregarlo a la etiqueta
font-family:"fontexo", Helvetica, Verdana;

Deberan existir en la carpeta fonts:
( usar una carpeta fonts para almacenar el tipo de letra que se bajo de http://www.fontsquirrel.com/)

  



3.- Paso 3. Agregar flexslider para el desplazamiento de las imágenes :

                3.1 Bajar los archivos (desde http://www.woothemes.com/flexslider/ )                     
                     En la carpeta css  copiar el archivo
        


               3.2 En Inicio.html dentro de  <head>  escribir la siguiente linea
                             <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

   3.3  En la carpeta fonts/flexslider  copiar los arhivos

              
3.4 Para desplazar nos auxiliamos de los archivos correspondientes:
                     a) Crear una carpeta js dentro de la carpeta paginaWeb y pegar los siguientes archivos


                               

b). Escoger imágenes que hagan referencia al tema de tu pagina
      4.1 Crear la carpeta img dentro de la carpeta paginaWeb y colocar las imágenes a utilizar

     4.2 Indicar en que lugar se visualizan las imagnes en el archivo inicio.html
        

                <img class="fade" alt="Lugar de Analisis y Sistemas" src="img/logo_principal.png" />



 c) En el archivo inicio.html antes de cerrar <body> escribir las siguientes lineas

 <script src="js/jquery-1.11.1.min.js">  // Para utilizar jquery-1.11.1.min.js en forma local  </script>  
                 <script> !window.jQuery && document.write("<script src='js/jquery-1.11.1.min.js'><\/script>");</script>
                 <script src="js/jquery.flexslider-min.js"></script>
                 <script type="text/javascript" > $(window).on("load",function() { $(".flexslider").flexslider(); });</script> 

d) Las imágenes se deberan acomodar dentro de div li img, lo puedes integrar 
     dentro de un  article  (Cada <img> estara dentro de un <li>)

         Nota: la etiqueta <div> debera contener el id="flexslider" y la <ul> contendra el id= "slides
      <div class="flexslider">
                <ul class="slides">
                     <li>
                        <img src="img/slide-0.jpg" />
                        <p class="flex-caption"> Capacitación de empleados </p>
                     </li>
                 </ul>
      </div>

4.- Paso 5 Agregar widgets sociales. Se recomienda poner una etiqueta y su logo correspondiente

  <p>Conoce nuestro face
      <a class="fade" href="http://facebook.com" title="Facebook" target="_blank">
                  <img src="img/logo-face.png" />
      </a>
  </p>
 
          El control <a> nos permite crear vínculos hacia otras páginas (hipervinculos)

5.- Agregar un icono, para mostrar en la pestaña del navegador:
     En este caso se escogio una pequeña imagen"pestana2.ico"
     Copiar la siguiente linea en la etiqueta <head>
    <link rel="shortcut icon" type="image/x-icon"  href="img/pestana2.ico" />
RECURSOS EN INTERNET>
Tipos de letras:
http://www.fontsquirrel.com/

Desplazamiento de contenido:
http://www.woothemes.com/flexslider/

 colores:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://meyerweb.com/eric/css/colors/


 ---------------------------------------------------000-------000-----------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------
Publicadas por a la/s
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)