tutorial html

13
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:

Upload: liliana-hidalgo

Post on 06-Apr-2016

228 views

Category:

Documents


2 download

DESCRIPTION

El presente trabajo trata acerca de la conexion en html desde visual studio 2010 con sus respectivos pasos detallados de uno en uno espero les sirva de ayuda.

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.