Download - Tutorial html

Transcript
Page 1: 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 MoralesOctubre 2014 – Marzo 2015

AMBATO – ECUADOR

Page 2: Tutorial html

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

Page 3: Tutorial html

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

Page 4: Tutorial html

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

Page 5: Tutorial html

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

Page 6: Tutorial html

{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;

Page 7: Tutorial html

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>

Page 8: Tutorial html

<divalign="center"><imgsrc="http://www.punto6.com.ar/blog/wp-content/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>

Page 9: Tutorial html

<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

Page 10: Tutorial html

{

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.


Top Related