Tutorial html

UNIVERSIDAD TÉCNICA DE AMBATO FACULTAD DE CIENCIAS HUMANAS Y DE LA EDUCACION CARRERA DE DOCENCIA EN INFORMÁTICA MODALIDAD PRESENCIAL

ELEMENTO 2

Lenguaje de Programación II SEXTO SEMESTRE

Estudiante: Liliana Hidalgo Docente: Ing. Andrés Morales Octubre 2014 – Marzo 2015 AMBATO – ECUADOR

EJERCICIO #3 EN HTML Elaborar una aplicación web con tres páginas: Inicio, Producto, Acerca de..

La página Inicio debe tener un título, un párrafo de introducción La página Producto con al menos 5 productos y al menos 5 campos o columnas y debe permitir añadir más.

La página Acerca de..Información de productos, empresa ficticia, usted escoge Aspecto personalizado (colores, fuente, fondo, etc.)

1.- Crear base 2.- Crear tabla 3.- Crear Modelo Carpet Model Añadir clase Nombre: MovieDB.cs Public class Movie DB Columnas Public class Movie DB Context :DbContext Public DbSet <MovieDB> Movies 4.- Añadir controlador Volver a generar Carpeta controlador addController:MoviesController template Model class MovieDB (MVC Demo Models) 5.- Connections

PASOS PARA REALIZAR ESTE EJERCICIO 1.- Abrimos el software Microsoft Visual Studio 2010

2.- Escogemos la opci贸n nuevo proyecto posteriormente colocamos un nombre al proyecto y damos clic en aceptar

3.- En la siguiente ventana escogemos la opci贸n de Internet aplicaci贸n y damos clic en ok.

4.- Nos sale nuestra p谩gina de inicio

5.- En la parte derecha del programa nos vamos a la carpeta Content escogemos la opci贸n site.css y nos aparece la siguiente ventana.

En la ventana cambiamos ese c贸digo con el siguiente c贸digo.

body { font: "Trebuchet MS",Verdana,sans-serif; background-color: #5c87b2; color: #696969; } h1 { border-bottom: 3pxsolid#cc9900; font: Georgia,serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 04px4px4px; } a { color: #034af3; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menuli { display: inline; } ul#menulia { background-color: #e8eef4; padding: 10px20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px4px00;

} ul#menulia:hover { background-color: #ffffff; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldsetlabel { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data { background-color:#ffffff; border:1pxsolid#c3c3c3; border-collapse:collapse; width:100%; } table.datath { background-color:#e8eef4; border:1pxsolid#c3c3c3; padding:3px; } table.datatd { border:1pxsolid#c3c3c3;

padding:3px; } 6.- Damos doble clic en la carpeta Controllers cambiamos con el siguiente c贸digo:

using System; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Web; usingSystem.Web.Mvc; namespaceMvcProductos.Controllers { publicclassHomeController : Controller { publicActionResult Index() { return View(); } publicActionResult About() { return View(); }

} } 7.- Damos doble clic en la carpeta Views en la subcarpeta Home cambiamos la opción About con el siguiente código:

@{ViewBag.Title = "Acerca de..";} <h2ALIGN=centerstyle="color:Fuchsia"> NESTLE</h2> <divalign="center"><imgsrc="http://www.punto6.com.ar/blog/wpcontent/uploads/nestle.jpg"></div> <hrsize="1px"color="blue"/> <pstyle="color:black">Casi 60 años han transcurrido desde que Ecuador nos abrió generosamente sus puertas e inauguramos una relación beneficiosa para todos quienes integran nuestra cadena de valor. Durante este tiempo, hemos privilegiado la concepción de Ganar-Ganar, como eje de acción y característica del vínculo con nuestros consumidores, proveedores, clientes y colaboradores. Este hecho ha incidido positivamente en nuestro posicionamiento como la empresa líder en Nutrición, Salud y Bienestar, en Ecuador, tal como ha ocurrido en todos los países donde Nestlé opera. </p>

<hrsize="1px"color="blue"/> 8.- Damos doble clic en la carpeta Views en la subcarpeta Home cambiamos la opción Index con el siguiente código:

@{ViewBag.Title = "Inicio";} <h2style="color:red">BIENVENIDOS</h2> <hrsize="1px"color="Turquoise"/> <h2ALIGN=centerstyle="color:Fuchsia">PRODUCTOS

ALIMENTICIOS

EN

ECUADOR</h2> <pstyle="color:blue">El consumo de alimentos es de carácter masivo y la industria dedicada a la elaboración de los mismos tiene una particular relevancia dentro de la producción y desempeño económico nacional. El Instituto Nacional de Estadística y Censos (INEC)ofrece información importante relacionada a ésta y otras industrias, la cual se condensa y complementa con datos relevantes de otras fuentes en el presente análisis con el objetivo de realizar un

diagnóstico del sector que permita evaluar su comportamiento y su importancia estratégica dentro de la economía en su conjunto y como herramienta para afrontar la actual crisis financiera y alimentaria mundial. Según las Cuentas Nacionales, en el 2007 el valor agregado de la industria manufacturera sin incluir la refinación de petróleo representó el 13,99% del Producto Interno Bruto (PIB) siendo la industria de alimentos y bebidas la de mayor aporte (7,83% del PIB). Además tiene especial importancia dentro del sector manufacturero pues contribuye con el 55,9% de su valor agregado </p> <hrsize="1px"color="Turquoise"/> <pstyle="color:black">Aplicacion - Productos - Liliana Hidalgo </p> 9.- Luego de ingresar este codigo damos clic encima de la carpeta Models y escogemos la opcion agregar nueva clase y agrgamos una clase en esta ventana colocamos el siguente codigo. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity; namespace MvcProductos.Models { public class ProductoDB { public int ID { get; set; } public string Precio { get; set; } public string Nombre { get; set; } public DateTime Fecha { get; set; } } public class ProductoDBContext : DbContext {

public DbSet<ProductoDB> Productos { get; set; } } } 10.- En la barra de herramientas buscamos la opcion generar y escogemos la opcion volver a generar proyecto productos.

11.- En el archivo Web Config abrimos esta carpeta y agregamos el siguiente codigo: <add name="ProductoDBContext" connectionString="Data Source=|DataDirectory|\Productos.sdf" providerName="System.Data.SqlServerCe.4.0"/> 12.- Por ultimo paso agregamos un controlador para esto damos Clic en la carpeta Controller agregar nuevo controller e ingresamos los datos requeridos.