Category: Internet Explorer


Signage_Building_99_Web

Como saben este mes ha sido muy emocionante en cuanto a noticias tecnológicas, estamos en una etapa muy cambiante donde ya no es extraño ver a un amigo con un celular táctil, una laptop o un Ipad. Frente a esta ola de nuevos dispositivos dependientes de conexión a internet y redes sociales, la tendencia de trabajo a cambiado totalmente, antes las empresas entregaban a sus trabajadores un dispositivo para trabajar(Sea bueno o malo), hoy en día los trabajadores llevan su dispositivo preferido, para que sea configurado con su cuenta de trabajo.

Este gran cambio está dejando atrás la era full PC, en la cual todo el trabajo se realizaba en una computadora personal; en la década pasada Microsoft dominó y lideró el mundo de la tecnología, ya que esta se basaba en las PC. Ahora con la nueva tendencia de movilidad la mayoría de las personas van formando cierta opinión de las empresas que lideran el mundo de la tecnología, estuve conversando con algunos amigos que no son muy apegados a la tecnología, pero la usan diariamente para diversos tipos de tareas y luego de escucharlos quisiera compartir la siguiente síntesis de un artículo que leí:

AppleHace unos años Apple, el antiguo rival de Microsoft y que casi llega a la quiebra, comenzó a dominar el mundo de la música con su iPod y iTunes. Mientras Google con su buscador creció a un ritmo impresionante hasta acaparar el mercado de la publicidad en Internet. Al mismo tiempo que Google y Apple  crecían, en Microsoft comenzaron a tener confianza excesiva en su fuerza de mercado.  Quizás parte de la percepción de mis amigos inició con del daño que causó Windows Vista en todo el mundo. Para esa época el sentimiento anti-Microsoft comenzó a ganar popularidad. Y como la propia empresa ha reconocido en relación a uno de sus productos, Internet Explorer se convirtió en el navegador que la gente ama odiar.

Windows-vista-logo-1En el 2007, justo cuando Microsoft pasaba por sus peores momentos en popularidad gracias a Windows Vista, Apple lanza el iPhone el dispositivo que cambiaría por completo el mercado de consumo de tecnología. Este teléfono, que hacía poco en comparación con sus contendientes de la época, tenía algo que los destacaba sobre los demás. Este algo era el énfasis en la experiencia de usuario. En el iPhone la experiencia de usuario era tan importante como sus funcionalidades. Y este pequeño detalle cambió todo. Pero a pesar de sus desaciertos en el mundo de la tecnología de consumo, durante todos estos años Microsoft ha ido obteniendo grandes éxitos en el mundo de negocios, este enfoque es el que le ha dado la mayor parte de sus beneficios económicos.

android_logo_Con la expansión de iOS en el iPhone, los triunfos de Android y la eventual llegada del iPad; la prensa, los inversionistas e incluso los consumidores (Mis amigos) comenzaron a ver un futuro gris para Microsoft. De hecho, mucha de la prensa de tecnología ha ignorado o menospreciado muchos de los productos de esta empresa (Ejm El Comercio). Tanto fue el sentimiento anti-Microsoft que hay personas que aún hoy no han logrado reconocer el cambio de actitud que ocurrió en Microsoft para el 2009-2010.

imageengineHTCEn esa época fue cuando comenzó el desarrollo de Windows 8 y además fue cuando el mundo conoció a Windows Phone 7. En lo que respecta a mi experiencia personal, fue con la salida de Windows Phone 7 que noté el cambio que estaba ocurriendo en Microsoft. El lanzamiento de ese sistema operativo con su fluida y elegante interface Metro me llevó a replantearme mi posición ante Microsoft. Sin duda Microsoft había aprendido de sus errores y estaba comenzando a cambiar.

Durante el último Worldwide Partner Conference (WPC 2012)  Steve Ballmer dijo lo siguiente: “Este es el año más épico en la historia de Microsoft” “. Y es que este año no solo veremos los lanzamiento de Windows 8 y Windows Phone 8, sino que además llegarán las primera PC fabricada por ellos junto con Office 15 y toda una serie nueva de herramientas para las empresas.

Finalmente mencionó lo siguiente: "intentamos dejar absolutamente claro que no vamos a dejar ni un solo hueco sin cubrir para Apple … No en la nube. No en la innovación de hardware o software. No vamos a dejar nada de eso en manos de Apple. No va a suceder. No mientras estemos aquí".

Creo que quienes continúan con el sentimiento anti-Microsoft no han notado el cambio de actitud que ha ocurrido dentro de Microsoft. Me parece que han enmendado muchos de sus errores y esto lo digo sin olvidar que aún quedan unos cuantos por corregir (En mi caso anhelo colocar mi canción preferida como tono de mi Celular).

El 2012 es el año de muchas sorpresas, el resultado de este gran cambio de actitud es Surface, Windows Phone 8, Office 15 y el nuevo Office 365, en las siguientes publicaciones estaré brindando mis impresiones de cada uno de ellos con algunas recomendaciones y tips, los dejo con videito del nuevo Surface:

Saludos


MVP_HorizontalFrancis Urteaga
Consultor en Soluciones de Negocio | G&S Gestión y Sistemas SAC
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Anuncios
Vista de Windows 8 en acción.

BARCELONA, Españafebrero 29, 2012 – Microsoft Corp. ha anunciado hoy la disponibilidad de la vista previa para consumidores de Windows 8 – el siguiente hito del sistema operativo Windows. Esta última vista previa estará disponible para su descarga a partir de hoy en http://preview.windows.com . La Vista Previa para Consumidores de Windows 8 ofrece una experiencia más robusta para probar el sistema operativo más popular del mundo y está disponible para la gama más amplia de personas aún después de la publicación inicial del Developer Preview de Windows 8 a finales del año pasado. El Developer Preview recibido más de 3 millones de descargas.

Windows8_CP"Con Windows 8, vuelve a imaginar las diferentes maneras en que las personas interactúan con su PC y cómo hacer que todo se sienta como una extensión natural del dispositivo, ya sea usando una tablet con Windows 8, ordenador portátil o todo-en-uno", dijo Steven Sinofsky, presidente de la División Windows y Windows Live de Microsoft. "La Vista Previa para Consumidores de Windows 8 ofrece un enfoque sin compromisos al uso de su PC."

En un caso de La Vista Previa para Consumidores de Windows 8 en Barcelona que contó con la participación de los socios de Europa y en todo el mundo, la compañía compartió algunas de nuevas claves en La Vista Previa para Consumidores de Windows 8:

  • Amplia gama de cambios y mejoras de productos. Desde la Developer Preview en septiembre, diseñada para obtener una vista previa de la plataforma de programación, Windows 8 ha progresado en todas las dimensiones. De completar la experiencia del usuario para el tacto, el teclado y el ratón para refinar la plataforma de desarrollo, la vista previa de los consumidores mejora el rendimiento, calidad y fiabilidad en todos los subsistemas. Con las características añadidas, que representa una vista más completa de las capacidades de Windows 8.
  • Tienda de Windows con nuevas aplicaciones. La Vista Previa para Consumidores de Windows 8 marca el inicio de la beta de Windows Store, que se llena con una variedad de nuevas aplicaciones de Metro de estilo de ambos desarrolladores de terceros y de Microsoft. Durante la vista previa para los consumidores están disponibles , estas aplicaciones para probar y experimentar sin costo alguno para los usuarios. La tienda de Windows ofrecerá recomendaciones personalizadas, y Windows 8 ofrece a los usuarios la capacidad de tomar sus aplicaciones y configuraciones con ellos a través de varios equipos, por lo que es fácil de descubrir y probar nuevas aplicaciones al tiempo que ofrece a los desarrolladores la oportunidad más grande de cualquier plataforma.
  • Conexión a la nube a través de PC basados ​​en Windows y Windows Phone. La Vista Previa para Consumidores de Windows 8 ofrece una perfecta integración con la atención de la gente sobre el contenido a través de sus dispositivos. Un inicio de sesión adicional opcional con una cuenta de Microsoft proporciona acceso a una serie de características, incluyendo la capacidad para recorrer todos los ajustes, utilice almacenamiento en la nube, comunicarse con el correo electrónico, calendario y contactos, y conectar a una amplia gama de servicios. Su conexión a la nube funciona a través de sus PCs basadas en Windows y sus teléfonos con Windows.
  • Internet Explorer 10 Platform Preview 5. La mejor manera de experimentar la Web en Windows es con Internet Explorer 10. El navegador ha sido re-imaginado para crear una nueva experiencia diseñada específicamente para dispositivos con Windows 8. Proporciona una interfaz de usuario de extremo a extremo que es en todos los navegadores de menos y más Web. Rápido y fluido, Internet Explorer es acelerado por hardware para mejorar el rendimiento Web.
  • Vista previa de las capacidades de hardware nuevos. En el evento, Microsoft también presentó Windows 8 se ejecuta en una amplia gama de hardware de nueva referencia en x86 y basado en ARM. Este equipo estará disponible para seleccionar a los desarrolladores para las pruebas como se anunció previamente.
Aquí pueden ver los comentarios del concurso para crear aplicaciones para La Vista Previa para Consumidores de Windows 8.

La Vista Previa para Consumidores de Windows 8 estarás disponible en todo el mundo para su descarga en Inglés, francés, alemán, japonés y chino simplificado. Más información acerca de Windows 8 y de cómo descargar la vista previa del Consumidor está disponible en http://preview.windows.com o http://windowsteamblog.com.

 

Finalmente comparto con uds el video con las Demos de La Vista Previa para Consumidores de Windows 8 donde pueden ver y aprender acerca del uso de Windows al instalarlo.

Sin nada más que comentarles por el momento, espero que descarguen La Vista Previa para Consumidores de Windows 8 y gocen aprendiendo, estos son los enlaces para mayor Referecia:

A continuación comparto los Enlaces Directos:

  • Inglés
    64 bits (x64) Descargar (3,1 GB) Hash Sha 1: 1288519C5035BCAC83CBFA23A33038CCF5522749
    32 bits (x86) Descargar (2,3 GB) Hash Sha 1: E91ED665B01A46F4344C36D9D88C8BF78E9A1B39
    Clave del producto: DNJXJ-7XBW8-2378T-X22TX-BKG7J
  • Chino simplificado
    64 bits (x64) Descargar (3,1 GB) Hash Sha 1: DF69B851F9A81DECBB16648CC452461894416EB0
    32 bits (x86) Descargar (2,3 GB) Hash Sha 1: E29A2072745A48C14A1C2E5A61F5230841BEDB45
    Clave del producto: DNJXJ-7XBW8-2378T-X22TX-BKG7J
  • Francés
    64 bits (x64) Descargar (3,1 GB) Hash Sha 1: A9358E6799ABEEF29EDBA054AD34849C02C7F51F
    32 bits (x86) Descargar (2,3 GB) Hash Sha 1: 2EF8013B9F50B93AEAC8068F4827E2C1DC0DC0B1
    Clave del producto: DNJXJ-7XBW8-2378T-X22TX-BKG7J
  • Alemán
    64 bits (x64) Descargar (3 1 GB) Hash Sha 1: DB1003A47C266697B3832BE2A23319988EE34495
    32 bits (x86) Descargar (2,3 GB) Hash Sha 1: 91075AEA665C5D6F42A24714B3A3390762C94457
    Clave del producto: DNJXJ-7XBW8-2378T-X22TX-BKG7J
  • Japonés
    64 bits (x64) Descargar (3,1 GB) Hash Sha 1: A8F0DB12CAECEA0BE8B27EA124F2234212D9103A
    32 bits (x86) Descargar (2,3 GB) Hash Sha 1: C8A322ED86058086207CAAECD46B4DDACF9E247A
    Clave del producto: DNJXJ-7XBW8-2378T-X22TX-BKG7J

Requisitos del sistema

Windows 8 Consumer Preview funciona correctamente con el mismo hardware utilizado para Windows Vista y Windows 7:

  • Procesador: 1 gigahercio (GHz) o más

  • RAM: 1 gigabyte (GB) (32 bits) ó 2 GB (64 bits)

  • Espacio en disco duro: 16 GB (32 bits) ó 20 GB (64 bits)

  • Tarjeta gráfica: dispositivo gráfico Microsoft DirectX 9 o superior

Requisitos adicionales para usar algunas características:

  • Para el uso táctil, necesitas una tableta o un monitor que sea compatible con una función Multitouch.

  • Para acceder a Windows Store y descargar y ejecutar aplicaciones, necesitas una conexión a Internet activa y una resolución de pantalla de al menos 1024 x 768.

  • Para acoplar aplicaciones, necesitas una resolución de pantalla de al menos 1366 x 768.

Cómo instalar Windows 8 Consumer Preview desde una imagen ISO

La forma más sencilla de convertir un archivo ISO en un DVD en Windows 7 es usar la grabadora de imágenes de disco de Windows. En un equipo que ejecute Windows XP o Windows Vista, se requiere un programa de terceros para convertir un archivo ISO en un medio instalable; un programa de grabación de DVDs suele incluir esta funcionalidad. Una opción es la herramienta de descarga para USB o DVD proporcionada por Microsoft Store. También puedes descargar el programa de instalación de Windows 8 Consumer Preview, que incluye herramientas que te permiten crear un DVD o una unidad flash USB desde un archivo ISO (se requiere Windows Vista o Windows 7).

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Logo-IE9-bl

Internet Explorer 9 debería ser el browser por defecto para todas aquellas empresas que deseen proteger las PCs de descargas malintencionadas, virus y otros tipos de amenazas que existen en internet. Esto fue determinado mediante un estudio de NSS Labs.

Se determinó que Internet Explorer 9  fue muy superior comparado a otros browsers tales como Chrome, Firefox y Safari. Últimamente Mozilla y Safari están tratando de implementar lo más pronto posible la nueva API de Google mediante la cual se enviaran datos directamente a Google para ser analizados y con base en dicho análisis permitir o no al usuario el acceso o descarga del contenido solicitado. Este tipo de implementación pone al descubierto para Google los datos de las personas que navegan en internet, algo no muy grato hoy en día.

Intro_Main1

Aún con dicho mecanismo de seguridad mediante el API de Google y según los test’s de NSS Labs solo se llega al 34.1% de efectividad dejando un enorme porcentaje de posibilidades para diversos ataques, otros browsers tienen menos suerte, por ejemplo Firefox 7 tienen un porcentaje de bloqueo de ataques de 3.6% y Safari 5 3.5%.

La conclusión de NSS Labs es: "NSS no recomienda cambiar de browser com base en este estudio solamente, sin embargo si puede elegir cual browser utilizar, Internet Explorer 9 ofrece la mejor protección para las amenazas de seguridad que existen en Internet".

Los datos son claros, las ventajas de utilizar Internet Explorer han sobresalido desde su lanzamiento.

La fuente oficial de esta noticia fué publicada en InfoWorld.

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

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 Los Delfines (San Isidro) 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 Pais – 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

¡¡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

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

Estimados Amigos,

Hemos iniciado un nuevo año con nuevos retos y metas, para iniciar quisiera compartir con todos ustedes el reconocimiento que me brinda Microsoft por segundo año consecutivo como MVP 2012:

WP_000028 (2)

Junto con este reconocimiento inician los proyectos para este 2012, dentro de los cuales tengo planeado lo siguiente:

  • MVP Tour Perú 2012: Este año estaremos con Elias Mereb (Windows 8), Rodrigo Diaz Concha (Silverlight y Creación de Aplicaciones para Windows 8), César Fong (Windows Phone 7 y Creación de Aplicaciones), quien les habla (SharePoint2010 y Office 365) y Posiblemente Ricardo Muñoz (SharePoint 2010 y Project Server), queremos visitar las siguientes localidades
    1. logo_mvpTrujillo
    2. Cajamarca
    3. Chiclayo
    4. Arequipa
    5. Huacho
    6. Lima
    7. Tacna
    8. Cuzco

Este año será un año muy interesante, tenemos el lanzamiento de la Beta de Windows 8 y con el Internet Explorer 10, en el siguiente Post les hablaré un poco de lo que se viene…

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Como todos saben ya podremos descargar el ISO de Windows 8 Developer Preview en dev.windows.com, por mi parte lo instalé en una de las particiones de mi laptop para tener una mejor performance, ya que inicialmente lo hice una virtual y no me brindaba la experiencia que buscaba, a continuación mis impresiones de la nueva propuesta de Microsoft en sistemas operativos:

  1. La Instalación.- Inicialmente en mi caso descargué el ISO en mi pc y luego lo coloqué en una memoria USB gracias a DiskPart, si quieren saber como realizar el proceso pueden revisar el siguiente POST. Luego de crear tu instalador reinicias la PC y booteas desde el dispositivo USB, la instalación es similar a la de Windows 7 y no pide clave de activación.
  2. Ingreso de datos.- Algo que me ha gustado bastante es la unificación de los servicios de Microsoft, es decir inicias sesión en Windows 8 con tu usuario de Windows Live (Hotmail), una vez iniciado el sistema operativo tienes la pantalla de inicio que se muestra de la siguiente manera:
    Pin to Start 1
  3. Ahora les mostraré como anclar un sitio web en la pantalla de inicio de Windows 8.- Simplemente le damos clic derecho en la parte inferior de Internet Explorer abierto desde de la pantalla inicial, aparecerán dos barras, una en la parte superior con las pestañas abiertas de IE, la barra de dirección y búsqueda está en la parte inferior como muestra la figura:
    Pin to Start
  4. En la parte derecha de la barra inferior hay 4 botones, hacemos clic en el Segundo botón y nos aparecerá un cuadro para colocar el nombre de nuestra ventana, luego clic en Pin to Start y listo ya lo tienes en la pantalla inicial de Windows 8, así como muestra la figura:
    Pin to Start 2
  5. Como apagar Windows 8???.- a continuación cito el tutorial de mi buen amigo Lucho Quiroz
    Para apagar Windows 8, el procedimiento es simple, Coloque el mouse en el extremo inferior izquierdo del botón inicio, no es necesario hacer clic, Automáticamente aparece el menú, del cual elegiremos la opción Settings, En la barra lateral, se ve el botón Power, y al hacerle clic aparecen las opciones Shutdown y Update and Restart. Hagan clic en Shutdown y listo.

Para mayor información les recomiendo visitar la web del evento Build en http://www.buildwindows.com/, a continuación les muestro el video del Keynote:

Saludos


MVP_HorizontalFrancis Urteaga
Consultor en Soluciones de Negocio | G&S Gestión y Sistemas SAC
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Estimados amigos:

Luego de haber participado en distintos eventos presenciales con el MVP Tour Perú 2011 en Cajamarca, Trujillo y Lima. Fui invitado para participar de un evento presencial en Huacho, donde compartí escenario con Fernando Cárdenas y Goyco Obrenovich en la sede de la Universidad Alas Peruanas, tocando diversos temas como Windows 7 e Internet Explorer 9, en esta ocasión tuve el agrado de interactuar con un púbico bastante motivado, más alegre que otros y con muchas ganas de aprender, lo cual me brindó una gran satisfacción y ganas de regresar en una oportunidad futura…

Regresando al tema, esta vez me complace anunciar que estaré participando de un evento Virtual denominado Cloud Power, en el cual hablaremos de la Computación en la Nube, donde podrás informarte acerca de este nuevo concepto que está generando gran expectativa.

Por lo que Microsoft ha preparado 2 salones uno para Profesionales de TI y otro para Profesionales en Desarrollo así que si eres de los que les agrada estar actualizado con las últimas tecnologías de desarrollo, esta es una oportunidad imperdible que se realizará el 17-mayo(Mañana);  por mi parte los espero en la sesión de Internet Explorer 9 – JumpList, a continuación la información de la agenda:

Evento Virtual

Los espero!!!


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Estimados amigos:

En este post anunciaré el primer

Tour-MVP

En el cual compartiré escenario con:

Elias-MerebEs el Vice-Chair, Global Board del Global IT Community Association (GITCA) -antes conocido como Culminis- y Director de WideTech Consulting, una empresa de consultoría estratégica y entrenamiento en soluciones de infraestructura de red y plataforma Microsoft con ubicación en la ciudad de Valencia, Venezuela.
Arquitecto, instructor y orador internacional de vasta experiencia y experticia; especializándose en plataforma, infraestructura y seguridad. Cuenta con más de 25 certificaciones Microsoft incluyendo: MCP, MCSA: Security, MCTS, MCITP & MCT.

 

Rodrigo-Diaz

Arquitecto de Soluciones .NET, Trainer, Speaker, Microsoft Silverlight MVP y fundador de DevMasters, empresa líder en consultoría y entrenamiento en tecnologías RIA de Microsoft. Ha sido conferencista en diferentes eventos en varias ciudades de México, como las Giras DevDays, Dev360, la Gira MDCD, E.V.O., Heroes Happen Here y el Innovation Tour. Es miembro del buró de Oradores Regionales de INETA Latam y Asesor Técnico y Arquitecto para diversas empresas nacionales y extranjeras.
Ha impartido cursos de entrenamiento en tecnologías .NET tanto a empresas privadas como gubernamentales en Latinoamérica. Seleccionado como Go-To-Trainer en Windows Server 2008 “Longhorn” para Microsoft USA.

 

En este tour hablaremos de Windows 7, internet Explorer 9 y Silverlight 5, a continuación comparto la publicidad de los mismos:

Afiche-MVP-Tour-Peru

Antes de participar del VIII Coreisc de la UPN Cajamarca 2011 Rodrigo y Elías estarán brindando un Taller el 26/04/11 para académicos y profesionales, para mayor información contáctense con Carlos Colorado, el precio del taller es de $60.00(Dólares americanos) y los cupos son muy limitados.

Luego de nuestras presentaciones en Cajamarca vamos a Trujillo, a continuación comparto la publicidad:

Afiche-MVP-Tour-Peru-UPAO

Finalmente cerramos el Tour MVP en la Pontificia Universidad Católica del Perú, a continuación el afiche:

Afiche-PUCP

Luego de estas actividades Rodrigo y Elias estarán brindando un par de talleres en las instalaciones de Microsoft Perú en Lima, para los que no quieren perderse la oportunidad de asistir a estos extraordinarios talleres impartidos por estos 2 Microsoft Certified Trainers que brindan entrenamientos en Microsoft Corp a continuación comparto los links con la información de cada Taller, recuerden que las vacantes son muy limitadas, a continuación el detalle:

Nos vemos en el MVP Touur Perú 2011!!!


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

A %d blogueros les gusta esto: