005 ASP.NET Y HTML5 (Aplicacion Web)

PRACTICA 005: ASP.NET y HTML5

Ing. Honoria Reyes Macedo


INTRODUCCION

ASP.NET: Es un framework para normalizar y estructurar la informacion en el desarrollo de aplicaciones web. Utiliza html, html5 para la presentacion de sus ventanas o formularios, y utiliza archivos de estilos en cascada CCS para dar formato a los controles del archivo html.

Requisitos 

1.- Un editor de código.- Visual Studio, Notepad, Notepad++: Ejemplo Practica001.aspx

Se pueden usar distintos lenguajes de programación. Existen más de 30 lenguajes adaptados a .Net, desde los más conocidos como C# (C Sharp), Visual Basic o C++ hasta otros lenguajes menos conocidos como Perl o Cobol

2.- NET Framework.- conjunto de clases que actuarán de soporte de las aplicaciones ASP.NET

3.- Un servidor Web como IIS (Servicios de Internet Information Server). de Microsoft

Caracteristicas de los archivos de estilos (.css)

1) Primero para etiquetas:

h3, hr, body, header, div, span, section, article, aside, footer, a, li, ul, img, figure, caption..

2) despues para identificadores (id), son elementos unicos, se declaran con #nombre-id y en html con id="nombre-id"

3) Al final se definen para las clases(n veces en el html), se declararn .nombre-clase y en html con class="nombre-clase"

                                a:hover

4) Se ordenan de acuerdo a su ubicacion en html(etiquetas, id´s, clases)

5) Los atributos utilizan : {atributo1:valor1; atributo2:valor2;}

6) Ordenar los atributos alfabeticamente

7) Los estilos para el comodin *, para  html y body son los primeros

8) Declarar tamaño de fuente global en el body

9) Los estilos para resetear elementos html deben estar primero

10 unidades de medida:    16px = 12pt = 100% = 1em  (em es medida mas flexible)

Unidades absolutas px, pt

Unidades relativas %, em

Ejemplo de uso

                *{

                                border:0;

                                margin-bottom:0;

                                padding:0;  /*Distancia entre el borde y su contenido*/

                }

header h1, nav{

                display:inline-block; /*Para que esten a la misma altura*/

                max-width:100%;

                vertical-align:middle;  /*Para que se centre con la imagen*/

                }

article#galeria-inicio, {

                border-radius:0.5em;

                margin:0.5em;

                padding:0.5em;

                text-align:left;

                width:95%;

                }

div.portafolio{

                margin:2em auto;

                }

@font-face {

font-family: "fontquick";

src: url("../fonts/quicksand-bold-webfont.eot");

src: url("../fonts/quicksand-bold-webfont.eot?#iefix") format("embedded-opentype"),

url("../fonts/quicksand-bold-webfont.woff") format("woff"),

url("../fonts/quicksand-bold-webfont.ttf") format("truetype"),

url("../fonts/quicksand-bold-webfont.svg#Chalet") format("svg");

font-weight: normal;

font-style: normal;

}

body{

                background:#212121 url(../img/fondo.jpg);

                color:#FFF;

                font-family:"fontquick", Helvetica, Verdana;

                font-size:1em;

                }

@media screen and (min-width:1081px){

                header h1{

                                text-align:left;

                                width:35%;                        

                                }

                nav{

                                text-align:right;

                                width:60%;

                                }

}

@media screen and (max-width:600px){

                nav li{

                                display:inline-block;

                                margin:0px;

                                width:98%;

                                }

                section#principal, aside, article#descripcion-acerca{

                                display:block;

                                width:95%;

                                }

                #img-servicios{

                                display:none;

                                }

                div.portafolio article{

                                display:block;

                                margin:.5em auto;

                                padding:0;

                                }

}

ACTIVIDADES:

1.- Crear un archivo de html5. el archivo se llamara Practica001.html

      dividir sus secciones de acuerdo al siguiente texto:

Probar en un navegador

2.- Crear un archivo estilos.css en una carpeta llamada css

      2.1  Copiar los estilos para cada control

Probar en un navegador

3.- Renombrar el archivo por Practica001.aspx

3.1 Agregar un script de C# al inicio de la pagina  

 

3.2 Agregar componentes de formulario en la section con id=izquierda

4- Crear sitio web  “CursoADONET” 

4.1 Usando mouse secundario sobre This PC

 

Cambiar el puerto, por si ya se esta ocupando el 80

 

Quedaria asi:

 

 

4.2 En Default Document, debe quedar Practica001.aspx en primer lugar

 

 

5.- Probar en el navegador

      si se coloca solo localhost en la url muestra lo siguiente:      

              http://localhost

 

Si se pone el puerto seguido del nombre del archivo muestra el formulario dentro de la section con id=izquierda:  

                   http://localhost:8010/Practica.aspx

Cuando se ejecuta el boton Aceptar, ejecuta codigo de C# para manipular los datos capturados



ooooooooooooooooooooooooooooooooo0ooo0ooooooooooooooooooooooo
ooooooooooooooooooooooooooooooo000oo000oooooooooooooooooooooo