[Resumen] Introduccion a Frontend
En este caso crearemos una aplicación que llamaremos PULS3 la cual a partir de páginas web como Hacker News, Reddit, Stack overflow y quora publicará noticias importantes y se podrán votar por cada usuario y elegir como favorito, será una mega comunidad que con las mejores noticias nos mantendremos informados de todo lo que pasa.HTML5
Primero que todo Freddy inicia explicándonos la estructura inicial de un documento de HTML5 en donde primero debemos colocar el doctype de la siguiente manera<!DOCTYPE html>Luego el Head en donde tendremos las siguientes líneas
<meta charset=”utf-8” />
<title> Puls3: Comunidad online de LOLs y XDs </title>
Recuerda que las etiquetas con contenido vacío se cierran con un espacio y un />, ahora podemos agregar el body y cerrar el html, esta es la estructura general de HTML5, ahora existen plugins de sublime text como EMMET que sirven para crear HTML5 mucho más rápido pero esto vuelve perezoso al maquetador y causa problemas con sistemas de plantillas como swig y jade << no te asustes luego los veremos >>.
Initializr
En este caso usaremos initializr para crear nuestra app PULS3 nos basaremos en initializr el cual nos permite descargar un grupo de archivos con unas preferencias definidas, en este caso usaremos la versión responsive ya que queremos hacer una app mobile first en donde la experiencia de usuario en móviles será la mejor y luego nos fijaremos en desktop.
Las preferencias de responsive deberán quedar así para la descarga.
Primero decimos que no queremos ningún template ya que nosotros lo crearemos con el mockup que les presentare mas adelante, luego pedimos que se use modernizr el cual nos servirá para que todo lo de HTML5 nos sirva en navegadores viejos por medio de magia negra que nos salva de dolores de cabeza como ese aliado oscuro llamado IE6, luego le decimos que jquery este minificado lo cual significa que todo el codigo este en una sola línea lo cual hace que nuestro archivo sea mucho más ligero y agilice la carga del mismo, luego pedimos a Chrome Frame que se encarga de que si un usuario tiene chrome en su pc y usa IE aparezca un anuncio grande diciendo WHY YOU DON’T USE CHROME y te abra tu página en un frame con webkit, luego usamos el favicon que es el que aparece en favoritos y procedemos a la descarga.
Cuando hayas descargado esto procedemos a ver la aplicación que deseamos crear.
En tus archivos descargados veras 3 carpetas, la primera JS en donde se aloja todos los JavaScript, la segunda CSS todos los css y por ultimo IMG donde están todas las imágenes.
Mockup
Un mockup es una vista previa a la aplicación y nos servirá de guía al momento de empezar a trabajar, en este caso será el siguiente:
Etiquetas que debes conocer
Esta se encargara de hacer la magia del Chrome Frame<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Esta se encargara de añadir la descripción de mi pagina y es tomada por los resultado de google (no pasar de los 140 caracteres)
<meta name="description" content="Puls3 es una comunidad de LOLs y XDs, dedicada al trolleo profesional y a la enseñanza de frontend." />
Esta etiqueta hace que se tome el tamaño de la pantalla como tamaño de fram y se cancela el zoom en móviles, prácticamente activa el Responsive Design
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Esta etiqueta traerá a normalize.css, y quiero hacer una pausa aquí, Normalmente los navegadores tienen tamaños de fuentes, margins, paddings, etc. predefinidos para cada etiqueta, pero esto no es un estándar entre navegadores lo cual causa un dolor de cabeza a los desarrolladores, así que normalize se encarga de normalizar todas las medidas para que sea más fácil desarrollar, lo debes descargar de de aquí.
<link rel="stylesheet" href="css/normalize.min.css" />
Traemos nuestra hoja de estilos propia
<link rel="stylesheet" href="estilos.css">
Y por último agregaremos a modernizr
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
A lo ultimo del documento antes de cerrar el body llamamos a nuestro archivo de js en donde colocaremos la usabilidad de la app:
<script src="js/main.js"></script>
Empecemos
Después de esto lo que hacemos es crear la estructura de nuestra aplicación la cual usará un HTML5 básico con semántica, la cual puedes entender mejor en las lecturas de tu Timeline en las que profundizamos en el tema.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Puls3: Comunidad online de LOLs y XDs</title>
<meta name="description"
content="Puls3 es una comunidad de LOLs y XDs, dedicada al trolleo profesional y a la enseñanza de frontend." />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="estilos.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<header>
<figure id="logo">
<img src="logo.png" alt="Puls3"
title="Puls3" />
</figure>
<div id="titulo_nav">
<h1>Comunidad de LOLs y XDs</h1>
<nav>
<a href="#">Home</a>
</nav>
</div>
<figure id="avatar">
<a href="#">
<img src="avatar.jpg" alt="freddier"
title="freddier" />
</a>
</figure>
</header>
<section id="contenido">
<article class="item">
<div class="votos">
<div><a href="#" class="up">Up</a></div>
<div class="puntos">1384</div>
<div><a href="#" class="down">Down</a></div>
</div>
<h2 class="titulo_item">
<a href="#">Titulo 1 de la noticia a leer
<figure>
<img src="foto.jpg" />
</figure>
</a>
</h2>
<div class="autor">
<p>
enviado por <a href="#">freddier</a>
</p>
<p class="tag">gaming</p>
</div>
</article>
<article class="item">
<div class="votos">
<div><a href="#" class="up">Up</a></div>
<div class="puntos">1384</div>
<div><a href="#" class="down">Down</a></div>
</div>
<h2 class="titulo_item">
<a href="#">Titulo 1 de la noticia a leer
<figure>
<img src="foto.jpg" />
</figure>
</a>
</h2>
<div class="autor">
<p>
enviado por <a href="#">freddier</a>
</p>
<p class="tag">gaming</p>
</div>
</article>
<article class="item">
<div class="votos">
<div><a href="#" class="up">Up</a></div>
<div class="puntos">1384</div>
<div><a href="#" class="down">Down</a></div>
</div>
<h2 class="titulo_item">
<a href="#">Titulo 1 de la noticia a leer
<figure>
<img src="foto.jpg" />
</figure>
</a>
</h2>
<div class="autor">
<p>
enviado por <a href="#">freddier</a>
</p>
<p class="tag">gaming</p>
</div>
</article>
<article class="item">
<div class="votos">
<div><a href="#" class="up">Up</a></div>
<div class="puntos">1384</div>
<div><a href="#" class="down">Down</a></div>
</div>
<h2 class="titulo_item">
<a href="#">Titulo 1 de la noticia a leer
<figure>
<img src="foto.jpg" />
</figure>
</a>
</h2>
<div class="autor">
<p>
enviado por <a href="#">freddier</a>
</p>
<p class="tag">gaming</p>
</div>
</article>
<article class="item">
<div class="votos">
<div><a href="#" class="up">Up</a></div>
<div class="puntos">1384</div>
<div><a href="#" class="down">Down</a></div>
</div>
<h2 class="titulo_item">
<a href="#">Titulo 1 de la noticia a leer
<figure>
<img src="foto.jpg" />
</figure>
</a>
</h2>
<div class="autor">
<p>
enviado por <a href="#">freddier</a>
</p>
<p class="tag">gaming</p>
</div>
</article>
</section>
<script src="js/main.js"></script>
</body>
</html>
Después de esto creamos el archivo de stylus el cual definirá nuestros estilos, si no entiendes stylus recuerda leer la lectura de stylus en tu timeline donde te indicamos cómo instalarlo y empezar a usar.
a
color #00F
a:visited
color #00D
body
color #333
font-family "Arial"
font-size 16px
text-align left
header
background #222
border-bottom 3px solid #0AF
color #DDD
margin 0
padding 0.5em
position fixed
width 100%
img
width 100%
h1
font-size 20px
font-weight normal
margin 0
padding 0
#avatar, #logo, #titulo_nav
display inline-block
vertical-align top
#avatar, #logo
height 40px
width 40px
#avatar a
background #444
display block
margin 0
padding 3px
text-decoration none
#titulo_nav
width 70%
nav a
color white
border-bottom 4px solid #0AF
border-left 1px solid #0AF
border-right 1px solid #0AF
font-size 0.8em
padding 0.1em 1em
text-decoration none
nav a:hover
border-color white
#contenido
padding 4em 0.5em
.item
border 2px solid #DDD
border-radius 0.5em
height 4em
margin 0.5em 0 0 0
padding 0.5em
h2
font-size 16px
margin 0
padding 0
.autor
font-size 0.7em
margin -3em 0 0 15%
p
display inline
.titulo_item, .votos
display inline-block
vertical-align top
.titulo_item
width 80%
figure
float right
.votos
text-align center
width 14%
Diseño Retina Display
Si has escuchado de retina display puedes saber que cada pixel en retina son 4 pixeles lo cual causa que las imágenes se vean horrendas, esto lo puedes solucionar doblando la resolución de tu imagen y por css ajustarla al tamaño necesario, recuerda que debes guardarla a PNG 8 con canales alpha la cual te da una imagen bonita y no muy pesada.Repositorio de Clase