Tag Archive: Tutorial IE9


Encontré este artículo en la web de MSDN España, espero les sirva:

En este artículo explicaremos cómo crear nuestra primera página en HTML5 y CSS3 con WebMatrix 2, veremos algunas de las novedades en etiquetas y atributos de estos estándares y las ventajas que nos ofrece WebMatrix 2 para esta tarea.

Para ello necesitaremos descargar la herramienta:


Descárgalo gratis desde aquí, empieza a desarrollar tu sitio web y ayuda a mejorar la herramienta publicando tu feedback en el foro de WebMatrix.

internetexplorer9logo
Internet Explorer 9 es el navegador más compatible con HTML5. Si no lo tienes instalado deberías probarlo. Puedes descargarlo desde aquí.

 

Empieza con WebMatrix

imageimage

Cuando iniciamos WebMatrix tendremos la opción de abrir un sitio ya creado, de empezar a programar desde una plantilla o instalar una aplicación de la galería. Elegiremos crear nuestro sitio web desde una plantilla, que será la plantilla de sitio vacío para crearlo desde cero.

En la pantalla principal de WebMatrix seleccionamos el icono Files de la parte inferior izquierda y haremos doble clic en el fichero Default.cshtml. Este fichero será nuestra página de inicio del sitio web. Viene con la estructura base para que podamos empezar a programar en HTML5 y utilizar sintáctica Razor para código de servidor. En este artículo nos centraremos en el código HTML5.

 

Estructura HTML5

Con HTML5 tendremos una web más simple y semántica gracias a las nuevas etiquetas para identificar mejor algunos elementos y no llenar nuestra página de elementos div sin ningún valor semántico. El ejemplo más claro son las etiquetas <video> y <audio> utilizadas para esta clase de elementos multimedia pudiendo identificarlos mejor que con los típicos div con un id.

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

</body>

</html>

image

Con WebMatrix 2 si no tienes muchos conocimientos de HTML5, su estructura y nuevas etiquetas, no te preocupes, mientras escribes te aparecerán sugerencias mostrándote las etiquetas que puedes utilizar y cuando la selecciones te pondrá la etiqueta de cierre automáticamente para que no se te olvide.

imageSi quieres una ayuda más amplia puedes presionar el icono de ayuda que aparece arriba a la derecha. Este icono abre un panel en el que aparecen enlaces a material y cursos referente al tipo de codificación que tenga la página. Si estamos creando una página .cshtml podremos ver ayuda sobre ASP.NET si es .html será sobre HTML5, etc.

 

Uso de Header, Nav y Footer

Vamos a editar la estructura para adecuarla a lo que queremos, empezando por cambiar el lenguaje de la página a español y poniendo el título “Mi primer sitio html5”. También pondremos un título, un menú de navegación y el pie de página.

Existe una etiqueta nueva denominada <header>. Se utiliza para los elementos que sean encabezados, normalmente títulos, que tengamos en nuestra página y pueden haber varias de estas etiquetas. El título lo pondremos dentro de una etiqueta <header>.

Para el menú utilizaremos la etiqueta <nav> que es la etiqueta para este tipo de funcionalidad que se ha añadido en HTML5. Añadiremos unos cuantos enlaces en el menú. En HTML5 también existe una etiqueta <menu> pero hay que tener en cuenta que si se trata del menú de navegación se debe utilizar <nav>.

El pie de página será un elemento <footer> y dentro de este hemos añadido el copyright y una fecha para mostrar la última actualización.

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8" />

<title>Mi primer sitio HTML5</title>

</head>

<body>

<header><h1>Mi primer sitio HTML5</h1></header>

<nav>

<ul>

<li><a href="#">inicio</a></li>

<li><a href="#">blog</a></li>

<li><a href="#">vídeos</a></li>

</ul>

</nav>

<footer>

<small>

Copyright &copy; 2011<br/>

Actualizado en: 11 Noviembre 2011

</small>

</footer>

</body>

</html>

Etiquetas Section y Article

Para que no quede tan desolada la página vamos a añadir algo de texto. Para ello insertaremos un elemento <section> entre el menú y el pie, y dentro de ella unos elementos <article> donde pondremos un pequeño texto con un título. El título lo pondremos también entre etiquetas <header>.

<section>

<article>

<header><h2>WebMatrix 2</h2></header>

<p>WebMatrix 2 Beta es una herramienta para desarrollo web con la que

podrás instalar, desarrollar, optimizar, desplegar y administrar tus sitios.

De esta forma, WebMatrix 2 te permite crear tus sitios web utilizando sólo

una herramienta. Esta herramienta trae consigo muchas novedades orientadas

sobre todo a ayudar al desarrollador en la tarea de construir su sitio

web.</p>

</article>

</section>

La etiqueta <article> está pensada para definir contenidos que pueda publicarse o distribuirse independientemente, como artículos, comentarios de post, etc. Unas etiquetas de este tipo pueden contener a otras por ejemplo tener el contenido de un post con esta etiqueta y después varias etiquetas dentro correspondientes a los comentarios del mismo.

Definir el uso de <section> es un poco más complejo. Según el estándar representa una sección genérica agrupando un contenido con la misma temática y contiene una cabecera.

Puede ver todas las nuevas etiquetas de HTML5 aquí.

Primer vistazo

image

Ahora ejecutaremos el sitio para ver el resultado de nuestro primer código HTML5. Para ello tenemos el botón Run en la barra superior. Podemos presionar directamente este botón abriéndose nuestro sitio en el navegador que tengamos por defecto o acceder al menú para seleccionar en cuál queremos ejecutarlo o hacerlo en todos con un único clic.

image

Editar estilo con WebMatrix

El resultado que obtenemos es muy simple debido a que no hemos aplicado ningún estilo, así que nos pondremos a ello. Seleccionamos nuestro sitio web y crearemos un nuevo fichero, ya sea presionando el botón New en el menú de la parte superior o haciendo clic con el botón derecho encima de la carpeta de nuestro sitio “Mi primer sitio HTML5”.

Nos aparecerá el panel para elegir el tipo de fichero y nombrarlo. Elegiremos un fichero de tipo CSS y de nombre pondremos estilo.css.

image

Se nos abrirá el fichero CSS para que lo editemos. Si tenemos abierto el panel de ayuda de la derecha podremos ver distintos enlaces a material sobre CSS. Aparte de esta ayuda y de las sugerencias que te ofrece WebMatrix para completar el código, tenemos un Color imagePicker.

Este control aparece cuando tenemos que poner alguna propiedad de tipo color. Tendremos una barra donde podremos elegir colores de una fila estando al principio los que hayamos usado ya en la página. Si presionamos el botón + que está en la barra se despliega un panel con el que podremos elegir mejor el color que queramos y cambiar la transparencia o, en cambio, copiar alguno gracias a la herramienta de selección de color.

Otra ayuda interesante que nos propone WebMatrix aparece a la hora de escribir el valor de algún atributo, informándonos, aparte de sugerencias de posibles valores, qué tipo de valores puede contener ese atributo. En el ejemplo podemos ver cómo nos aparece que el atributo font-size puede tener valores absolutos, relativos, una unidad de medida o un porcentaje.

image

 

Maquetar la página

Una vez explicado cómo WebMatrix nos puede ayudar con nuestro estilo, vamos a ir creando un estilo no muy complejo para nuestro sitio web. Primero tendremos que añadir a nuestro fichero HTML5 en la sección <head> un enlace al fichero CSS para que coja el estilo aplicado en ese CSS.

<link rel="stylesheet" href="estilo.css"/>

Empezaremos por “colocar” las 3 partes que se compone nuestra página. Pondremos el menú de navegación a la izquierda, la sección con los artículos a la derecha y el pie de página debajo de la sección a la izquierda. También le daremos un ancho fijo a cada una.

nav{

float:left;

width: 150px;

}

section{

float:right;

width:570px;

}

footer{float:left}

He elegido ese ancho debido a que voy a crear la página para una resolución de 1024×720. Lo ideal si se pone un ancho fijo es ir cambiándolo según la resolución del dispositivo desde el que esté navegando el usuario con las Media-Queries. Con las Media-Queries podremos hacer sentencias más precisas que las que podíamos hacer con la regla Media gracias a los nuevos valores que se pueden introducir en los atributos.

Para que quede bien el contenido debemos poner un ancho fijo también al <body> y así centramos el contenido. De paso, utilizando el Color Picker, elegiremos un color para el fondo y pondremos un pequeño margen.

body {

background-color:#f2f2f2;

margin: 36px auto;

width: 720px;

}

Personalizar el menú de navegación

Una vez estructurada la página vamos a dar estilo al menú de navegación. Con el atributo list-style-type podemos cambiar el tipo de enumeración de la lista, para este caso no pondremos ninguno y añadiremos un margin y un padding igual a cero.

nav ul {

list-style-type:none;

margin: 0px;

padding: 0px;

}

También utilizaremos text-transform para aplicar transformaciones al texto, en este caso de todas las transformaciones que tenemos usaremos la de poner la primera letra de las palabras en mayúscula, “capitalizar” las palabras de la lista, cambiaremos el color del texto y quitaremos el formato de enlace.

nav ul li {

margin: 5px; padding: 10px; text-transform:capitalize; font-size: 20px;

}

nav ul li a {

color:#e34c26;

text-decoration: none;

}

Utilizar CSS Selector

Una característica interesante de CSS3 es la posibilidad de seleccionar elementos por medio de los CSS Selectors. Los CSS Selectors nos permiten elegir a qué hijos de un elemento queremos aplicar un determinado estilo de una forma fácil. Cómo ejemplo vamos a aplicar un estilo distinto a los elementos pares e impares de <article> que tenemos poniendo un fondo blanco con distinta transparencia con el Color Picker.

article:nth-child(odd){

background-color:rgba(255, 255, 255, 0.20)

}

article:nth-child(even){

background-color:rgba(255, 255, 255, 0.60)

}

Podemos ver que con CSS Selector aplicar un estilo distinto dependiendo de la paridad del elemento es muy fácil con el atributo odd y even. También acepta ecuaciones, por ejemplo (3n), con lo que el estilo se aplicaría cada 3 elementos.

 

Redondear esquinas de bordes con border-radius

Para mejorar un poco el aspecto de nuestra página vamos a añadir bordes a los elementos de nuestro menú y artículos.

En CSS3 se ha añadido una nueva característica denominada border-radius con la que podremos redondear los bordes de los elementos sin necesidad de poner imágenes de fondo para lograr esta clase de efecto. Se puede cambiar el ángulo de la curva del borde para decir cuán pronunciada la queremos.

Aplicaremos un borde uniforme a los artículos mientras que para los elementos del menú haremos un borde más estiloso para comprobar todo el potencial de este atributo. Más información aquí.

article{

margin-bottom:5px; padding: 10px;

border-radius: 10px 10px 10px 10px;

border-style: solid;

border-width: 2px;

border-color:#ffffff;

}

nav ul li {

margin: 5px; padding: 10px; text-transform:capitalize; font-size: 20px;

border-radius: 152px 304px 228px 152px;

border-style: solid;

border-width: 3px;

border-color:#ffffff

}

Último vistazo

Ya hemos creado nuestra estructura en HTML5 y aplicado un estilo a los elementos viendo algunas de las novedades de CSS3. Para acabar volveremos a ejecutar nuestro sitio para ver el resultado.

image

Recursos y referencias

Descarga WebMatrix 2 Beta

Novedades de WebMatrix 2 Beta para crear sitios web

Sintaxis de WebMatrix y vistas de ASP.NET MVC

Acceso a Bases de Datos y Helpers Sociales

Página oficial de WebMatrix

Desarrollo con WebMatrix

W3C: HTML5 y CSS3

Aquí pueden ver la fuente del artículo.

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Anuncios

Siguiendo con la serie “Tu Web para Internet Explorer 9” en esta oportunidad seguiré escribiendo acerca de como podemos crear JumpList en tu sitio web para aprovechar las características de Internet Explorer 9, en el post anterior a esta serie utilizamos etiquetas <meta> de HTML estándar, pero si queremos ir más allá con esta característica, necesitamos generar opciones para el JumpList de manera dinámica o aleatoria, hay varios escenarios en los que podríamos necesitar crear opciones aleatorias, sobre todo en sitios que incluyen una opción de inicio de sesión con usuario y contraseña.

Para darles una muestra de esta característica les mostraré el ejemplo del sitio de Twitter, si acceden a su cuenta en Twitter con su usuario y contraseña verán que el JumpList tiene más opciones:

Sin Ingresar:

Out Session

Una vez Ingresado:

In Session

Otra clase de JumpList son los dinámicos, como es el caso de la web de Discovery Channel :

Discovery

Como nos podemos dar cuenta el JumpList cambia y nos muestra más opciones de acuerdo a la página web, otra cosa que podemos notar es que las opciones están organizadas por Grupos de acciones, un grupo con el nombre “Tareas” y otro con el nombre “Discovery Favorites”.

El segundo grupo de acciones “Discovery Favorites” se generan aleatoriamente de la siguiente manera utilizando JavaScript:

  1. Crear  la categoría:
    Para empezar lo primero que debemos hacer es crear la categoría donde se incluirán las nuevas opciones en el jump list utilizando el método msSiteModeCreateJumplist y es necesario crear una lista antes de utilizar cualquier otro método posterior. Para crear una lista llamada "Amazon Favorites" agregaremos el siguiente código de Javascript:

    window.external.msSiteModeCreateJumplist(‘Amazon Favorites’);

  2. Agregar elementos:
    Luego de haber la categoría, agregamos acciones con el método
    msSiteModeAddJumpListItem:

    window.external.msSiteModeAddJumpListItem(‘Elemento1’, ‘URI del elemento1’, ‘URI del icono para elemento1’);

    De igual manera que usando la etiqueta <meta> aquí todos los atributos son obligatorios. En el caso del icono, el URI debe apuntar a un archivo .ico de 16 x 16 pixeles como mínimo. En el caso de Discovery.com, el primer elemento ‘Cash Cab’ de la categoría ‘Discovery Favorites’ se crea con la siguiente línea:

    window.external.msSiteModeAddJumpListItem("Cash Cab", "http://dsc.discovery.com/tv/cash-cab/&quot;, favicon);

    Cada categoría soporta hasta 20 elementos como máximo; si se agregan más los primeros serán eliminados automáticamente.

  3. Mostrar la lista:
    Esta lista se encuentra en memoria lista para mostrarse cuando sea más conveniente, con la siguiente línea:

    window.external.msSiteModeShowJumplist();

    Windows actualizará automáticamente el JumpList en memoria con las nuevas opciones.

  4. Borrar la lista:
    Cuando los nuevos elementos hayan servido su propósito, es posible borrar una categoría completa con la siguiente línea de código:

    window.external.msSiteModeClearJumplist();

Si un usuario elimina manualmente un elemento de un jump list creado de esta manera (con clic derecho como se ve abajo):

Discovery 2

Es posible detectar esta acción utilizando cualquier de los siguientes métodos:

document.addEventListener(‘mssitemodejumplistitemremoved’, removed, false);
document.attachEvent(‘onmssitemodejumplistitemremoved’, removed);

Lo que hará una invocación a la siguiente función con el URI de la opción eliminada como parámetro:

function removed(URI) { … }

Cualquier página en el mismo dominio en el que fueron creadas las nuevas categorías y opciones en el JumpList puede realizar modificaciones al mismo en cualquier momento.

Espero que esta tercera parte de la serie: “Tu Web para Internet Explorer 9”  sea de utilidad para los desarrolladores.

Saludos


Francis Urteaga
Microsoft MVP | Internet Explorer
Microsoft Student Partner Senior | Microsoft Perú
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

En este post realizaré un tutorial de cómo crear JumpLists para Internet Explorer 9 ya que con el lanzamiento de Internet Explorer 9 beta se han liberado también muchas características nuevas que integran los sitios web más con algunas características de Windows 7 como los JumpLists. Un JumpList es un menú emergente que se obtiene dando clic derecho sobre un sitio que ha sido arrastrado a la barra de tareas de Windows 7, y se ve así:

JumpList

En este caso podemos ver el JumpList del sitio del STC Cajamarca, que además de las opciones estándar de InPrivate Browsing y desanclar nos muestra una lista de acciones específicas para los usuarios del STC Cajamarca Otros sitios que integran esta funcionalidad son Twitter, Facebook y muchos más.

¿Cómo se hacen? Es realmente muy sencillo y pueden incluirse en cualquier sitio ya existente con un poco deHTML.

Acá viene un ejemplo: lo primero es ubicar el espacio para los encabezados meta de la página de inicio de nuestro sitio (default.* o index.*), que se encuentre dentro de las etiquetas <head> y </head> antes de<body> y colocar algo como la siguiente línea:

<meta name="msapplication-task"
  content="name=Título de la acción ;
  action-uri=URI a la que dirigirá esta acción;
  icon-uri=URI del archivo favicon para esta acción" />

Esta línea corresponderá a una acción en la JumpList del sitio: el nombre "msapplication-task" es obligatorio al igual que los otros tres atributos:

  • content: Será el título de la acción para el JumpList que aparecerá una vez instalada el sitio en la taskbar. Lo recomendable es que sea menor de 25 caracteres y lo más descriptivo posible.
  • action-uri: La dirección web que se abrirá en el navegador cuando reciba clic. Puede incluir variables GET y soporta http, https y ftp.
  • icon-uri:El icono que se mostrará a la derecha de la acción en la JumpList. El valor puede ir vacío pero no se puede omitir el atributo. El icono deberá tener ser al menos de 16 x 16 pixeles(Pueden crear uno para cada acción con el primer tutorial).

El mismo ejemplo del STC Cajamarca , la primera línea (PDC Cajamarca) se vería así:

<meta name="msapplication-task"
  content
="name=PDC Cajamarca;
  action-uri=
http://www.stccajamarca.com/PDC%20Cajamarca.html;
  icon-uri=http://www.stccajamarca.com/events.ico" />

Se pueden colocar tantas líneas como se necesite, aunque lo mejor es colocar las que al usuario más le hagan sentido. Con este pequeño tutorial ya pueden empezar a colocar JumpList a sus sitios web para que los usuarios de sus sitios saquen provecho de esta nueva funcionalidad.

Espero les sirva. Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
Microsoft Student Partner Senior | Microsoft Perú
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Estimados amigos este es mi primer post creado en Lima, resulta que estaba en internet (Que raro no?) cuando mi lindísima amiga Emi Piedra me hizo una consulta por el Facebook con lo siguiente:

Pregunta de Emi

Por lo que este Post se lo dedicaré a Emi Piedra mostrándole paso a paso como colocar un favicon.ico o icono en tu web.

Es decir, una pequeña imagen, que aparece en algunos navegadores junto a la dirección de una página web. Por ejemplo, ahora deberías estar viendo algo parecido a esto:

1

Antes que empezar quisiera comentarles que identificar tu sitio a través de un ícono es muy importante, ya que a parte de brindar estética, muestra seriedad y con Internet Explorer 9 puedes habilitar tu sitio para tratarlo como una aplicación en Windows 7.

Una de las cualidades de Internet Explorer 9 consiste en permitir a los sitios web aprovechar al máximo el poder de la PC, los usuarios pueden interactuar con sus sitios web como aplicaciones completas en la barra de tareas, esto gracias a que fijando un sitio a la barra de tareas el icono del sitio se utiliza como la principal forma de identificar y tener acceso al sitio, es decir necesitamos un ícono para identificar a nuestro sitio, para esto vamos a utilizar un sitio web que nos permite crear el ícono sin necesidad de instalar algún programa en la PC.

  1. Creando el Ícono: X-Icon Editor es una aplicación HTML 5 (basado en <canvas>) que le permite crear iconos de alta resolución que hará brillar a sus sitios con IE9. Con X-Icon Editor usted puede tener su sitio listo con un gran icono que brindará otra experiencia a sus usuarios!
    1. Primer Paso: Les sugiero que ya tengan listo su logo para que lo importen al X-Icon Editor, la interface del sitio web es la siguiente:
      interface
    2. Segundo Paso: Importamos el logo (De preferencia que sea cuadrado) dando clic en Import y nos aparecerá este cuadro:
      importar
      En el cual das clic a Upload y te abrirá un cuadro de dialogo para seleccionar la ubicación del logo a importar.
    3. Tercer Paso: Una vez importado la página web les mostrará lo siguiente:
      importado
      Luego exportamos y seleccionamos el destino y lo guardamos con el nombre de favicon.ico.
  2. Seleccionando el Ícono de nuestra web: Una vez creado y guardado el ícono en nuestra PC:
    1. Lo subimos a la carpeta principal de nuestra web (Upload a la Raíz).
    2. Luego agregamos este código HTML (De color amarillo) en nuestra página principal (Index, master, home, etc.) luego del título y los meta content, por Ejemplo:

      <title> | Mi sitio | </title>
      <meta content="Francis Urteaga" name="keywords" />
      <meta content="Página del MVP" name="description" />
      <link rel="shortcut icon" href="favicon.ico"/>

Con esto ya pueden anclar su sitio en la barra de tareas de Windows 7 y disfrutar de Internet Explorer 9 en su pc:

fin

En 2 días estaré publicando el segundo Post-Tutorial: Tu Web para Internet Explorer 9 – Parte 2 (JumpList) no se lo pierdan!!!

Saludos


MVP_Horizontal Francis Urteaga
Microsoft MVP | Internet Explorer
Microsoft Student Partner Senior | Microsoft Perú
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

A %d blogueros les gusta esto: