Tips de Desarrollo Web

Desarrollando Sitios Web HTML5 y echando un vistazo a los MasterPages de ASP.NET

27. julio 2013 16:14 / Nicholls / ASP.NET . HTML5 / Comentarios (0)

Hoy en día es muy importante desarrollar sitios web modernos que ofrezcan una rica experiencia de usuario, por lo cual se han impuesto tecnologías dominantes como HTML5, CSS3 y Javascript. Estas nos están permitiendo generar contenido web Semántico, cada vez mucho más estructurado, siguiendo estándares los cuales son regulados por el consorcio W3C.

Entonces, que hay que hacer para que nuestros desarrollos puedan incorporar estas tecnologías y sean soportadas en la mayoría de navegadores? Este es un artículo que pretende reunir las mejores herramientas y soluciones que respondan a este problema.

Compactibilidad

Primero debemos visualizar nativamente cual es la compactibilidad que tiene los elementos HTML5 que vayamos a emplear frente a los navegadores.

Como la mayoría de incompatibilidades provienen de versiones viejas de Internet Explorer, podemos emplear un script para habilitar el uso de diferentes elementos HTML5.

Más sin embargo existe un librería muy poderosa que además de emplear HTML5Shiv permite realizar mejoras progresivas fácilmente y seleccionar las características de HTML5 que estemos utilizando para que se habiliten.

Hasta ahora hemos visto como enfrentar problemas con respecto al soporte de HTML5 que nos ofrecen los navegadores, pero que hay con respecto al diseño? Como logramos garantizar que nuestros diseños se vean igual en todos los navegadores?. Para responder a esta pregunta existen varias soluciones para hacer el css más consistente, la que más recomiendo es Normalize.

Más sin embargo existen otras buenas opciones

http://cssresetr.com/

Javascript

Gracias al Javascript y a todos los frameworks que han surgido podemos manipular muy fácilmente los elementos html, facilitándonos la manera de realizar validaciones, de generar animaciones y de realizar llamados asíncronos a nuestros servidores, entre otros. Por experiencia de usuario se recomienda emplear el javascript después de que se hayan cargado los estilos y el contenido de la página, por lo tanto se ubicarían antes de cerrar el body.

Algunas de las librerías más conocidas son

Para nuestro Javascript como para los obtenidos de terceros siempre nos debemos preocupar de tener la versión minimizada, la cual por estándar finaliza en …min.js. El javascript que realizamos manualmente puede ser compilado para garantizar que nuestros archivos pesen menos y carguen más rápido a la hora de llevarlos a producción.

Para que nuestras páginas aparezcan en los resultados de Google, se debe ser amigables con el SEO y por lo tanto saber emplear el Javascript, conocer que el contenido que se cargue mediante AJAX no será visible debido a que el javascript no se ha ejecutado. Más sin embargo existen técnicas para indexar manualmente el contenido cargado asíncronamente

http://ajax.rswebanalytics.com/

Optimizar el sitio web en la Búsqueda de Google

Para empezar podemos emplear las herramientas que provee Google para que nuestra URL se incluya en el índice. Además de entrar al centro para webmasters y añadir nuestro sitio.

http://www.google.es/intl/es/submit_content.html

Además procederemos a entrar al Analytics de Google, para configurar y obtener el script correspondiente a nuestro sitio.

http://www.google.com/analytics/

Probar nuestros desarrollos

Cuando estamos en la etapa final de nuestros desarrollos, es importante que las probemos para realizar las correcciones necesarias. Hoy en día existen 2 grandes herramientas en línea las cuales mediante la URL de nuestra página, podemos observar recomendaciones de mejora para que se procese mejor nuestro contenido y cargue mucho más rápido.

http://www.modern.ie/es-es

https://developers.google.com/speed/pagespeed/insights

Se ha vuelto una tendencia realizar aplicaciones fluidas, que se adapten a cualquier tipo de pantalla. Para esto existen herramientas en línea para comprobar su correcta visualización.

http://www.responsinator.com/

http://www.typetester.org/

También podemos conocer las medidas de pantalla de un gran número de dispositivos

http://screensiz.es

Estar Actualizados

Para estar actualizados frente HTML5 recordemos entrar a HTML5ROCKS

http://www.html5rocks.com/en/

Mi recomendación es que al terminar nuestros desarrollos, configuremos los archivos que se pueden cachear y así no se tengan que estar cargando de nuevo, y nuestro sitio por tanto después de la primera vez de que el usuario entre, cargue mucho más rápido.

Práctica

Para realizar cualquier proyecto desde 0 y tener configurada la mayoría de las opciones anteriormente descritas existe una plantilla que podemos descargar, la cual se esta constantemente actualizando.

http://html5boilerplate.com/

Además tenemos un generador de plantillas HTML5 basado en Boilerplate para generar nuestra plantilla limpia con la cual tu puedas iniciar.

http://www.initializr.com/

En este ejemplo vamos a descargar la plantilla Boilerplate, por lo cual procedemos a entrar a la página web.

Después de descomprimir el archivo descargado, podemos visualizar una estructura de archivos como la siguiente.

Procedemos a eliminar todo lo que no necesitamos, quedando de la siguiente manera.

Como podemos observar ya tenemos una estructura limpia para empezar a desarrollar, una base para todos nuestros proyectos.

MASTER PAGES en ASP.NET

Para aclarar, una página maestra nos permite reunir entre otras cosas un diseño estándar que se tendrá en varias páginas de nuestra aplicación, a la cuales ASP.NET llama páginas de contenido. Cuando se solicita una página de contenido en el browser, esta se fusiona con su página maestra para dar como resultado el diseño de la página principal y los datos de la página de contenido.

Procedemos a abrir nuestra estructura base en Visual Studio.

En el Explorador de la Solución, procedemos a agregar nuestra Página Maestra a nuestro Sitio Web.

En nuestra Página Maestra vamos a copiar la estructura que viene en el Index.html de Boilerplate, por lo tanto cambiaremos la que viene por defecto

Por la nueva, ubicando 3 ContentPlaceHolders en posiciones estratégicas, las cuales vayan de la mano con las recomendaciones dadas en este artículo sobre HTML5.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>




<html class="no-js">
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

head: espacio destinado para ubicar las hojas de estilo propias de cada página de contenido, además de meta-tags tanto para el SEO de google como para los de facebook. El main.css no es prescindible por lo cual podemos borrarlo.

<body>
    
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="content" runat="server">
        </asp:ContentPlaceHolder>
    </form>

content: espacio destinado para ubicar el contenido específico de la página de contenido. Este se ubica dentro de un formulario que renderiza el servidor (runat=”server”), por lo tanto podemos emplear elementos html, elementos html renderizados por el servidor y controles de asp.net. Recordemos que como estándar html, no esta bien introducir un elemento formulario dentro de otro por lo cual este sería nuestro único tag form.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <asp:ContentPlaceHolder ID="scripts" runat="server">
    </asp:ContentPlaceHolder>

    
    <script>
        var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
        (function (d, t) {
            var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
            g.src = '//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g, s)
        }(document, 'script'));
    </script>
</body>
</html>

scripts: espacio destinado para ubicar los scripts, tanto externos como los realizados por nosotros mismos, en la página de contenido, este se llama después de cargar el jquery, y se ubica antes de cerrar el body para que de esta manera, visualmente, la página de la sensación de que carga más rápido para el usuario, porque primero se cargan las hojas de estilo, luego el contenido y por último se hace dinámica la página mediante el javascript.

Por lo tanto crearemos una página de contenido de esta página maestra para visualizar los espacios respectivos. Click derecho en la página maestra, añadir página de contenido.

Podemos observar eficazmente los 3 espacios destinados para las páginas de contenido, en las cuales estará la información propia de cada página.

Es bueno aclarar que cuando agregamos un página de contenido, viene un nombre por defecto y si se va a cambiar yo recomiendo realizar el siguiente procedimiento.

1. Click derecho en la página, renombrar.

2. Dirigirnos al Código Subyacente de la página “.cs” y cambiar el nombre de la Clase por el nuevo.

3. Y por último cambiamos el Inherits de nuestra página para que apunte a la clase de nuestro código subyacente.

Para terminar mostraremos el 404.html que viene con Boilerplate en nuestro Sitio Web, cuando suceda algún error en producción. Espero que no suceda pero es mejor prevenir a que los usuarios puedan visualizarlos. Para esto agregaremos un archivo de configuración “Web.config” el cual nos permite entre otras muchas cosas, controlar esto.

En Visual Studio 2012 es mucho más fácil.

Por defecto, en .NET Framework 4 en adelante, el archivo de configuración se ve de la siguiente manera (más limpio).

<?xml version="1.0"?>

<configuration>

    <system.web>
      <compilation debug="false" targetFramework="4.0" />
    </system.web>

</configuration>

Para nuestro control de errores, el archivo de configuración será de la siguiente manera

<?xml version="1.0"?>

<configuration>

    <system.web>
      <compilation debug="false" targetFramework="4.0" />
      <customErrors defaultRedirect="404.html" mode="On">
        <error statusCode="404" redirect="404.html" />
      </customErrors>
    </system.web>

</configuration>