by Tatiana Pizarro

TALLER DE DISEÑO DE PÁGINAS WEB TATIANA PIZARRO EDWIN CANGO JEAMPIERRE VALAREZO ALVARO FEIJOO

2013

TALLER DISEÑO DE PAGINAS WEB

Tabla de contenido TALLER DISEÑO DE PÁGINAS WEB .............................................................................. 2 TEMARIO .............................................................................................................................. 2 HTML5 – HyperText Markup Language, versión 5 ........................................................... 2 Las etiquetas nuevas "importantes" de HTML5 ............................................................. 3 La segunda revolución de la web y el soporte de HTML5 en navegadores viejos ......... 5 NUEVAS CAPACIDADES DE JAVASCRIPT ............................................................ 6 HTML VS HTML5 ......................................................................................................... 9 CSS (Cascading Style Sheets) .......................................................................................... 10 Nuevas propiedades....................................................................................................... 11 Backgrounds y Borders: ................................................................................................ 11 Advanced Layout: ......................................................................................................... 13 Grid Positioning: ........................................................................................................... 13 RESPONSIVE DESIGN ................................................................................................... 18 ¿Por qué debo implementarlo en diseño web? .............................................................. 18 ¿Entonces no puedo hacer responsive design a mi website actual? .............................. 18 ¿Y cómo es un diseño responsive? ................................................................................ 19 INSTALACIÓN DE HERRAMIENTAS ......................................................................... 23 SUBLIME TEXT .............................................................................................................. 30

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PÁGINAS WEB TEMARIO HTML5 – HyperText Markup Language, versión 5

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un término de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery, jQuery UI, Sproutcore, entre otros.

Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas.

Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

TALLER DISEÑO DE PAGINAS WEB

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:

Código: <!DOCTYPE html> Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.

Las etiquetas nuevas "importantes" de HTML5 Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son:

<video> Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.

TALLER DISEÑO DE PAGINAS WEB

<audio> Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

<input*> Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo "email" que se autovalidan, calendarios tipo "date", sliders, números, entre otras.

<canvas> Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

TALLER DISEÑO DE PAGINAS WEB

La segunda revolución de la web y el soporte de HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener. Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio de internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el objeto XmlHttpRequest, más conocido como AJAX.

Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador responsable de detener la innovación en los estándares web también es el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían sido inviables.

Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE. Gracias a los grandes hackers del mundo: 

HTML5 Enabling Script: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible agregarles diseño a ellas o cualquier elemento dentro de ellas.

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PAGINAS WEB 

IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. Es magia negra, les digo!



Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o alternativa.

NUEVAS CAPACIDADES DE JAVASCRIPT Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas. Esta es una lista de las más importantes.

Web Storage Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor. Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que subir los KB que pesan todas las cookies que le hemos dado.

TALLER DISEÑO DE PAGINAS WEB

Web SQL Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer 9 declaró que no implementará Web SQL y la realidad es que Web Storage es más que suficiente para la mayoría de usos. Así que nada, esto por ahora no sirve.

Web Workers ¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso. Web Workers permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas complejas más veloces gracias al multithreading.

Web Sockets Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiuser en Javascript como PubSubHubBub.

TALLER DISEÑO DE PAGINAS WEB

Arrastrar y soltar Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros.

Geolocalización Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona en cualquier PC, no sólo en teléfonos ¿No me crees? Prueba este demo

dime

los

comentarios

qué

tan

cerca

encontró.

Bonus: Si tienes wifi prendido, tiene mejores posibilidades de encontrarte.

TALLER DISEÑO DE PAGINAS WEB

HTML VS HTML5

HTML

HTML5

DOCTYPE es mucho más largo que HTML4 está basada en SGML basado. Se requiere DOCTYPE para permitir el modo estándar para documentos HTML. ! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / <! DOCTYPE html> EN""http://www.w3.org/TR/htm l4/strict.dtd " > Audio y Vídeo son parte integrante de las Audio y video no son parte de la especificaciones de HTML5 por ejemplo especificación HTML 4 <audio> y <video> etiquetas Vector Graphics es posible con la ayuda Los gráficos vectoriales es parte integral de tecnologías como VML , Silverlight, de HTML5 por ejemplo, SVG y lona Flash, etc

Es casi imposible conseguir cierto GeoLocation de usuario navegar por cualquier página web, especialmente si se trata de dispositivos móviles.

JS GeoLocation API de HTML5 ayuda a identificar la ubicación del usuario navegar por cualquier página web (siempre que el usuario lo permite)

Memoria caché de aplicaciones, base de datos SQL Web y almacenamiento Web Caché del navegador se puede utilizar está disponible como el almacenamiento como almacenamiento temporal. del lado del cliente. Accesible conJavaScript interfaz en HTML5 navegadores compatibles. Sockets Web no disponibles.Mecanismos generalmente sonmucho transmisión.

Canales de comunicación full dúplex se están pueden establecer con el servidor utilizados utilizando sockets Web.Accesibles votación y mediante la interfaz de JavaScript en los navegadores compatibles con HTML5.

TALLER DISEÑO DE PAGINAS WEB

La mayoría de los navegadores modernos Funciona con todos los navegadores han comenzado a apoyar la especificación antiguos HTML5 por ejemplo, Firefox, Mozilla, Opera, Chrome, Safari, etc

No permite JavaScript para funcionar en Permite Javascript para funcionar en el navegador. JS se ejecuta en el mismo segundo plano. Esto es posible debido a la subproceso que la interfaz del navegador. JS Web trabajador API de HTML5

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.

(Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los principales navegadores comerciales, como Netscape e Internet Explorer, tan tempranamente como en el año 1998, la situación de entonces, comúnmente conocida como la “guerra de los navegadores”, hacía que los intereses comerciales de las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran en el camino de las CSS.

TALLER DISEÑO DE PAGINAS WEB

Nuevas propiedades 

Bordes: border-color, border-image, border-radius, box-shadow.



Backgrounds: background-origin, background-clip, background-size, layering multiple background images.



Color: HSL colors, HSLA colors, RGBA colors opacity.



Texto: text-shadow, text-overflow.



Interface: box-sizing, resize.



Selectores: attribute selectors.



Formatos: media queries, multiple column layout, speech.

Backgrounds y Borders:

Entre las principales características destacan que se podrá agregar múltiples background a un objeto, los borders podrán ser redondos con posibilidad de indicar el radio de curvatura.

HTML: <div class="vcard" vcard"> <div class="addr-bl" bl"> <div class="addr-tr" tr"> </div> </div> </div>

TALLER DISEÑO DE PAGINAS WEB

CSS: .vcard { background-color: #000; background-image: url(a-grad.gif), url(a-bl.gif), url(a-tr.gif); background-repeat: repeat-x, no-repeat, no-repeat; background-position: 0 0, 100% 0, 100%; }

Pueden darse cuenta que en este caso, los múltiples background son agregadas mediante coma ( , ). El nivel de precedencia es de menos a más, es decir, el que está de último es el background de encima.

Multi-column Layout

Ahora será más sencillo crear diseños con múltiples columnas sin etiquetas adicionales. Esta característica me ha parecido extraordinaria y muy útil. En el primer ejemplo, vemos la implementación de esta opción en la versión actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la multi-columna. <div class="entry-content" content"> <div class="col first"> … </div> <div class="col">

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PAGINAS WEB … </div> </div> .entry-content .col { float: left; width: 467px; margin-left: 30px; } .entry-content .first { margin-left: 0; }

Y en CSS 3 la definición es más sencilla y requiere menos procesamiento <div class="entry-content" content"> … </div> .entry-content { column-count: 2; column-gap: 30px; }

Advanced Layout:

Esta nueva característica permitirá organizar los elementos en pantalla de una mejor manera y combinarlos de diferentes maneras sin etiquetas adicionales.

Grid Positioning:

Dará la posibilidad que agregar reglas con cuadrículas invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las propiedades de los objetos para hacer que los elementos “floten” entre las posiciones. <div class="entry-content">

TALLER DISEÑO DE PAGINAS WEB

<h2>What is Sushi?</h2> … <img src="sushi.jpg" class="photo" alt="" /> … </div> .entry-content { grid-columns: (30px * *)[4]; grid-rows: 9em 33.3% *; column-count: 4; column-gap: 30px; } .entry-content h2 { float: page top left; width: 6gr; height: 1gr; margin-left: -30px; } .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; }

La respuesta a la pregunta de que si el ejemplo anterior es bastante confuso de entender a simple vista es, sí.

En palabras en un poco confuso explicarlo, pero el ejemplo anterior muestra un diseño con cuatro columnas, una foto en medio de la columna 2 y 3 y un titulo de página, todo al más puro estilo de una revista. Así que ya no hay excusas que poner cuando el diseñador nos proponga hacer algo así en HTML.

TALLER DISEÑO DE PAGINAS WEB

Selectors:

El concepto de selector es un poco complicado de explicar, y todo debido a que este tipo de propiedades son muy poco utilizadas. Algunos ejemplos de selector que si utilizamos son: :hover y :visited (los selector de hipervínculos). Este tipo de selector podría ser utilizados en otros elementos y de hecho así puede ser, a excepción del navegador Internet Explorer que no los soporta. Los nuevos selector serían: 

E:only-of-type: un elemento que es único en su tipo.



E:not(s): un elemento que no coincide con los selector simples.



E ~ F: un elemento F precedido de un elemento E.



E:nth-child: un objeto que es el enésimo hijo del nodo padre.



E:nth-last-child: un objeto que es el último hijo del nodo padre.



E:nth-of-type: un elemento que es el enésimo nodo hijo de otro elemento.



E.first-of-type: el primer elemento de un tipo.

Nuevas capacidades de CSS3 Diseñar en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No sólo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaños dinámicos requiere múltiples divs, estilos y cuatro PNGs diferentes en el mejor de los casos. Ya no más, CSS3 es hermoso y trae para ti opciones que hacen el diseño estúpidamente fácil.

TALLER DISEÑO DE PAGINAS WEB

@font-face, @fucking-font-face Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas de hippies. ¿Saben qué otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba ¿Y saben qué más? NADIE LO USA.

Selectores CSS ¿Te ha tocado hacer un diseño donde una lista o tabla tiene algunos elementos en blanco y los otros en gris? Como una cebra. Antes, la única forma era hacerlo a mano o con un script del lado del server. Ahora, con CSS3, sólo tienes que especificar un color para "odd" y otro para "even" y listo.

Columnas de texto ¿Sabes cómo se hacía antes que varios párrafos de texto se dividiera en columnas con HTML? No se podía. Ahora sólo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, lineas de separación, etc.

Opacidad, transparencia, canales alpha, contraste, saturación y brillo Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instrucción. Imágenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con sólo CSS.

TALLER DISEÑO DE PAGINAS WEB

Animaciones de transición y transformación Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados sólo con CSS. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrán aceleradas por hardware. Mucho más veloces, sobre todo en dispositivos móviles.

Bordes redondeados Sí. Con una instrucción puedes hacer que cualquier caja tenga bordes redondeados como quieras. Olvídate de crear múltiples divs, cortar pngs y otros temas arcaicos.

Reflecciones, gradientes y sombras Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de código y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

TALLER DISEÑO DE PAGINAS WEB

RESPONSIVE DESIGN

El Responsive design, diseño receptivo y adaptivo o como quieran traducirlo es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca.

¿Por qué debo implementarlo en diseño web? Porque responsive design tiene que ser pensado desde el concepto de diseño de nuestro website. Este diseño debe tener un concepto de fluido entre los elementos que la componen para así lograr el perfecto flujo al momento de codificarlo. Sí, si sólo diseñas webs, lo mismo debes implementar el concepto en tus diseños.

¿Entonces no puedo hacer responsive design a mi website actual? Dependiendo de tu website puede que sea más o menos doloroso. En el peor de los casos estás usando un cms con una plantilla pre-hecha que muy probablemente tenga el código muy desordenado y lo único que te ganes sean dolores de cabeza modificando el flujo del mismo.

TALLER DISEÑO DE PAGINAS WEB

¿Y cómo es un diseño responsive? Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, esta no cuenta con responsive design.

Esto es responsive design y se logra con un conjunto de técnicas de css3 y en especial las mediaqueries de las cuales hablaremos en siguientes tutoriales.

Esto no sólo es agregarle algo más a tu web para que sea más fancy, es una necesidad hoy en día ya que la navegación móvil es cada vez más grande y con múltiples resoluciones, por lo cual debemos tener un diseño que se adapte a todo.

La idea dentro de responsive design es que cuando pienses en tu diseño tengas una idea clara de los bloques que lo conformarán, luego sea super sencillo trabajar en una maquetación eficaz que mantenga en flujo correcto de la estructura, así que debes hacerle ajustes ligeros a los bloques del diseño dependiendo del target.

TALLER DISEÑO DE PAGINAS WEB

Se puede categorizar los patrones dentro del responsive desgin:

Mostly Fluid – más o menos fluido

Este quizá es el más popular dentro del responsive design ya que que un muy protagonista primer bloque seguido de otros 2 con menos relevancia y este al momento de tener un dispositivo se adapta siguiendo el flujo que hay en este.

Column Drop – caída de columna

Quizá su cms favorito lleve un aspecto de flujo muy similar a este. Bienvenido, este es el responsive design que buscas. Este tipo de diseño se adapta hasta el punto en el que no se pueden manejar las tres columnas en una sola fila, entonces la columna (con el contenido más random) pasa a la parte inferior y luego el flujo se sigue desarrollando hasta llegar a una sola columna.

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PAGINAS WEB Layout shifter – movimiento de estructura

Este probablemente sea la forma de decirle innovación al responsive design ya que ahora sí cambia ligeramente el diseño, pero no por esto está mal, por el contrario, esta estructura está orientanda a dar una experiencia diferente en dispositivos de pantallas más reducidas para invitar al usuario a la navegación en el website.

Dénse cuenta que es muy usada para reacomodar menus y header.

Tyny tweaks – pequeños cambios

Esto es magia pura para los microsites que sólo brindan información referencial del producto e invitan a una acción rápida, por tanto la navegación es casi nula y el responsive desgin sólo adapta los contenidos a la pantalla sin casi hacerle cambios.

TALLER DISEÑO DE PAGINAS WEB

Off canvas – fuera del canvas

Estoy seguro es el más popular en las webapps que no siempre tienen un diseño wow sino más bien guardan muchas información y múltiples opciones por lo que tienen que recurrir a esta clase de responsive design. Consiste en sólo tener un bloque de información general que no distraiga mucho (como el timeline de facebook en su aplicacion móvil) y guardan las demás opciones o menús en botones que suelen tener íconos para distinguirlos. Es indispensable que sean interfaces muy usables.

TALLER DISEÑO DE PAGINAS WEB

INSTALACIÓN DE HERRAMIENTAS Para instalar Stylus, requerimos NodeJS . Si ya tiene NodeJS instalados en el sistema, puede omitir el paso siguiente.

Instalación NodeJS Instalación NodeJS en Windows es muy fácil. Simplemente descarga el instalador y ejecutarlo.Después de la instalación, puede ser necesario un reinicio.

TALLER DISEÑO DE PAGINAS WEB

Para comprobar si se ha instalado correctamente, ejecute el siguiente en la línea de comandos de Windows. 1.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">npm</span> npm</span>

Si usted ve la salida "Uso", está de enhorabuena.

2 - Instalación Stylus Una vez NodeJS está instalado, podemos instalar Stylus través NPM (gestor de paquetes del nodo). Aquí está el comando:

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PAGINAS WEB 1.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">npm install stylus -g</span> npm instalación stylus-g</span>

Verá Paquete archivos Download Manager necesarios para ejecutar Stylus. Ellos Copiar lugares apropiados. Una vez instalado, puede probar mediante la compilación de un archivo de ejemplo así:

1.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction:

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PAGINAS WEB ltr; text-align: left">//stylus files are save as .styl extension.</span> / / Archivos stylus se guardar como. Extensión styl.</span>

3.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">stylus -c sample.styl</span> stylus-c sample.styl</span>

Usted verá "sample.css compilados" o un error si había algún problema con la compilación.

TALLER DISEÑO DE PAGINAS WEB

Increíble init? Usted se tiene un Css Pre-procesador de trabajo. Ahora, vamos a echar un vistazo al lenguaje stylus sí, vamos a empezar con Código estilos de escritura Stylus permite escribir código de muchas maneras, si no te gustan los frenos?

1.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa n class="google-src-text" style="direction: ltr; text-align: left">//stylus will still understand your code without braces.</span> / / Stylus todavía va a entender el código sin llaves.</span> .<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa n class="google-src-text" style="direction: ltr; text-align: left">a.button</span> a.button</span> 4.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa n class="google-src-text" style="direction: ltr; text-align: left">webkit-border-radius: 5px</span> -Webkit-border-radius: 5px</span> 5.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa n class="google-src-text" style="direction: ltr; text-align: left">-mozborder-radius: 5px</span> -Moz-border-radius: 5px</span>

TALLER DISEÑO DE PAGINAS WEB

TALLER DISEÑO DE PAGINAS WEB 6.<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><spa n class="google-src-text" style="direction: ltr; text-align: left">borderradius: 5px</span> border-radius: 5px</span>

Informe de errores Informe de errores es donde Stylus es muy superior a inferior, y de alguna manera mejor que Sass.

TALLER DISEÑO DE PAGINAS WEB

otro ejemplo, donde el error se encuentra en el archivo incluido.

TALLER DISEÑO DE PAGINAS WEB

SUBLIME TEXT

Sublime Text es un editor de código al estilo TextMate, Kate o Redcar, su interfaz es limpia e intuitiva y soporta el uso de Snippets, Plugins y sistemas de construcción de código (Build Systems).

En un principio fue creado por Jon Skinner como una extensión rica en features de vim pero poco a poco fue adoptando identidad propia, debido a ello, Sublime Text aún conserva un modo de edición tipo vi llamado “Vintage mode“.

El modo Vintage está desactivado por defecto pero puede ser activado cambiando las opciones del editor en la configuración global.

Sublime Text está escrito en C++ y Python, incluye una implementación de CPython2.6 embebida así como una consola que no es sino un intérprete de Python desde el cual podemos ejecutar comandos y realizar tareas de retrospección y hacks múltiples.

TALLER DISEÑO DE PAGINAS WEB

La interfaz de plugins está programada en Python por lo que podemos programar plugins para el editor en ese lenguaje de programación. Los módulos que podemos importar y utilizar son: sublime, sublimelog, window y view.

Los archivos de configuración de Sublime Text son sencillamente diccionarios de Python y todos los aspectos del editor se controlan editando esos archivos tal y como lo harías en cualquier script.

TALLER DISEÑO DE PAGINAS WEB

Instalación de Sublime Text



Nos dirigimos a la url del sitio para descargarlo: http://www.sublimetext.com/

TALLER DISEÑO DE PAGINAS WEB



Una vez descargado procedemos a buscarlo en la carpeta de descargas



Instalamos



Damos clic en Ejecutar

TALLER DISEÑO DE PAGINAS WEB



Damos clic en Next como comenzar la instalación



Elegimos la ruta en donde queremos instalarlo al programa

TALLER DISEÑO DE PAGINAS WEB



Clic en Next para continuar la instalación



Clic en Install para terminar la instalación

TALLER DISEÑO DE PAGINAS WEB



Por últimos damos clic en Finish para culminar la instalación



Ahora para abrirlo lo buscaremos en el menú inicio

TALLER DISEÑO DE PAGINAS WEB



Y lo tenemos listo para comenzar a trabajar

TALLER DISEÑO DE PAGINAS WEB