Blog de Jorge Pedraza

julio 20, 2009

Convertir pagina HTML a ASP.NET

Filed under: Aplicaciones Web — JorgePedraza @ 7:18 pm
Tags: , ,

Uno de los escenarios web que se puede encontrar cualquier desarrollador de página Web dinámica como es el caso ASP.NET; es tratar de crear, mantener y entregar sitio ASP.NET atractivos y funcionales acorde con requerimientos específicos. Y todo esto basado en organizaciones (Compañía de Software) Heterogénea, donde existe equipos de desarrollo (ASP.NET), equipos de diseñadores grafico (Plataforma y Herramientas de diseño de Tercero) así como coordinadores de proyecto separado geográficamente.
Dado  a esta situación el desarrollador ASP.NET va depender primeramente de la aprobación de la estructura del sitio web; posteriormente la elaboración y entrega del arte (Plantilla web HTML) por parte del equipo de diseño grafico y finalmente es donde dicho desarrollador web dinámico (ASP.NET) genera todo la ingeniera de código web dinámico relacionado con el sitio.
Entonces el presente artículo tiene como finalidad básica de exponer una forma sencilla y directa de convertir cualquier sitio web estático (Páginas Web HTML) a proyecto ASP.NET (Pagina Dinámica).

Para fines de este articulo, se va utilizar un proyecto web ASP.NET 2.0 con lenguaje Visual Basic 2005, ademas de un plantilla web de prueba que se puede encontrar en sitios web gratis o pago; una vez claro con estas pautas se comenta los siguientes:

  1. Establecemos la plantilla web para el supuesto cliente. Un ejemplo de esto puede ser:plantillas-gratis-014.
  2. Creamos un proyecto del tipo Aplicación Web ASP.NET, el cual llamaremos ASPNETCasinoOnline.
  3. Por defecto en el proyecto ASP.NET  encontramos basicamente dos archivos (default.aspx y Web.Config), del cual podemos  prescindir de default.aspx, pulsando boton derecho sobre èl desde el explorador de soluciones y luego click en delete o eliminar.
  4. Ahora explico una forma rapida y sencilla para que la plantilla web con todo su contenido forma parte del proyecto ASP.NET en Cuestion: y es simplemente copia todo el contenido relacionado con la plantilla incluyendo la pagina html en la caperta del proyecto ASP.NET creado previamente; notando que la ubicación exacta sea donde esta el archivo Web.Config.
  5. Volvemos a Visual Studio y buscamos en el explorador de soluciones, y nos situamos en la opción mostrar todos los Archivos o Show All files, en algunos casos solo se actualiza:SESAF, luego debe aparecer las información relacionado con la plantilla y es ahi donde por cada elemento debemos incluir en proyecto o Include in Project: ESIP y finalmente se completa como:ListoSE.
  6. Se procede a cambiar la extensión de index.html a index.aspx.
  7. Se agrega un elemento nuevo del tipo Class.vb con el siguiente nombre index.aspx.vb; posteriormente en su contenido se reemplaza con:  Public Class index   Inherits System.Web.UI.Page   End Class.
  8. Se agrega un elemento nuevo del tipo Class.vb con el siguiente nombre index.aspx.designer.vb; posteriormente en su contenido se reemplaza con: Partial Public Class index Protected WithEvents form1 As Global.System.Web.UI.HtmlControls.HtmlForm  End Class
  9. Se pulsa boton derecho sobre index.aspx y se da click vista de marcado o view Markup
  10. Se anexa en la primera linea del documento HTML: <%@ Page Language=”vb” AutoEventWireup=”false” CodeBehind=”index.aspx.vb” Inherits=”ASPNETCasinoOnline.index” %>
  11. Se busca y modifica lo siguiente: <form id=”form1” name=”form1” method=”post” action=””> a <form id=”form1″ runat=”server>
  12. Ahora se pone en juego hacer que cada elemento HTML de interés se convierta en un objeto de lado del servidor insertando dentro de la etiqueta html la palabra clave runat=”servery además un nombre especifico para el Id de la etiqueta. Ejemplo: <a href=”” id=”linkDownloadrunat=”server >Download</a>. Luego ya tenemos visibilidad de los objetos html de lado de servidor con relación al codigo de programación .net. 

Una vez entendido estas series de pasos sencillos; se puede utilizar de forma analoga para cualquier objeto del tipo html y plantilla relacionada. incluso se puede aprovechar esta plantilla para crear un MasterPage.

En conclusión encontramos una forma ideal para trabajar alineado con algunos escenarios de desarrollo web aplicado en Organización heterogénea, el cual permitirán sacar mayor partido de la solución Planteada, junto con las herramientas de desarrollo web de Microsoft.

Para Mayor Información Anexo POnlineCasino y ASPNETCasinoOnline

12 comentarios »

  1. muy interesante el articulo, estaba siguiendo los pasos para convertir mi plantilla pero tengo error al colocar la linea en el asp con el nombre de mi plantilla, tengo el visual studio 2005 y presenta ese error en el inherits,cheque todo pero no encuentro el error.
    me gustaria y pulicaras el procedimiento para hacerlo pero con una masterpage ya que es mas sencillo y solo se jalan contentplaceholder en los lugares donde lleve codigo asp sin modificar la plantilla.
    Saludos

    Comentario por jesus — diciembre 1, 2009 @ 1:43 am | Responder

    • Hola Jesus, Gracias por tu comentario!

      Recuerda que el nombre de tú plantilla convertida en Front End (*.ASPX), lo debe establecer también en el Code behind (*.VB or *.CS), y finalmente realiza respectivo enlace entre ellos para que funcione.

      Ahora en el caso de un Master Page es un poco Artificioso de forma manual. Para esto simplemente debe crear un master page a raiz del proyecto; luego debe trasladar y sustituir parcialmente todo el código HTML de tú plantilla dentro de dicho master Pager creado, siempre y cuando mantenga las instrucciones reservada base además de su contenido web relacionado (carpeta de imágenes) en el mismo proyecto.

      De toda manera si necesita más ayuda, avisa por favor.

      Saludos.

      Comentario por jorgepedraza — diciembre 1, 2009 @ 2:35 pm | Responder

      • que tal

        recordando esta pagina cuando batallaba con la linea anterior del asp

        ahora volvi a hacerlo y me marcaba error en el inherits nuevamente pero encontre la solucion cambiandole solamente de codebehind por codefile y listo!!!
        me funciono tmb en visual studio 2008

        tmb aprendi a realizarlo en una master aunque un poco tedioso pero resulto

        gracias por el post!!!

        saludos

        Comentario por JESUS — septiembre 29, 2010 @ 4:17 am

  2. Buen Dia Jorge, gracias por tu valiosa ayuda tu nota publicada me sirvio mucho para un proyecto que tengo para mi universidad.

    Quisiera saber si sabes algo sobre administradores de contenido para aspx.net busque uno que se llama dotnetnuke pero no se configurarlo te agradeseria muhco una respuesta.

    Atte. Camilo Cely Becerra. Bogota Colombia.

    Comentario por camilo cely — diciembre 11, 2009 @ 7:55 pm | Responder

  3. Hola, cuando termine de construir mi wiki de matemáticas, será interesante ……
    Un saludo

    Comentario por Miren — diciembre 18, 2009 @ 3:17 pm | Responder

  4. Bueno mi pregunta es, que al parecer esta diseñada para Visual Basic, yo estyo trabajando con C#, cambia en algo cambio mucho por donde me pudo guiar, soy principiante en este tema. Gracias

    Comentario por Oscar Steeven — noviembre 7, 2010 @ 1:02 am | Responder

    • Hola Oscar.
      Gracias por el comentario.
      Efectivamente puede tomar como referencia este articulo para soluciones basada en C#.

      Saludos.

      Comentario por jorgepedraza — enero 2, 2011 @ 8:04 am | Responder

  5. […] Convertir pagina HTML a ASP.NET julio, 2009 7 comentários 4 […]

    Pingback por Los números de 2010 « Blog de Jorge Pedraza — enero 2, 2011 @ 7:32 am | Responder

  6. Me sirvio mucho.
    Gracias por la información!

    Comentario por Natha — marzo 29, 2011 @ 2:01 pm | Responder


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Crea un blog o un sitio web gratuitos con WordPress.com.

A %d blogueros les gusta esto: