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/

 

 

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/

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/

WebMatrix.- Páginas Web Optimizadas Para Más Dispositivos y Plataformas


En la actualidad muchas personas visitan sitios web a través de teléfonos inteligentes, tablets y otros dispositivos. Es importante diseñar tus sitios web no sólo para el escritorio, sino también para estos nuevos factores presentación. WebMatrix tiene varias características integradas que facilitan esta tarea para los desarrolladores.

Plantillas Amigables Para Móviles

WebMatrix ofrece una variedad de plantillas que funcionan bien en dispositivos móviles y en el escritorio. Se construyen utilizando las mejores prácticas de: jQuery Mobile, HTML5 y CSS3. Con estas plantillas puedes crear sitios web para dispositivos móviles en cuestión de minutos.

 

Emuladores De Dispositivos

WebMatrix ofrece una manera fácil de probar las vistas en móviles de sus sitios web a través de varios emuladores y simuladores más populares, tales como el emulador de Windows Phone 7 (de Microsoft) y los simuladores de iPhone y iPad (por Electric Plum).

 

Autocompletado De Código Para jQuery Mobile

jQuery Mobile es un framework táctil optimizado para la construcción de sitios web y aplicaciones para teléfonos inteligentes populares, tablets y dispositivos de escritorio. Esto utiliza atributos de datos HTML5  para ofrecer un amplio conjunto de marcado basado en widgets. WebMatrix 2 introduce una característica de autocompletado código jQuery Mobile que sugiere atributos de datos apropiados y los valores de los atributos a medida que escribes, eliminando la necesidad de memorizar palabras exactas o buscar referencias.

 

Fuente: http://www.microsoft.com/Web/webmatrix/mobile.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.- Diseñado Para Estándares


    WebMatrix proporciona un amplio soporte para aplicaciones Open Source, ASP.NET, PHP, Node.js y otros estándares web.

    Herramientas Para Una Web Moderna

    WebMatrix proporciona potentes funciones que hacen la vida del desarrollador más fácil, incluyendo selectores de color, JavaScript IntelliSense , herramientas para la búsqueda y más.

     

    HTML5

    WebMatrix incluye autocompletado de código, validación y formato para HTML5 para que pueda construir sus páginas web utilizando los últimos estándares.

     

    CSS3

    Con soporte de primera clase para CSS3, WebMatrix te permite escribir páginas web impresionantes. WebMatrix incluye autocompletado de código CSS3, propiedades especificas del proveedor, validación y formato.

     

    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.

     

    JavaScript

    WebMatrix ama JavaScript. Por eso nos ofrece autocompletado de código, el formato y validación para JavaScript que son las herramientas que necesitas para construir un gran sitio web.

     

    Autocompletado De Código Para jQuery Mobile

    WebMatrix hace que sea más fácil el soporte para dispositivos móviles. WebMatrix apoya a jQuery Mobile, que es framework touch optimizado para crear aplicaciones móviles e incluye soporte integrado para autocompletado de código y personalización de datos.

     

    Publicar En La Nube

    Muchos sitios web exigen una mayor disponibilidad y escalabilidad bajo demanda. Con WebMatrix, puedes publicar tus sitios web en Windows Azure o cualquier proveedor de hosting que soporte FTP o Web Deploy.

     

    Fuente: http://www.microsoft.com/Web/webmatrix/standards.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.- Plantilla HTML5 Boilerplate


    Si amigos como lo están leyendo ahora WebMatrix soporta la plantilla para front end más popular de la web “Boilerplate”.

    image

     

    Bueno y ahora te preguntaras que me ayuda Boilerplate para que sirve ???

    Esta plantilla basada en HTML5 nos ayuda a construir aplicaciones o sitios web rápidos, robustos y adaptables. Ahora con esto puedes comenzar tú proyecto web combinando el conocimiento y esfuerzo de tus mejores años de desarrollador, todo esto te lo brinda un paquete pequeño.

     

    Ahorre tiempo. Cree con confianza.

     

    Que tiene Boilerplate, que lo hace tan especial?

     

    image

    Analytics, Iconos, y Más

    Una plantilla HTML amigable para dispositivos móviles, código optimizado para Google Analytics, iconos de marcado de posición de dispositivos táctiles, y documentos adicionales que cubre docenas de consejos y trucos.

     

    Normalize.css y Helpers

    Incluye Normalize.css v1.0.x que hace que los navegadores muestren los elementos más coherente y de acuerdo con los estándares modernos. Este precisamente se centra sólo en los estilos que necesitan ser normalizados. Además de esto tenemos otros estilos populares que son base del diseño, también tenemos los helpers, media queries, y estilos de impresión.

     

    jQuery y Modernizr

    Recibe las últimas versiones reducidas de las mejores librerías: JQuery ( vía Google’s CDN, con retorno local (local fallback) y Modernizr que es es una biblioteca JavaScript que detecta características HTML5 y CSS3  en el navegador del cliente.

     

    Alto Rendimiento

    Viene con una configuración de Apache que nos ayuda a lograr un rendimiento excelente al sitio. De forma independiente se mantienen otras configuraciones de servidor, un node build script y un ant build script.

     

    A continuación les dejo un video del sitio oficial de Boilerplate que nos muestra su potencial y un screenshot de lo que nos da esta plantilla en Webmatrix.

     

    Una introducción de HTML5 Boilerplate

     

    image

     

    Y quien usa HTML5 Boilerplate?

    Google, Microsoft, NASA, Nike, Barack Obama, Mercedes-Benz, ITV News, BAE Systems, Creative Commons, Australia Post, Entertainment Weekly, Racing Green, y muchos más.

     

    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

    HTML5.- Estilo con una Hoja Externa en WebMatrix


     

    Muy buenas estimados geeks, antes de entrar en detalles con CSS te recomendamos revisar los capítulos anteriores:

    HTML5.- Introducción y Estructura en WebMatrix

     HTML5.- Estilo con CSS3 en Webmatrix

     

    Ahora luego de un poco de introducción vamos con la practica el día de hoy veremos con dar un poco de estilo a tus textos más bordes redondeados.

     

    Código

     

    Archivo .html

    Ahora vamos a explicar un poco lo que hemos hecho aquí.

    En el archivo CSS3.html tenemos:

    • Línea 6 <link rel="stylesheet" href="estilos.css" /> 
      • En esta línea hacemos referencia a nuestra hoja de estilos externa
    • Línea 9 – 13
      • Vemos como aplicamos dentro de nuestro <body> diferentes etiquetas entre ellas una con ID y otra con una clase más adelante en nuestro archivo estilos.css veremos como a través de etiquetas, ID y clases podemos dar diferentes estilos.
      • La etiqueta <span> permite agrupar variod elementos en línea seguidos dentro de un mismo bloque (por ejemplo varias palabras seguidas dentro de un párrafo) para luego darle formato con una hoja de estilos.

     

    RECUERDA los ID no se pueden repetir


    Archivo .css

    En nuestro archivo estilos.css tenemos:

    • Línea 1- 5 body{ ……….}
      • Aquí podemos ver como aplicamos una regla de estilo a la etiqueta <body> a esto se le llama selector y esta referenciando a una etiqueta.
    • Línea 2 background: gray; 
      • Aqui aplicamos color al fondo de nuestro sitio en este ejemplo será gris.
    • Línea 3 font-family: Helvetica, Arial;
      • Aplicamos la respectiva fuente al texto del <body> de nuestro sitio una buena practica es aplicar helvetica ya que en la actulaidad está deberia estar en todos, en caso extremo de no encontrarse aplicamos en respaldo Arial donda nadie absolutamente nadie te puede decir que en la actualidad no posee un computador con dicha fuente, no esta demás aconsejarte que una muy mala practica es llenar de fuentes inecesarias el CSS basta con el estilo deseado y esta dos de respaldo.
    • Línea 4 font-size: 16px;
      • Aplicamos el tamaño a la  fuente en pixeles para la relación de nuestra sitie una buena practica es defenir en el <body> de nuestro HTML una medida global que sirvira al momento de diseñar logremos trabajar con un tamaño relativo haciendo que el diseño de nuestro sitio dependa del tamaño de nuestra fuente global más abajo veran la aplicación de este concepto.
    • Línea 7 text-align: center;
      • Alineamos el texto dentro del H1 al centro
    • Línea 8 text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
      • Aplicamos sombra al texto H1.
      • Los valores de esta propiedad son: movimiento_en_X, movimiento_en_Y, difuminasión, color.
      • El valor color se ve definido por rgbaque es la cantidad de color en rojo, verde y azul esta combinación de tres valores se puede obtener con programas de diseño como photoshop o paint.
      • El último valor de color es para:
        • 1 = si queremos un 100% de sombra completamente opaca.
        • 0 = si la sombra será completamente trasparente.
        • 0.5 = si la sombra será de un 50%.
    • Línea 10 – 18 #parrafo1{….}
      • Ahora aplicamos una regla de estilo al ID este es un selector referenciando a un ID.
    • Línea 12 border-radius: 0.5em;
      • Aquí definimos el borde ne nuestro bloque.
      • El valor está definido por em que es una medida de fuente global logramos con esto agarramos a la variable global más cercana en este caso 16px y se convierte en em si le pongo 1em será los 16px, 2em serán 32px, si son 0.5em son 8px.
    • Línea 13 color: black;
      • Aquí aplicamos color a nuestro párrafo.
    • Línea 14 display: block; 
      • Los parrafos van a estar dentro de una forma tipo bloque.
    • Línea 15 margin: 1em auto; 
      • El margen que existe entre un elemento y los que tenga al lado.
      • Los valores para esta propiedad son:
        • 1m = margen arriba y abajo.
        • auto = margen a los lados en este caso lo dejamos en automático.
    • Línea 16 padding: 1em; 
      • Es el espacio que existe en un contenedor entre el contenido y los bordes del contenedor.
    Diferencia entre el Margin y Padding

    La diferencia entre margin y padding es:

    Al definir el margin estamos creando un espacio entre una capa y otra.

    Al definir el padding estamos indicando el espacio que existe entre el borde de la capa y lo que exista dentro de ella.

    Si todavía aún no lo tienes claro, puedes hacer un práctica, indicando el margin y el padding entre un div y otro. Si le das color alfondo de la capa lo comprenderas.
    • Línea 17 width: 70%;
      • Ancho de nuestro bloque.
    • Línea 19 – 22 .blue{….}
      • Un selector que hace referencia a la clase
    • Línea 21 font-weight: bold; 
      • Definimos el grosor de la letra los valores pueden ser:
        • bold: negrita
        • normal 
        • border: bordeado
        • lighter: claro
        • inherit: sirve para heredar su valor de su etiqueta padre.

    Presentación

     

    Presentacion Navegador Chrome

     Presentacion Navegador IE9

     

    El código lo pueden encontrar aquí.

    Puedes realizar tus consultas en formspring  o dejanos tu comentario Wink

    Mail: peter.conchar@fcmf.ug.edu.ec

    No olvides seguir en twitter a:

    @PeterConchaR

    @Avanet

    @SoreyGarcia

    para estar al día con las entradas en este blog.

    Si quieres aprender un poco más sobre CSS te recomendamos seguir la capsula:

     CSS para principiantes