WebMatrix 3.- Herramienta para el Desarrollo Web Moderno


Hi mis Geeks Smile

En está ocasión les comparto un video promocional donde nos explica en menos de un minuto porque usar está increíble herramienta. Winking smile

 

Además te invitamos a unirte a nuestra comunidad de desarrolladores, para saber más cliquea el banner:

401981_10151621250275934_746832058_n

 

Sin más me despido,

@PeterConchaR
Microsoft Student Partner Lead LATAM

Web Developer HTML5, CSS3 and JavaScript

Community Lead Avanet

https://ptrconcha.wordpress.com/

 

 

Anuncios

HTML5.- Desarrollo y Buenas Prácticas con JavaScript [Evento]


Untitled

Hi mis geeks Open-mouthed smile

Esta vez les escribo para compartirles el feedback de lo que fue la pasada charla (03/09/2013) que brinde para la PUCE (Pontificia Universidad Católica del Ecuador) donde hablamos sobre una breve introducción de lo que es JavaScript para que los chicos se motiven a desarrollar con ello y darles una guía de cuales son los primeros pasos que deben seguir.

A continuación les comparto la presentación y el video de la charla. Y también si desean apoyar a comunidades estudiantiles los invito a brindar su follow al Microsoft Student Tech Club (STC)  de la PUCE.

Facebook https://www.facebook.com/PuceCelula.net

Twitter: https://twitter.com/NetPUCE

 

No olvides de RT y de seguirme aquí abajito en twitter Smile , si tienes alguna duda puedes responder el tweet Winking smile

 

Sin más me despido,

@PeterConchaR
Microsoft Student Partner Lead LATAM

Web Developer HTML5, CSS3 and JavaScript

Community Lead Avanet

https://ptrconcha.wordpress.com/

HTML5.- Introducción a JavaScript en WebMatrix


imageJavaScript es el lenguaje usado en la Web.

JavaScript se utiliza en miles de millones de páginas Web para añadir funcionalidad, validar formularios, comunicarse con el servidor y mucho más.

JavaScript es fácil de aprender. Tan solo como todo en la vida hay que practicarlo  Smile

 

Qué hace JavaScript en HTML5?

Bueno JavaScript o también abreviado muchas veces JS por la extensión de los archivos “.js”. Sirve para desencadenar o activar eventos en base a acciones del cliente (ocurre del lado del navegador) por eso se lo conoce como un lenguaje del lado del cliente. Entonces esto se resume a que JavaScript nos va ayudar a dar dinamismo a la página.

Algo muy importante a rescatar que es muy cierto que hoy en día existe frameworks basado en JavaScript pero antes de eso es muy recomendable conocer lo que es JavaScript para entender como trabaja todo esto.

 

Qué es un evento en JavaScript?

Es cuando desencadenamos una porción de código en base a una acción del usuario.

 

Antes de empezar…

Debemos recordar siempre que en JavaScript:

  • Es sensible a mayúsculas y minúsculas (Case Sensitive).
  • Se puede comentar de dos maneras:

image

  • Los “{ }” se utilizan para definir fragmentos de código.
  • El “;” nos ayuda a marcar el final de una sentincia.

image

  • Existen dos formas de incorporar código JavaScript en nuestro proyecto:
    • Externamente: cuando se hace referencia aún archivo “.js”.
    • Internamente: cuando el código JavaScript se encuentra en la misma página.

image

 

Ejemplo del día

Ahora daremos paso al ejemplo del día para ir practicando Smile

Vista desde el editor

image

Lo que hemos hecho es abrir los tags desde la línea 7 para crear nuestro código JavaScript y procedimos a crear una función que inspeccionara nuestro documento en búsqueda del Id “parrafoPrincipal” para almacenar la fecha actual dentro de la etiqueta HTML que posea ese Id.

Todo esto va ocurrir al realizar clic en el botón que este seria nuestro evento.

Vista desde el Navegador

 

image

Luego de hacer Clic

 

image

 

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas o comentarios vía twitter a @PeterConchaR  respondiendo fácilmente el tweet de aquí abajito, si te gusto no olvides RT y para no perderte los siguientes post sígueme. Wink

No olvides seguir en twitter a:

Para estar al día con las entradas de la comunidad Avanet.

WordPress Tags: HTML5,Javascript,WebMatrix

Visual Studio 2013.- Preview para Developers HTML5, CSS3 y JavaScript


image

Como con Visual Studio 2012, un gran esfuerzo se ha dado al soporte para HTML y JavaScript en esta versión, en particular a lo relacionado con el desarrollo de aplicaciones para la Windows Store. Una de estás es el soporte mejorado para la depuración de JavaScript asincrono, pero las mejoras van mucho más allá.

Para empezar, se ha mejorado el nucleo de Visual Studio para brindar una mejor experiencias al desarrollador con JavaScript. Por ejemplo, "Go to Definition" ahora soporta navegación entre namespaces, IntelliSense incluyendo notas sobre APIs obsoletas y el editor de los dos soporta la identificación, resaltado e inclusión de una barra de navegación que hace más fácil y rápida la navegación del código fuente.

También encontramos mejoras notables en el explorador de DOM y la consola de JavaScript. Por ejemplo, el explorador de DOM ahora soporta IntelliSense, búsqueda, edición directa y estilos en línea. Mientras que la consola de JavaScript ha sido ampliada para soportar IntelliSense, vista previa  y visualización del objeto y soporte de funciones de varias líneas.

Blend para HTML también ha sido mejorado en esta versión. Además de las actualizaciones que se hace relacionado con las reglas y guías para la mejor colocación del  contenido, Blend ahora incluye una línea de tiempo para realizar cambios de animación a CSS.

También tenemos grandes mejoras alrededor del diagnósticos de aplicaciones  Windows Store, incluyendo pero no limitando a las implementadas con HTML y JavaScript.

Para obtener más información sobre la creación de aplicaciones para la Windows Store con HTML y JavaScript, te recomendadmos visitar:

Generation App Latam

Fuente: http://blogs.msdn.com/b/somasegar/archive/2013/06/26/visual-studio-2013-preview.aspx

 

Eso es todo no olviden de darle RT y de seguirme desde el tweet de aquí abajito y si tienen alguna duda puede responder desde el mismo Winking smile

 

@PeterConchaR
Microsoft Student Partner Lead LATAM

Web Developer HTML5, CSS3 and JavaScript

Community Member Avanet

https://ptrconcha.wordpress.com/

HTML5.- Construyendo mi primera app Windows 8 [Taller]


En está ocasión conversamos y aprendimos con los estudiantes de la Universidad Politécnica Salesiana sobre HTML5 y Windows 8 para desarrolladores Web es un gusto compartirles el material como los recuerdos del momento 😉

UPS

UPS

Link a skydrive con todo el material

Y esto es todo por hoy chicos no olviden de seguirnos en @Avanet

Me despido @PeterConchaR

HTML5.- Construyendo Formularios en WebMatrix Parte 3


Continuando con los post sobre todo lo que nos trae HTML5 para la construcción de formularios hay algo muy importante que aclarar y para ir elaborando un resumen de lo aprendido; que el aplicar los respectivos type para el control a emplear nos otorgara:

Mayor semántica: Al identificar el type empleado nos queda claro el uso de dicho control.

image

Con esto a simple vista podemos definir que se va a solicitar un texto que podría ser un nombre del usuario seguido de su teléfono y dirección de correo electrónico.

Soporte a dispositivos táctiles: Al acceder a nuestros formularios al posicionar el foco en cada control veremos como nuestro teclado móvil se adapta para el ingreso de lo datos que fue diseñado ese tipo de input.

localhost android

Para los interesados aquí estamos emulando la vista de la página en un Samguns Galaxy S con la extensión Browser Stack de WebMatrix

Ayuda a el autorelleno: Gracias al emplear correctamente los types veremos como el navegador rellena los campos automáticamente ya que al tener reconocido el tipo de entrada que se solicita el mismo proporciona los datos requeridos en caso de que estos hallan sido guardados previamente.

Reglas de validación: Cuando se ingresa los datos el navegador lo comprueba con el tipo de input que se esta empleando y restringe el envió de la información del lado del cliente evitando que se envíen datos con parámetros no afines al tipo de input empleado.

image

Otro punto importante es para el caso de los navegadores que no reconozcan algunos de los <input type=” ”> para ese caso es recomendado trabajar con framework de detección como modernizr.

Ahora si luego de aclarado estos conceptos vamos a dar un último vistazo a otro grupo de <input type=””> con este grupo finalizaremos este articulo sin más recordarle que si probablemente se me este escapando alguno no dudes en compartirlo con un coment Guiño

<input type=”search”>

image

Este tipo de entrada se debe usar receptar una cadena para realizar consultas, en que nos beneficia esto ahora cuando empieces a digitar contenido en la casilla el navegador si encuentra en nuestro historial ingresos previos nos dará sugerencias de autocompletado.

image

<input type=”number”>

image

Este tipo de entrada debe usarse para trabajar con números, en que nos beneficia esto ahora cuando empieces a digitar contenido en la casilla el navegador en el caso de teléfonos móviles desplegará el teclado numérico. Y ahora te preguntaras en que se diferencia su uso con el <input type=”tel”> la respuesta es simple en el valor semántico que le otorga a la etiqueta.

image

Además de esto se le suma que al nivel de navegadores de escritorio solo el Google Chrome soporta al 100% la etiqueta ya que muestra los respectivos controles para incrementar y decrementar los dígitos.

image

Aparte el propósito de esto es que con el atributo step se puede fijar de cuando a cuenta va a ser el incremento o decremento.

image

<input type=”color”>

image

Este tipo de entrada debe usarse para trabajar en casos de requerir un selector de color. Vale la pena acotar que esto solo es de momento soportado por Google Chrome.

image

<input type=”tel”>

image

Vuelta con este tipo de control al visitar desde un dispositivo móvil y realizar touch en el control veremos como se despliega en el teclado numérico en vez del acostumbrado teclado general.

<input type=”url”>

image

Con este tipo de controles al intentar enviar una cadena que no tenga el formato de una URL enviara una alerta y evitara el envió de los datos no validos.

<input type=”date”>

image

Con este tipo de control nos permite trabajar de manera sencilla con un datepicker sin algún tipo de control o programación avanzada; vale la pena rescatar que por el momento es soportado por Google Chrome.

<input type=”time”> image

Al implementar este control nos permite formatear lo que se ingresa con el formato de hora y aparecen los controles para incrementar o disminuir los dígitos.

<input type=”password”>

image

Al implementar este control ocultara por defecto todo lo ingresado (soporta Firefox, Google Chrome, Internet Explorer 9). Además de que el navegador nos brindara la opción de guardar la contraseña al enviar los datos (soporta Firefox), ya que gracias a el aporte que le hace las etiquetas HTML5 al valor semántico el navegador detecta y se comporta de acuerdo al tipo de control con el que se esta trabajando.

image

Atributo maxlength

image
Con maxlength controlamos la longitud máxima del campo. Vale la pena rescatar que como esta y otras implementaciones expuestas con anterioridad antes se las cubría estas validaciones del lado del cliente con javascript pero con la llegado de HTML5 esto ya es un peso menos, siempre y cuando nos preocupemos con manejar la detección del soporte con modernizr probando siempre en todos los navegadores y dispositivos con WebMatrix, además de no olvidar siempre de realizar la respectiva validación del lado del servidor sea el lenguaje que estés implementando siempre debe estar validar de ambos frentes.

Eso es todo por hoy muchach@s recuerden visitar el pensum del curso y de realizar sus consultas en formspring o déjanos tu comentario Wink

No olvides seguir en twitter a:

Para estar al día con las entradas de la comunidad Avanet.

WebMatrix.- Centrado En La Productividad Del Desarrollor


Las herramientas deben hacer su vida más fácil. WebMatrix ofrece un rico editor diseñado para un desarrollo productivo con autocompletado, resaltado de sintaxis, colapsado código y validación de código.

Autocompletado y Type Through

El editor WebMatrix ofrece "autocompletado de código" (o tambien conocido como IntelliSense). A medida que se escribe, el editor sugiere funciones o palabras clave adecuadas para el contexto inmediato.

WebMatrix también autocompleta todas sus notas, llaves, paréntesis y corchetes. Pero si desea escribir los elementos de cierre WebMatrix no se interpone en su camino a esto se llama "type through".

Resaltado De Llaves

A veces con estructuras JavaScript anidados se nos puede ir de control cuando queremos revisar que función devuelve a quien pero para eso WebMatrix hace que sea más fácil de entender las cosas con su soporte de resaltado.

 

Colapsado De Código

Nuestra característica de colapsado del código ayuda a mantener las funciones grandes fuera del camino, lo que te permite centrarse en las partes del código que son importantes.

 

Validación De Código

Nadie lo hace bien la primera vez. A medida que escribes, se validará el código y mostrara los errores de sintaxis que te ayudarán a evitar errores en tu sitio o aplicación web.

 

Personalización

WebMatrix te permite seleccionar las opciones de formato automático que desees y personalizar el editor de acuerdo con tus preferencias.

Plantillas

¿Quieres añadir un nuevo archivo a tu sitio web? WebMatrix ofrece una variedad de plantillas para elegir, incluyendo: HTML, CSS, PHP, CSHTML, JS, XML, TXT y muchos más. Para ayudarte a poner en marcha tu código, las plantillas incluyen bloques de código comunes de acuerdo a cada tipo de archivo.

Si tiene varios archivos abiertos, WebMatrix señala de colores las pestañas por tipo de archivo para ayudarte a determinar rápidamente cuál es cuál.

 

Fuente: http://www.microsoft.com/Web/webmatrix/developer.aspx

Eso es todo por hoy muchach@s recuerden realizar sus consultas en formspring o déjanos tu comentario Wink

Y no olvides de descargar:

Y de unirte a:

WEBMATRIX USER GROUP