Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

lunes, 7 de abril de 2014

sábado, 9 de marzo de 2013

Menu horizontal con CSS y HTML

Video tutorial en el cual enseñaremos como hacer un menu horizontal con html y css . dicho menu lo crearemos en unos pocos pasos -

 

viernes, 1 de febrero de 2013

sábado, 15 de diciembre de 2012

Curso Sass y Compass - 13 - Directivas de control y inspeccionar código

Este es el 13º video del curso de Sass y Compass en el cual vamos a ver las directivas de control (@if , @else if , @else) y como inspeccionar nuestro código con las palabras reservadas @warn y @debug.

El Video




 

Descargar en HD + Archivos


http://depositfiles.com/files/ii05lsa2x

 

Algunos enlaces ;-)


Todos los videos del curso

PlayList en Youtube

Web oficial de Compass

Web oficial de Sass

viernes, 14 de diciembre de 2012

ElementalCode Tips - 1 - Insistimos con CodePen

Empezamos con el primer video de esta serie de videos ElementalCode Tips en el cual vamos a ver un breve resumen de la herramienta online CodePen.

 

El Video




Descarga el video en HD ;-)


http://depositfiles.com/files/7e6u4m7sl

 

Algunos enlaces


Web Oficial de CodePen

jueves, 6 de diciembre de 2012

Curso Sass y Compass - 10 - Interpolación y funciones precons...

Este es el 10º video del curso de Sass y Compass en el cual vamos a ver la interpolación y el uso de algunas funciones preconstruidas de Sass.

 

El Video




 

Descargar en HD + Archivos


http://depositfiles.com/files/yqoya5bn1

 

Algunos enlaces ;-)


Todos los videos del curso

Ejemplo interpolación con Sass en Codepen

Web oficial de Compass

Web oficial de Sass

PlayList en Youtube

 

Me había demorado un tiempo en sacar este video ya que tuve algunos problemas con el PC ...

lunes, 19 de noviembre de 2012

Curso de Sass y Compass - 6 - Anidación en Sass

Este es el 6º video del curso de Sass y Compass en el cual vamos a ver la anidación en Sass.

 

El Video




Descargar en HD


En el caso de que lo quieras tener más a mano y poder analizarlo mejor.

http://depositfiles.com/files/es0qxdrxl


Algunos enlaces ;-)


Todos los videos del curso

Web oficial de Compass

Web oficial de Sass

 

Cualquier sugerencia, crítica, comentario es bienvenido :)

sábado, 17 de noviembre de 2012

Curso de Sass y Compass - 5 - Syntax Highlighting para Sass en Sublime Text

Este es el 5º video del curso de Sass y Compass en el cual vamos a ver como añadir un reconocedor de sintaxis (Syntax Highlighting) para Sass a Sublime Text.

Puedes utilizar Sublime Text 2 para Sass, pero también se puede utilizar con otros editores, acá una lista de editores que soportan Sass.

 

El Video




Descargar en HD


En el caso de que lo quieras tener más a mano y poder analizarlo mejor.

http://depositfiles.com/files/hk5krd30n

 

Algunos enlaces ;-)


Todos los videos del curso

Web oficial de Sublime Text

Highlighting para Sass para Sublime Text

Web oficial de Compass

Web oficial de Sass

 

jueves, 15 de noviembre de 2012

Curso de Sass y Compass - 4 - Crear y configurar proyectos

Este es el 4º video del curso de Sass y Compass en el cual vamos a ver como crear y configurar proyectos.

Lo que veremos en este video es lo siguiente:

  • Las dos sintaxis del lenguaje Sass

  • Crear proyectos con Sass/Compass

  • Crear un nuevo proyecto

  • El archivo de configuración config.rb

  • Compass Watch

  • Empezar con Sass/Compass a partir de un proyecto existente



El Video




Descargar en HD


En el caso de que lo quieras tener más a mano y poder analizarlo mejor.

http://depositfiles.com/files/6ahizb260

 

Algunos apuntes


Crear proyectos, etc


Para crear un proyecto Sass/Compass
compass create nombre-del-proyecto

Para monitorizar el proyecto, es necesario ir a la raíz del proyecto y escribir "compass watch"
cd nombre-del-proyecto
compass watch

Convertir los archivos CSS en un proyecto existente
sass-convert --from css --to scss -R css sass

--from css indicamos que queremos convertir (css)

--to scss indicamos a que lo queremos convertir (también se puede a sass)

-R css indicamos que busque en el directorio CSS de forma recursiva (que busque todos los archivos CSS que hayan en la carpeta CSS)

sass indicamos el nombre de una carpeta para almacenar los archivos convertidos

 En el config.rb (algunas configuraciones)


# Directorio donde se encuentra los archivos con extensión SCSS o SASS
sass_dir = "sass"

# Directorio donde se encuentran los archivos CSS
css_dir = "css"

# Directorio donde se encuentran los archivos Javascript
javascript_dir = "js"

# Directorio donde se encuentran las imagenes
images_dir = "img"

# Tipos de salidas
output_style = :expanded # CSS expandido
# output_style = :nested # CSS semi-expandido
# output_style = :compact # CSS compacto, una linea por cada selector
#output_style = :compressed # CSS comprimido, todo en una linea

# Comentarios en el CSS procesado
line_comments = false

 

Algunos enlaces


Todos los videos del curso

Web oficial de Compass

Web oficial de Sass

 

Cualquier duda o cosa que no haya tocado no duden en preguntar ;-)

martes, 13 de noviembre de 2012

Curso de Sass y Compass

curso de  sass y compass

Empezamos con nuestro primer Curso! Este es el comienzo de una nueva aventura con un Curso de Sass y Compass, que nos facilita la creación de CSS y trabajar de manera mucho más productiva. Sass y Compass lo pueden utilizar en todos o a la mayoría de tus proyectos webs.


Sass es un lenguaje orientado a mejorar CSS que le añade un montón de nuevas capacidades para evitar la abundante redundancia en CSS.


Compass es un conjunto de herramientas y patrones que nos ayudan a mejorar aún más nuestro trabajo con Sass.




El curso


A medida que vallamos avanzando con el curso (ya que todavía no esta terminado) iremos dejando los enlaces acá para que sean más fácil de ver o bajar. No te olvides de dejar este artículo en tus favoritos ;-)




Los videos y artículos ;-)


1 - Introducción a Sass y Compass


 [Artículo] [Video en Youtube] [Descargar]


2 - Instalación


 [Artículo] [Video en Youtube] [Descargar]


3 - Lo más básico sobre la terminal


 [Artículo] [Video en Youtube] [Descargar]


4 - Crear y configurar proyectos


 [Artículo] [Video en Youtube] [Descargar]


5 - Syntax Highlighting para Sass en Sublime Text


 [Artículo] [Video en Youtube] [Descargar]


6 - Anidación en Sass


 [Artículo] [Video en Youtube] [Descargar]


7 - Comentarios, variables y operadores


 [Artículo] [Video en Youtube] [Descargar]


8 - Herencia de selectores y Mixins


 [Artículo] [Video en Youtube] [Descargar]


9 - Selector Placeholder


 [Artículo] [Video en Youtube] [Descargar]


10 - Interpolación y funciones preconstruidas de Sass


[Artículo] [Video en Youtube] [Descargar]


11 - @import y @media queries


[Artículo] [Video en Youtube] [Descargar]


12 - Keyword arguments y @content


[Artículo] [Video en Youtube] [Descargar]


13 - Directivas de control y inspeccionar código


[Artículo] [Video en Youtube] [Descargar]


14 - Bucle @for


[Artículo] [Video en Youtube] [Descargar]


15 - Bucle @while


[Artículo] [Video en Youtube] [Descargar]


16 - Bucle @each


[Artículo] [Video en Youtube] [Descargar]


17 - Construir funciones y argumentos variables


[Artículo] [Video en Youtube] [Descargar]


18 - Shell interactivo y tipos de datos


[Artículo] [Video en Youtube] [Descargar]


19 - Instalación y uso de plugin


[Artículo] [Video en Youtube] [Descargar]


20 - Uso de sprites en Compass


[Artículo] [Video en Youtube] [Descargar]


21 - Maps y selector placeholder para sufijos


[Artículo] [Video en Youtube] [Descargar]


 

Donativos


El material que ofrecemos es gratuito, puede ayudar con una donación por medio del siguiente botón.

value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted" />

 

Algunos enlaces ;-)


Web oficial de Compass


Web oficial de Sass


PlayList en Youtube


Los ejemplos en GitHub