martes, 31 de enero de 2012

Novedades en Windows 8 (Nuevo)

(Cambios realizados gracias a los comentarios en el Blog de Building Windows 8)

A continuación comparto los nuevos cambios en Windows 8 publicados en el blog Building Windows 8:

En Windows 8, tenemos una nueva experiencia para seleccionar el archivo correcto cuando conflictos de nombre de archivo se encuentran durante una copia o mueven.

L. Brown dijo:

Un botón Comparar para mostrar si los archivos son iguales en el cuadro de diálogo "Seleccionar" ¡ sería genial!

Con frecuencia, la razón dos archivos tienen el mismo nombre es porque son copias. Hacer una elección entre dos archivos idénticos es generalmente inútil: es innecesario para una operación de copia y a menudo innecesarios para una operación de movimiento. Hemos mirado varios métodos de identificación de archivos duplicados y decidió que comprobar el nombre de archivo, tamaño de archivo y fecha atributos modificados fue el enfoque más eficaz. Se puede utilizar para identificar la mayoría de los archivos duplicados, rápida, eficiente y con buena compatibilidad en comparación con otros métodos como el hash del archivo.

En la versión beta, hemos añadido una nueva opción para el cuadro de diálogo de resolución de conflictos detallada. Marcando la casilla en la parte inferior izquierda del cuadro de diálogo, puede descartar todos los archivos que coincidan con el nombre, el tamaño (en bytes) y la hora (abajo a la granularidad de la marca de tiempo del sistema de archivos: 2 segundos de 100 nanosegundos para NTFS, FAT). El sistema omitirá copiar o mover estos archivos. Esta funcionalidad agrega ningún tiempo adicional para la operación, funciona tanto localmente y a través de redes y sobre todos los tipos de sistemas y almacenamiento.

File Conflict dialog with option to "Skip 2 files with the same date and size". In 2nd image, the option is selected, and 2 of the files no longer appear in conflict dialog.

A omitir la copias archivos con el mismo nombre, fecha y tamaño

Esta casilla de verificación está desactivada de forma predeterminada (para asegurar que los usuarios optan en el cambio de comportamiento), pero persiste una vez que se selecciona.

Copia: cambios de sistema

JL preguntado:

¿Sabes cuando iniciar un trabajo de copia grande y darse cuenta que está haciendo sobre la inalámbrica para agarrar un cable de red y conectarlo? ¿Sabe la copia del archivo a utilizar la conexión más rápida ahora?

Si ambas partes de la operación de copia en equipos de Windows 8, sí, será capaz de aprovechar el rendimiento de la red mayor sobre la marcha, gracias a los avances en el Protocolo de bloque de mensajes de servidor (SMB) para soportar múltiples canales.

Tobi preguntado:

¿Será posible hacer una pausa en la operación de copia y reanudarlo después de reiniciar, reposo/hibernar?

En la versión beta, cuando un sistema se duerme o hiberna, automáticamente se detendrá la operación de copia, y cuando se despierta la máquina, puede optar por reanudar la copia haciendo clic en el botón pausa deprimido. (Hemos decidido no tener copias automáticamente reanudar de raíz, como el entorno del sistema puede haber cambiado significativamente en el ínterin y no queremos provocar un error.)

Copia: manejo de confirmaciones y interrupciones

gawicks preguntado:

Por favor, por favor, mostrar todos los copia 'error diálogos' finalizada la copia para no tener que sentarse delante de la máquina todo el tiempo.

Tenemos dos tipos de interacción con el usuario que pueden producirse durante un trabajo de copia - rompemos en dos grupos, "confirmaciones" y "interrumpe". Confirmaciones como necesidad "Estás seguro de que desea eliminar este archivo?" a ser completado antes de que pueda comenzar la operación de copia. Interrupciones son cuestiones que el sistema encuentra al copiar, cosas como "Archivo no encontrado," "Archivo en uso" y conflictos de nombre de archivo.

El sistema presenta confirmaciones todos antes de empezar a mover o copiar archivos. Al copiar, cualquier problema de interrupción está en la cola y presentado una vez que el sistema ha completado todo el trabajo que puede. En la versión beta, hemos hecho mejoras en cómo se presentan las confirmaciones, asegurándose de que no se pierden entre las copias existentes de ejecución.

Explorador: panel de navegación cuestión de desplazamiento

xpclient dijo

Por favor corregir el infame Windows 7 navegación panel desplazable error.

(Ver este hilo de respuestas de Microsoft para obtener más información.)

Hemos arreglado! Como de la versión beta, ha ido.

Explorador: respetar la imagen metadatos de orientación

Pedido de RAF

¿Apoyará * pérdidas * rotación de imagen?

En Windows 7 y 8, rotación de JPEG es sin pérdida, cuando ambas dimensiones de la imagen son divisibles por 16 (tamaños de imagen estándar).

Además, Explorer ahora respeta la información de orientación EXIF de imágenes JPEG. Si la cámara establece este valor con precisión, rara vez necesitará corregir la orientación. Buscar un blog futuro donde esto analizaremos con más detalle.

2 of the 3 photos of flowers are shown sideways

Imágenes en el explorador de Windows 7

Same flower photos as in previous image, but the orientation has been corrected
Imágenes en el explorador de Windows 8

Explorador: Superposición de cambios para mejorar el rendimiento

En Windows 8, seguimos a priorizar de gran rendimiento. Nos prestan mucha atención a milisegundos de retardo y buscar reducciones. En el explorador, hemos encontrado una oportunidad de mejora en demoras causadas por superposiciones de icono.

En Windows 7, tenemos un icono de candado de superposición para indicar un archivo privado. (Usted puede recordar que, debido al aumento de archivos compartidos, había sustituido la superposición "de palm hasta" de archivos compartidos). Recientemente, hemos encontrado que buscando estas superposiciones fue agregar unos 120 milisegundos a nuestras pruebas de lanzamiento de biblioteca de Explorer. Esto podría no parecer mucho, pero consideramos esto un gran retraso.

2 folders shown, Bar and Foo. Foo has a padlock overlay on the icon, and in the Sharing status column, it says Private.

Superposiciones tienen limitaciones: sólo pueden mostrar un único Estado, agrega un montón de ruido visual y puede ser confuso. Se ha quitado la superposición de candado; Esta información se transmite mejor por la columna "Estado de uso compartido".

Esta columna tiene estas ventajas:

  • Rendimiento: La columna está oculta de forma predeterminada, por lo que el retraso se incurre solamente cuando decides en mostrar esta información.
  • Tri-state: Esta columna tiene tres valores: compartidos, no compartida, y privado, para obtener más detalles que lo haría desde el icono Superposición.
  • /Filtrado de clasificación:Puede ordenar y filtrar la propiedad status compartido, brindando más poderosas funcionalidades de administración de archivos.
Explorador: pin inicio

Marina post sobre la pantalla de inicio, Boots112233 dijo:

La mitad de los elementos en mi menú de inicio de Windows 7 son accesos directos a carpetas y uno es un archivo […] ¿Cómo puedo hacer esto en Windows 8 si la pantalla de inicio no permite accesos directos a carpetas?

En la versión beta, puede ahora fácilmente tus carpetas favoritas a inicio de pines y aprovechar la funcionalidad de personalización ricos que hemos construido en él para organizar las carpetas en grupos y en el orden que desee.

"Pin to Start" is in dropdown from "Easy access" control in the Home tab of the ribbon

Cinta "Anclar al inicio" desde el explorador de Windows

Además, al igual que en Windows 7, puede fijar accesos directos a archivos ejecutables para iniciar directamente desde el explorador de Windows, que puede ser muy útil para aplicaciones que no agregan a la pantalla de inicio predeterminada.

Part of the Start screen with the following tiles: Internet Explorer, Store, Windows Explorer, Documents, the desktop, "My Executable," and "eventvwr"

Carpeta de documentos, un ejecutable personalizado y Visor de sucesos cubrió a Inicio

Explorador: PowerShell

Jamie Thomson dijo:

Así gusto realmente la opción de "Abrir símbolo" en el menú archivo sin embargo prefiero usar PowerShell que gustaría una opción "Solicitar abrir PowerShell" demasiado.

Estamos de acuerdo, y así hemos añadido esto así. Cabe señalar que hay a veces conflictivos puntos de vista sobre si cosas avanzadas deben estar en la GUI o en PowerShell y cómo frontal y centro deben ser. Siempre estamos equilibrio la complejidad de demasiadas opciones y demasiadas maneras de hacer las cosas. Como puede ver, no hay ninguna respuesta correcta, por lo que vamos a seguir equilibrar estas opciones complejas.

In the File menu are options to Open Windows PowerShell or Open Windows PowerShell as administrator

Botones de Windows PowerShell en el explorador de Windows

Estos elementos de menú iniciar la consola de PowerShell. PowerShell ISE sigue estando disponible desde el comando Editar en un archivo de PowerShell.

Explorador: cambios de cinta

Esperábamos la introducción de la cinta de opciones del explorador para estimular la conversación, y es justo decir que la respuesta voluminosa estaba en consonancia con nuestras expectativas. Es emocionante trabajar en algo que trae muchas perspectivas diferentes.

Hubo muchas reacciones, y tal como esperábamos, es un conjunto de personas que tienen una reacción totalmente negativa a la affordance y han sido decirnos acerca de él en términos inequívocos. Nuestra opinión es que necesitamos avanzar en la interfaz de usuario y aceptar que un conjunto vocal de los clientes no están contentos con la dirección que vamos. Cuando miraba ampliamente, es compensado por una mayoría de personas que son felices y más productivo con los cambios. Recordamos a la gente que hay terceros herramientas disponibles (probablemente el utilizado por este conjunto de personas), que proporcionan una serie de paradigmas de interfaz diferente. Abrazamos la noción que terceros herramientas desempeñan un papel importante en la experiencia de Windows.

Dicho esto, nos hemos interiorizado sus comentarios, experimentó con probado distintos enfoques y utiliza nuestros compañeros como sujetos de prueba, además de las pruebas formales, como era de esperar. Verás tres cambios importantes en la cinta de opciones en la versión beta.

Cinta minimizada por defecto: Con la cinta maximizada en la vista previa del desarrollador, hemos podido aprender mucho sobre cómo las personas interactúan con él, que nos ha permitido ajustar y ajustarlo. Con la versión beta, estamos haciendo un cambio importante que trae Explorer en consonancia con nuestros principios de diseño para Windows 8. Como en nuestros diálogos de copia, el administrador de tareas y el Metro estilo experiencias, estaremos reduciendo distracciones y confiar en los usuarios a descubrir la funcionalidad por cuenta propia, al minimizar la cinta de opciones por defecto.

Windows Explorer shown with no ribbon

Cinta de explorador de Windows minimizado por defecto

Hemos probado este cambio durante un tiempo ahora, y los resultados han sido alentadoras. Se trata de datos de uso interno de Microsoft, que sabemos no para ser representativa del amplio público, pero generalmente es representante de la gente como usted que se dedican en el cuadro de diálogo en el blog.

No change: 71%, Minimize if maximized: 6%, Maximize if minimized: 23%

Default users compared with Ribbon maximizers. When 0 commands performed in a session, default users at over 85%, while ribbon maximizers are at 62%. When 1-10 commands performed, Ribbon maxmizers are much more frequent than default users.

Estos datos muestran que nuestros usuarios muy experto en tecnología están generalmente bien con cualquier valor, sino que nuestros usuarios de Explorer más pesados son nuestros maximizers cinta. Ligero archivo navegando en escenarios, podemos proporcionar una interfaz de usuario reducidas distracciones y aún confía en que los usuarios que deseen ejercer realmente la funcionalidad del explorador serán maximizar y aprovechar la cinta de opciones.

Visible teclas de acceso rápido: Nuestros datos de telemetría nos ha demostrado que para los usuarios que eligen activamente para minimizar la cinta de opciones, su fuerte preferencia es usar teclas de acceso rápido. La cinta ofrece nuevas maneras de acceder a las funciones a través del teclado con información sobre teclas (esas señales flotantes que pop-up cuando consigues Alt), pero tradicional teclas como Ctrl + V siguen siendo el método más eficiente. Nos encanta teclas de método abreviado (internamente, su uso obtiene hasta más del 85% de todos los comandos de Explorer emitidos), por lo que queremos ayudar a más gente descubrirlos.

Para la versión beta, hemos añadido información de teclas de acceso rápido a la información sobre herramientas de botones correspondientes.

Tooltip on "New folder" button says "New folder (Ctrl+Shift+N) / Create a new folder."

"Nueva carpeta" información sobre herramientas muestra el método abreviado de teclado

Móviles de configuración de usuario:Nosotros queremos asegurarnos de que sólo se necesitan configurar las opciones del explorador una vez. Si maximizar la cinta y añadir deshacer y mapa unidad de red en la barra de herramientas de acceso rápido, queremos que tu explorador para ver que cada vez.

Para la versión beta, hemos añadido configuración del explorador para los atributos que se recorrían los otros equipos de Windows 8. En la "configuración Sync" IU, esta muestra en "Otra configuración de Windows." (Para obtener más información acerca de la configuración de usuario móvil, echa un vistazo a cargo de Katie.)

PC Settings screen, "Sync your settings" selected, Settings to sync options include Personalize, Desktop personalization, Ease of Access, Language preferences, App settings, Browser settings, Other Windows settings, Sign-in info, and more scrolled off screen.

Sincronización de configuración del explorador a través de PCs

Realmente apreciamos todos sus comentarios en nuestros posts anteriores. Creemos que ha contribuido directamente a una experiencia de gestión de archivos mejorada para Windows 8.

La fuente del artículo la pueden encontrar aquí y pueden enviar sus comentarios para nuevos cambios.

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Se viene el MSDN+TechNet Summit 2012

MSDN   TechNet Summit 2012

Acabamos de reunirnos con el Equipo de DPE de Microsoft Perú y nos acaban de dar una serie de detalles del próximo msdn+TechNet Summit Perú 2012.

 

Qué es el msdn+TechNet Summit Perú ???

Windows 1El msdn+TechNet Summit Perú es el evento tecnológico más importante que organiza el equipo de DPE de Microsoft Perú, el cual se caracteriza por contar con la participación de los mejores expertos (Los súper top) de Microsoft Corp. (USA) y Latinoamérica.

Se realizará el 27 y 28 de Marzo en el Hotel Sheraton de Lima desde las 8:00a.m., las entradas van desde S/.178.00 Nuevos Soles (Con Descuento) sólo para miembros de Comunidades Microsoft y S/.280.00 Nuevos Soles para los que no estén inscritos en la página web.

Imagen3Esta es una gran oportunidad para los profesionales y fanáticos de la tecnología de todo el Perú, podrán enterarse de todas las novedades que Microsoft está preparando para el 2012, entre las más importantes resaltan: Windows Azure, Windows 8, Internet Explorer 10, SQL Server 2012, Visual Studio 2012 (Nombre Por confirmar), Windows Phone 7, Expression Studio entre otras.

Dentro del evento tendremos 35 sesiones y lo mejor de todo... el Grupo Rio cerrará el evento con súper concierto para todos los asistentes.

Entre las primeras noticias tenemos la participación confirmada de:

  • Imagen2Jaime Sánchez – Microsoft México
  • Wilson Paes – Microsoft Chile
  • Lalo Steinmann – Microsoft Corp.

La fecha límite de inscripciones son 2 días antes del evento, recuerden inscribirse en la web de Comunidades Microsoft para obtener el descuento respectivo, las entradas estarán a la venta en Teletiket de Won y Metro.

Y para terminar este post les brindo este dato súper secreto entre las personas que compren entradas hasta el 15 de febrero podrán entrar al Ask The Experts un día antes del evento (No compartan esta información con sus colegas XD ).

Les recomiendo llevar dinero extra para comprar tikets para la tómbola, donde podrán participar en el sorteo de Libros de Certificación, Microsoft Hardware, Software Original, polos y otras sorpresas, lo recaudado servirá para ayudar al Programa Microsoft Solidario.

Nos vemos en el MSDN+TechNet Summit Perú 2012!!!

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

lunes, 30 de enero de 2012

Aprende HTML5

¡¡Ya puedes aprender HTML5 gracias a este curso gratuito online!!

HTML5_Wallpaper_1680x1050Si deseas conocer las ventajas y novedades que ofrece este nuevo estándar es tu oportunidad. Sigue este curso gratuito y en español que se compone de 6 lecciones, en las que te enseñaremos desde qué es HTML5 hasta el uso de las nuevas APIs, como la de Drag&Drop. Junto con las lecciones se incluye código de ejemplo para seguir el curso y preguntas de repaso al final de cada lección.

No te quedes atrás, descárgate IE9, sigue el curso online y…¡evoluciona a HTML5!

Lecciones disponibles:

ATENCIÓN: No es necesario registro, las lecciones están online y accesibles desde los enlaces de más abajo o en la página general del curso aquí.

A continuación podéis ver un resumen del curso. Iremos actualizando los enlaces a las lecciones conforme las vayamos publicando.

Ver Lección 1: Definición de HTML5

Objetivos: En esta lección los estudiantes aprenden las funcionalidades y características que forman parte de la especificación HTML5 y las tecnologías que involucran. También podrán aprender la diferencia entre la sintaxis de HMTL5 y la de HTML4 y/o XHTML 1.0. Por otra parte, al finalizar esta lección los estudiantes podrán identificar las principales características de HTML5, como los nuevos elementos HTML5, elementos multimedia, el elemento Canvas, formularios web, etc. Otro objetivo es que los estudiantes puedan distinguir entre funcionalidades que técnicamente forman parte de la especificación de HTML5 y otras que se consideran tecnologías relacionadas, como la Geolocalización, Arrastrar y Soltar y CSS3.

  • Beneficios de HTML5
  • Principales características
    • Nuevos elementos de markup y presentación
    • Los elementos <video>, <audio> y <canvas>
    • Formularios Web
    • Elementos revisados que se basan en HTML 4.0
  • Introducción a las APIs de HTML5 y tecnologías de apoyo
    • Geolocation
    • Web Workers
    • Almacenamiento Web
    • CSS3: Animaciones y transiciones
    • CSS3: Fondos, bordes, colores RGBa, gradientes, sombreados y esquinas redondeadas
    • Tipos de letra @font-face para la web
  • HTML5 todavía es un proyecto en fase de desarrollo
    • Compatibilidad de navegadores
    • Dónde se utiliza HTML5 actualmente

Ver Lección 2: Conceptos básicos de HTML, XHTML y CSS

Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de HTML, XHTML y CSS, necesarios para saber crear la estructura y estilo de sus páginas web. Aprenden cómo se utilizan los tipos de documento (DOCTYPE) para ayudarles a validar sus páginas web y utilizarlos como herramienta de resolución de errores. En esta lección, los estudiantes crean una página web sencilla que les sirve para saber cómo se insertan imágenes, cómo se crean enlaces y cómo pueden trabajar con hojas de estilos tanto internas como externas.

  • Introducción a la sintaxis de HTML
    • Detalles de la sintaxis XHTML
  • La función de DOCTYPE
    • Validación W3C y de página
  • Creación de una página HTML
    • Definición de elementos HTML
    • Inserción de imágenes en HTML
    • Uso de atributos
    • Creación de vínculos
  • El papel de las hojas de estilos CSS (Cascading Style Sheets)
    • Aplicar estilos a una cabecera
    • Clases de estilos y el elemento <span>
  • Tres formas de utilizar los estilos
    • Internos
    • Externos
    • En línea
  • Cuándo utilizar hojas de estilo Internas o externas
  • Creación de una hoja de estilos externa
  • El concepto de "cascada" de CSS

Ver Lección 3: Introducción a la presentación en pantalla con CSS

Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de presentación de elementos en pantalla con CSS, incluyendo una estructura visual de dos columnas con ancho fijo, utilizando HTML y CSS. Aprenden la función de un archivo de “reset” CSS y cómo se añade a la página Web. Esta lección incluye el uso del elemento <div> y las propiedades float y clear de CSS para crear columnas en la página.

  • El papel del archivo de reset CSS
    • Añadir un enlace a una hoja de estilos de reset externa
  • Breve historia de las técnicas de disposición en pantalla de las páginas web
    • Introducción a las opciones de presentación de las páginas
  • Creación de una estructura básica de dos columnas de ancho fijo con CSS
    • El elemento DIV
    • Asociación de IDs y clases CSS con elementos DIV
  • La propiedad float de CSS
    • Creación de columnas con la propiedad float
  • Uso de la propiedad clear
  • Creación de una navegación basada en listas con directivas float
  • Uso de márgenes y rellenos para controlar la disposición de los elementos en pantalla
  • Imágenes de fondo con CSS
    • Decoración de un pie de página con una imagen de fondo

Ver Lección 4: Uso de las etiquetas HTML5

Objetivos: En esta lección los estudiantes aprenden a utilizar los nuevos elementos HTML5 para lograr presentaciones en pantalla más avanzadas. Se revisan aquí los principales elementos de división en secciones y también se repasan las etiquetas de HTML4 que han sido objeto de actualización en HTML5. Los estudiantes aprenden a convertir una página existente que emplea elementos HTML4 en una página HTML5 sustituyendo elementos <div> por otros nuevos elementos HTML5. Además, en esta lección se aprende a trabajar con elementos de formulario HTML5 y a añadir contenidos multimedia con los elementos <video> y <audio>.

  • Revisión del concepto de semántica de las etiquetas HMTL
  • Fundamentos de HTML5
    • Uso de la declaración DOCTYPE de HTML5
  • Diferentes categorías utilizadas para contenidos HTML5
    • Contenidos de Metadatos
    • Contenidos de Flujo
    • Contenidos de Sección
    • Contenidos de Cabecera
    • Contenidos de Frase
    • Contenidos embebidos
    • Contenidos interactivos
  • El nuevo elemento <header>de HTML5
    • Incorporar soporte para elementos HTML5 en los navegadores
  • Incorporación de elementos <nav> de HTML5
  • Esquema de documentos con HTML5
  • Incorporación de otros elementos de sección de HTML5
    • Elemento <section>
    • Elemento <article>
    • Elemento <aside>
    • Elemento <footer>
  • Otros elementos HTML5
    • Elemento <figure>
    • Elemento <figcaption>
    • Elemento <time>
  • Elementos revisados de HTML 4.0
    • La etiqueta <b> frente a <strong>
    • La etiqueta <i> frente a <emphasis>
  • Uso de formularios HTML5
    • Tipos de datos de entrada email y url
    • Atributos required y placeholder
    • Atributos autofocus y autocomplete
  • Uso de los elementos Video y Audio
    • Uso del elemento <video> y sus atributos relacionados
    • Uso del elemento <audio> y sus atributos relacionados
    • Aspectos a tener en cuenta sobre los códecs de vídeo y audio al trabajar con contenidos multimedia

Próximamente Lección 5: Uso del elemento Canvas

Objetivos: En esta lección los estudiantes aprenden en qué consiste el elemento Canvas, el API de dibujo en dos dimensiones que incluye la especificación HTML5. En este tema se explica cómo se incorporan elementos de diseño gráfico a una página web, por ejemplo formas, textos, rellenos y trazos de colores, imágenes y animaciones sencillas con Javascript. Esta lección enseña también a los estudiantes los conceptos básicos de la interactividad con Javascript.

  • El papel de JavaScript en las aplicaciones HTML5
  • Conceptos básicos de JavaScript
    • Eventos de JavaScript
    • Ubicación del código JavaScript en un documento externo
    • El DOM (Document Object Model)
  • El elemento Canvas
    • Ventajas del elemento Canvas
  • Diseño gráfico con Canvas
    • Dibujo de trazos
    • Dibujo de rectángulos
    • Dibujo de líneas y círculos
    • Dibujo de curvas
  • Inserción de textos
  • Colores, estilos y gradientes
  • Inserción de imágenes
  • Creación de gráficos en el Canvas
    • Uso de arrays de datos
  • Creación de animaciones con Canvas y Animation
    • Uso de transformaciones
    • Creación de un bucle de dibujo

Próximamente Lección 6: Funciones Drag y Drop de HTML5

Objetivos: En esta lección se enseña el uso de Drag and Drop, un API relacionada con la especificación HTML5. Concretamente, los estudiantes aprenden a crear una interfaz de carrito de la compra sencilla arrastrando y soltando objetos en pantalla.

  • Diferentes formatos de Drag y Drop en la web
    • Ventajas de las funciones Drag y Drop
  • Compatibilidad de Drag y Drop entre distintos navegadores
    • Uso de la función preventDefault
    • Los eventos dragenter y dragover
    • Convertir un elemento en "arrastrable" (draggable) en HTML5
    • El atributo ondragstart
    • Creación de la función dragStarted
    • Medidas para la compatibilidad con diferentes navegadores
  • Transferencia de datos con una operación "Drag-and-Drop"
    • Uso del objeto dataTransfer
    • Uso de la función setData
    • La propiedad innerHTML

Más sobre HTML5

Fuente: MSDN España

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Infografía Retrospectiva a Windows Phone en 2011

La gente del Windows Phone Developer Blog ha creado esta infografía para ofrecer una mirada retrospectiva a Windows Phone en 2011, con una vista de información específica para desarrolladores, lo que les permite saber en un solo vistazo las tendencias de descargas en Windows Phone, a continuación la imágen:

5383_WP-Marketplace-Opportunity-infographic-r09b-011112_thumb_57B52915

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Mi primera página en HTML5 y CSS3

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 1024x720. 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