maquetación

SUBLIME TEXT + BOOTSTRAP

@geninteractive

HTML + CSS + JS

ANTES

Un despelote

AHORA

<header></header>

Hacer cosas como <div id="header">

es un poco estúpido cuando el 99%

de los proyectos web tienen una cabecera.

<header> está diseñada para reemplazar la

necesidad de crear divs sin significado semántico.

<nav></nav>

Igual que <header>, <nav> está diseñado

para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta

dentro, aunque lo recomendado es usar listas

<ul>.Sólo puedes tener un <nav> por página.

<section></section>

Define un área de contenido única dentro del sitio.

En un blog, sería la zona donde están todos

los posts. En un video de youtube,

habría un section para el video, uno para los datos del video, otro para la zona de comentarios

<article></article>

Define zonas únicas de contenido independiente.

En el home de un blog, cada post sería un article.

En un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside></aside>

Contenido alternativo, widgets, login de usuario, etc...

Cualquier contenido que no esté relacionado

con el objetivo primario de la página va en un aside.

En un blog, obviamente el aside es la

barra lateral de información.

En el home de un periódico, puede ser el área de indicadores económicos.

<hgroup></hgroup>

Muchos headers necesitan múltiples títulos,

como un blog que tiene un titulo y un tagline

explicando el blog. <hgroup> permite colocar

un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.

En el HTML actual, sólo puedes usar h1

una vez por sitio o el h1 pierde prioridad de SEO.

<footer></footer>

Este es obvio. Es el pie de página y todo lo que lo compone.

Y ahora vamos al <code>

Sublime text

Sublime Text 2 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).

ST en Genbetadev

Descarga ST

Uso/ventajas de ST

- Panel de comandos: Shift + Command + P

- Selección multiple ALT

- Comentar: CMD + /

- Vistas Simultaneas: ALT + CMD + 1, 2, 3, 4

- 2 Vistar horizontales: CMD + ALT + SHIFT + 2

- Alignment: CTRL + CMD + A (alinear código)

- Nueva línea: CMD + ENTER

- Seleccionar todos los tags similares: CTRL + CMD + G

- Seleccionar similar: CMD + D

- Sugerencias: CTRL + Space

- Duplicar línea: CMD + SHIFT + D

- Organizar Alfabéticamente Fn + F5

SNIppets

1. Instalar package control enlace “copiar”

2. Abrir consola - “pegar”

3. Activar los paquetes. Shift + CMD + P ... Install...

4. Seleccionar paquete a instalar.

Ej: Instalar Emmet (ex-zen coding)

· Uso de Emmet Trucos

Maquetación con Emmet

en Sublime Text

Estructura Header / Seccion / Footer

(header>nav>ul>li{item}*4)+(section>article>h1{Titulo de articulo}+h3{Entrada del articulo}>+ul>li{item}*3^p{Texto del articulo})+(footer>ul>li*3^p)

MAQUETACION CON EMMET

EN SUBLIME TEXT

Header con imágenes y menú

header>div.imagen_header>ul>li>a*3>img^^^nav>ul>li>a{item de menu}*3

Enlaces adicionales

Pluggins y Snippets escenciales en Sublime Text

Como crear un pluggin en sublime text

El Flujo de trabajo perfecto en Sublime Text: Curso GRATIS!

Shortcuts Sublime Text: [ 1 ] [ 2 ]

BOOTSTRAP

Bootstrap es un framework que simplifica el proceso de creación de diseños web combinando CSS y JavaScript. Ha sido desarrollado por Twitter que recientemente liberó su versión 2.0. La mayor ventaja es que podemos crear interfaces que se adapten a los distintos navegadores (responsive design) apoyándonos en un framework potente con numerosos componentes webs que nos ahorrarán mucho esfuerzo y tiempo.

Descargar Bootstrap

Bootstrap en acción

1. Linkear CSS - Linkear JS - Jquery

Tipografía

Grid System

Images

Icons

Modal

Collapse

A practicar

Haga una composición libre con un tema especifico

- Lanzamiento de producto

- Evento especial (fiesta, concierto, premier)

- Promoción

Usando Bootstrap agregando clases en un CSS

para personalizar su diseño.

SNIPPET BOOTSTRAP

1. CMD + SHIFT + P

2. Buscar Snippet

3. Reiniciar ST

Probar.