Diseño web (CSS3)

¿Quién soy?

Creador de Emezeta.com

Temáticas

Colaborador

Colaborador en Naukas.com

Introducción al diseño web

¿Qué es HTML5?

• Contenido: Documento web con la información
• Semántico: Esa información debe tener significado

¿Qué es CSS3?

• Presentación: Documento web con el diseño gráfico y visual
• Unificado: La presentación se hace en un único lugar

¿Cómo funciona CSS?

Una página sin CSS

Una página con CSS

Y una verdad universal...

Así se ve al programador CSS:

Chuleta CSS3 (Guía rápida)

CodePen

Para agilizar el taller utilizaremos:

http://codepen.io/pen/

Sintaxis HTML

Sintaxis HTML

(Puedes incluir texto)

Sintaxis HTML

(etiquetas anidadas)

Sintaxis HTML

Documento HTML5

<div>
    <span>Texto</span>
</div>
						

Sintaxis CSS

Sintaxis CSS

(Seleccionar clases o IDs concretos)

Elemento con ID (único)

Elemento con clase (se puede repetir)

Sintaxis CSS

(Pseudoclases y pseudoelementos)

Sintaxis CSS

(Atributos y valores)

Sintaxis CSS

(Agrupaciones)

Documento HTML5

<div>
    <span>Texto</span>
</div>
						

Documento CSS3

div {
  width:300px;
  height:50px;
}
span {
  color: white;
  background-color: black;
}
                        

Ejemplos interactivos

See the Pen FfKbI by Manz (@manz) on CodePen.

Ejemplos creativos de CSS

• Logo Android CSS (@Manz)
• Logo Android HoneyComb CSS (@Manz)
• Logo Batman CSS (@HarrisCarney)
• Tardis en CSS (@JohnGalantini85)
• Simpsons en CSS (@ChrisPattle)

InsTLPgram (Instagram Telepero)

See the Pen InsTLPgram by Manz (@manz) on CodePen.

Blend Modes

Ejemplo de Adobe (requiere Chrome parcheado)

Editores

Para programar como profesionales, hacen falta editores profesionales.

Brackets (Win/Mac/Linux)

http://brackets.io/

Sublime Text (Win/Mac/Linux)

http://www.sublimetext.com/

Bloc de notas de Windows

(Para los más atrevidos)

Otros editores

Los mejores editores de texto para programar

Plugins

• Brackets Icons: Muestra iconos con tipo de archivo
• Brackets Color Hints: Muestra colores usados previamente
• ST Less2CSS: Compila archivo LESS en CSS directamente
• ST Gutter Color: Muestra circulos con colores hexadecimales
• Emmet: Antiguo Zen Coding. Codificación más cómoda.

Emmet (Zen Coding)

div>ul>li

div+div>ul>li.clase1*5

div#header+(div#page>div#content+div#menu)+div#footer

-wmso-background

Emmet cheatsheet / http://docs.emmet.io/

Animaciones CSS3

Fotogramas CSS

Utiliza prefijos: (@-webkit-keyframes, @-moz-keyframes)

Animaciones CSS

Utiliza prefijos: (-webkit-animation, @-moz-animation)

Ejemplos CSS3

Campo de estrellas (@KeithClark)

See the Pen Single element pure CSS 3D starfield by Keith Clark (@keithclark) on CodePen.

Star Wars (@TimPietrusky)

See the Pen Star Wars opening crawl from 1977 by Tim Pietrusky (@TimPietrusky) on CodePen.

TARDIS CSS 3D (@Gerwinnz)

See the Pen 3D CSS Tardis by Gerwin van Royen (@Gerwinnz) on CodePen.

Char Animation (@aakashrodrigues)

See the Pen Character Animation in Pure CSS by Aakash Rodrigues (@aakashrodrigues) on CodePen.

Sistema Solar 3D (@JulianGarnier)

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

¡Eso es todo!

¿Dudas? ¿Ideas? ¿Preguntas?

Contacto: manz@emezeta.com