Internet Explorer.- Roadmap de la plataforma.


image

El equipo de #IE continua con su compromiso de compartir abiertamente su plan para la plataforma vía status.modern.IE. Hoy anuncian otra ronda de actualizaciones al plan de trabajo. Estas actualizaciones incluyen nuevas funciones como: ECMAScript, Redes, Rendimiento, Multimedia, CSS y DOM; bajo un estado de consideración o desarrollo:

Característica Estado
Math Built-ins (ES6) En desarrollo
Number Built-ins (ES6) En desarrollo
String Built-ins (ES6) En desarrollo
Object Built-ins (ES6) En desarrollo
RegExp Built-ins (ES6) En desarrollo
Classes (ES6) En desarrollo
Template Strings (ES6) En desarrollo
dppx Unit for resolution Media Query En desarrollo
DOM Event Constructors En desarrollo
WAV Audio Support En desarrollo
Meta Referrer En desarrollo
WeakSet (ES6) Bajo Consideración
Spread (ES6) Bajo Consideración
Tail Calls (ES6) Bajo Consideración
Subclassing (ES6) Bajo Consideración
Modules (ES6) Bajo Consideración
SIMD (ES7) Bajo Consideración
Asm.JS Bajo Consideración

Sigue a status.modern.IE para continuas actualizaciones, sobre como evoluciona los planes que tiene el equipo para la plataforma Web en IE. Además se integran los estados de las característica de IE a caniuse.com vía open data feed . También nos puedes ayudar haciendo de este un recurso valioso para los desarrolladores contribuyendo al proyecto de código abierto. Como siempre, si deseas hacerles preguntas y darles algún feedback al equipo, puedas hacerlas vía @IEDevChat.

Fuente Original: http://blogs.msdn.com/b/ie/archive/2014/09/18/updates-to-our-platform-roadmap.aspx

Eso es todo por ahora chic@s, sin más me despido ;)

Att. @PeterConchaR

Full Stack Developer / Speaker Profesional

Community Lead Avanet

IE userAgent

Microsoft MVP ASP.NET/IIS

https://ptrconcha.wordpress.com/

Anuncios

WebMatrix.- Promoviendo la creación de CSScomb extension [Feedback]


image

Hola mis fantasticos geeks Open-mouthed smile

El día de hoy les comparto una gran utilidad y a la vez promover su creación desde “WebMatrix User Voice” para nuestro extraordinario IDE; se imaginan otorgarle una extensión como CSScomb, pero en fin vamos con la explicación sobre está herramienta.

image

¿Qué es CSScomb?

Es una herramienta para ayudarnos a clasificar con un orden especifico nuestro CSS.

Caracteristicas

  • Clasificación de las propiedades de CSS
    • El ordenar las propiedades ayuda a los profesionales
  • Configurar el orden de las propiedades de CSS
    • Usa el orden al que estás acostumbrado a utilizar
  • Parseo de CSS en las etiquetas <style>, style = "…" atributo
    • CSScomb encuentra un código CSS de otro lenguaje y  lo puede organizar
  • Formato de hojas de estilo no cambia
    • Trabaja CSS singleline y multiline
  • Separación de las propiedades de CSS por grupos
    • Grupos separados de cadenas vacía si quieres
  • Soporte total a CSS2/CSS2.1/CSS3 y incluso CSS4 🙂
    • CSScomb está listo para el desarrollo avanzado de código CSS

Les dejo este vídeo para que conozcan más y se motiven por darnos su voto Smile

Vídeo sobre CSScomb
Nota: Vimeo usa iFrame por lo que no se pudo poder el vídeo incrustado :S

¿Qué es el grupo de “WebMatrix User Voice”?

Es un centro oficial de Microsoft que sirve para reunir todo el feedback o retroalimentación generado por los usuarios del IDE de Webmatrix (estó incluye extensiones, sugerencias a funcionalidades extras, base de datos, IIS Express, bugs, UI)

Si te pareció interesante la herramienta y quieres aportar al progreso de la misma te invito a realizar clic aquí para votar (no requiere registro puedes iniciar con una cuenta Microsoft, Google o Facebook). Y no olvides que tu también puedes generar feedback Winking smile

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/

WebMatrix.- Buenas prácticas en CSS con Boilerplate y OrangeBits Compiler


Muy buenas mis geeks, ahora tendremos unos tips y herramientas para hacer del mantenimiento y trabajo de nuestros estilos css sea más profesional  Winking smile (si eres nuevo en esto del CSS te invito a revisar el pensum del curso de HTML5 donde te enseñamos CSS)

Nota del autor: es probable que veas muchos emoticons en este post dado que quería expresar las posibles expresiones que tuviste al pasar por los mismos problemas de novato.

Además en esté post asumimos que ya posees conocimientos de LESS, de no ser así te invito a revisar el siguiente video donde mi compañero Esteban Beltran (@academo) nos enseña a dar nuestros primeros pasos en LESS.

Primero lo que vamos hacer es iniciar WebMatrix y nos dirigimos a crear un nuevo proyecto con una plantilla llamada Boilerplate (sino sabes lo que es Boilerplate y  porque lo usamos como base en nuestros proyectos HTML5 te invito a revisar el siguiente post).

New > Template Gallery > HTML > Boilerplate

image

image

 

imageLuego al finalizar la instalación de nuestra plantilla, dirigimos a extensiones para instalar OrangeBits Comiler , en caso de que aún no la hallas utilizado.

Qué es OrangeBits y para que sirve ???

Es una extensión que nos ayuda a compilar (LESS, Sass, Scss y CoffeeScript), minificar (JavaScript, CSS) y optimizar imágenes. Y a lo que le vamos a sacar provecho está vez para mejorar la carga y desarrollo de nuestros CSS.

image

Es probable que tengas que volver abrir el editor para que los cambios hagan efecto.

Ahora nos dirigimos a nuestro directorio “CSS”, copiamos todo el contenido de “style.css” y borramos el archivo. Lo que vamos hacer con esto es llevar todo ese CSS que nos entregó la plantilla de boilerplate y lo pondremos en una hoja de estilo de LESS para esto nos dirigimos a crear nuestro primer archivo LESS.

Home > New > ALL > CSS (LESS)

image

image

Y procedemos a darle el nombre de style”, luego damos clic en “OK” y nos dirigimos al panel de archivos donde veremos que se ha creado el archivo “style.less” y otro como “style.css”.

image

De aquí en adelante los archivo con los que vamos a trabajar son “.less”  mientras que WebMatrix + OrangeBits Compiler se encargará de devolvernos el “.css” que sería el resultado de toda nuestro desarrollo con LESS.

Ahora vamos a ingresar a nuestro archivo “style.less” y pegar todo el contenido que teníamos en portapapeles y luego agregaremos a nuestro proyecto otros archivos LESS.

image

Color: tendremos todo lo relacionado con el color de nuestro proyecto xD … más las imágenes también irán aquí porque ¿? porque le dan color al sitie Confused smile.

Forms: los estilos que le aplicamos directamente a los formularios.

Fuente: tamaño, estilos, tipografía de nuestra web. 

Header: al igual que la hoja de estilo forms, aquí ira lo relacionado directa y únicamente con el header de nuestro sitio.

Layout: aquí realizaremos la maquetación de nuestra web (contenedores y posiciones).

 

Luego de esto vamos a enlazar todos estos archivos LESS. Ingresamos a nuestro archivo “style.less”  y realizamos un “@import” de cada uno de los archivos LESS que creamos y lo haremos en la sección de “primary style” que es donde debería ir todo nuestro CSS pero como no queremos tener un archivo inmenso todo mezclado donde para encontrar algo habría que hacer búsquedas de palabras clave o scrolear de arriba abajo. Porque hacer todo eso cuando podemos tener un desarrollo modular con LESS Open-mouthed smileimage

Y ahora me dirás ósea eso no es novedad puedo hacer lo mismo sin LESS. Y ahí es donde te digo que te equivocas si tu haces un “@import”  normalmente en tu hoja de estilos sin LESS lo que ocurrirá es que tengas no solo una petición “get” de tu hoja “style.css” sino que ocurrirá que tendrás un “get” por cada “@import” que realices D: haciendo la carga de tu web más lenta y por gusto.

image

Pero con LESS no pasa esto Open-mouthed smile porque??? Hagamos una demostración sencilla.

Nos dirigimos a nuestro archivo “fuentes.less” y ponemos el siguiente CSS

image

Y luego nos dirigimos a nuestro archivo “index.html”  e incluimos la siguiente etiqueta

image

Ahora lo que nos queda por hacer es actualizar nuestros “.css”, por los archivos independientes no te preocupes que el editor se encarga de actualizarlos cada vez que grabes nuestro foco debe estar en nuestra hoja “style.less” ya que tenemos que compilarla de nuevo para que tome los nuevos valores provenientes de cada “@import”  y lo haremos de la sencilla y siguiente manera.

image

Y buala! por arte de magia sin comandos que recordar tendrás un desarrollo ordenado (modularmente) y el resultado final una sola hoja de estilos.

image

Y dijiste bueno donde está el resultado hasta ahora todo chido buen desarrollo ordenado, pero no solo eso podemos hacer con está brillante extensión (OrangeBits Compiler).

 

Tenemos más???

 

Si señores desde nuestro editor sin problemas podemos reducir nuestra hoja de CSS para un peso más pequeño y nuestra página cargue más rápido.

image

Y como resultado nos devolverá una hoja de estilos reducida “style.min.css” que consiste en tener todo el CSS en una sola línea sin espacios para reducir el tamaño del archivo.

image

Y para finalizar este archivo lo será el que subiremos a producción en nuestros proyectos por lo que es el que vamos a linkear desde nuestro “<head>” en nuestro archivo “index.html”.

image

image

image

image

image

Eso es todo mis geeks espero que les halla gustado el post si fue así Open-mouthed smile no olviden RT aquí abajito está el tuit y si tienes alguna duda me puedes responder desde el mismo tuit Winking smile

 

 

Te gusto WebMatrix!!!

que esperas para unir al grupo de Web Developers en facebook Winking smile solo dale un clic al banner.

image

WebMatrix.- Construir Sitios Con Node.js Es Irresistible


¿Amas Node.js? Con características como el autocompletado de código y plantillas integradas basadas en las mejores prácticas, WebMatrix hace que sea más fácil escribir aplicaciones Node.js.

Autocompletado De Código Para Node.js

Muchos editores tienen una característica llamada "autocompletado de código" (o IntelliSense) que sugiere las funciones apropiadas o palabras clave a medida que escribes. El editor WebMatrix sugiere variables, funciones, e incluso módulos npm potencialmente relevantes para el contexto actual.

 

Plantillas Node.js

Cada proyecto se inicia en algún lugar. Nuestras plantillas integradas proporcionan una amplia gama de puntos de partida desde los sitios vacíos, a través de aplicaciones con todas las funciones que utilizan Express, enrutamiento, OAuth y más.

 

Jade y EJS

WebMatrix tiene soporte de primera clase para Jade y EJS, para que puedas elegir tu plantilla favorita de lenguaje de representación.

 

LESS y SASS

Usa el preprocesador de CSS  que más te gusta sea LESS o SASS para hacer tú código de estilo más eficiente. WebMatrix incluye autocompletado de código, validación y formato de documentos CSS.

 

CoffeeScript

Si no te gustan las llaves, WebMatrix tiene un gran editor CoffeeScript, completo con extensiones que proporcionan una compilación automática.

 

Publicando En La Nube

Tu puedes publicar tu sitio web Node.js en Windows Azure o cualquier otro proveedor de hosting que soporta FTP o Web Deploy.

 

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

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

  • peter.concha@avanet.org

  • @PeterConchaR

    Y no olvides descargar:

    Y de unirte a:

    WEBMATRIX USER GROUP
  • 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