Download - Curso Frontend Parte 2
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 1
CURSO FRONTEND
1. REQUERIMIENTOS
Sublime text 2 - http://www.sublimetext.com/2
o Instalar Package Control - https://packagecontrol.io/installation#st2 (View>Show
Console)
o Install Package (Crtl+Shiift+p) Instalar Emmet
o HTML5
o Stylus
NodeJS - https://nodejs.org/en/
o En una terminal (Win+R>CMD), npm install stylus -g
Stylus-> Verificar en consola poner – stylus –V
2. TERMINOS
2.1. HTML5: Es la quinta revisión más importante que se hace al lenguaje HTML. En esta versión,
se introducen nuevas características para ayudar a los autores de aplicaciones Web, y se ha
prestado especial atención a la definición de claros criterios de conformidad para los agentes
de usuario (navegadores) en un esfuerzo por mejorar la interoperabilidad.
2.2. CSS3: hojas de estilo en cascada (en inglés Cascading Style Sheets) es un lenguaje usado para
definir la presentación de un documento estructurado escrito en HTML. El W3C (World Wide
Web Consortium) es el encargado de formular la especificación de las hojas de estilo que
servirán de estándar para los agentes de usuario o navegadores.
2.3. NODEJS: Es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la
capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación
ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventosy basado en
el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de
red altamente escalables, como por ejemplo, servidores web
2.4. PRE-PROCESADOR CSS: Son herramientas indispensables que nos ayudan a optimizar y
administrar fácilmente nuestro código CSS. Con estas herramientas podemos realizar nuestro
trabajo de una manera más ordenada y más rápida, ahorrando tiempo y dando mejores
resultados.
En la internet existen varios pre-procesadores de código css, los más conocidos son:
Sass
Less
Stylus
2.5. STYLUS: Es un nuevo lenguaje revolucionario, proporcionando
una forma eficiente, dinámica y expresiva para generar CSS.
Soporta tanto una sintaxis con sangría y estilo normal CSS.
2.6. FRONTEND: son todas aquellas tecnologías que corren del lado
del cliente, es decir, todas aquellas tecnologías que corren del
lado del navegador web, generalizándose mas que nada en tres
lenguajes, Html , CSS Y JavaScript, la persona encargada del
frontend, se dedica solo a estas tres tecnologías.
2.7. BACKEND: El programador backend es aquel que se encuentra del lado del servidor, es decir,
esta persona se encarga de lenguajes como PHP, Python, .Net, Java, etc, es aquel que se
encarga de interactuar con bases de datos, verificar manejos de sesiones de usuarios, montar
la página en un servidor, y desde este “servir” todas las vistas que el FrontEnd
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 2
2.8. WEB SEMANTICA: Es la nueva generación de la Web, que intenta realizar un filtrado
automático preciso de la información. Para ello, es necesario hacer que la información que
reside en la Web sea entendible por las propias máquinas. Especialmente su contenido, más
allá de su simple estructura sintáctica.
2.9. MOBILE FIRST: Se trata de comenzar un proyecto de diseño por la pantalla más pequeña e ir
adaptándolo posteriormente a las más grandes. De esta forma lo que conseguimos es
centrarnos en lo más importante, aquello imprescindible para la web de acuerdo a los
objetivos que tenga, que se verá reflejado en la web mobile. Y así, al diseñar las webs del resto
de dispositivos, no habrá más que aumentar el tamaño de los elementos e incorporar otros,
si es necesario, conforme vaya creciendo el tamaño de la pantalla con la que se esté
trabajando.
2.10. BOILERPLATE: Reúne un paquete de plantillas en css y html, un par de documentos en
JavaScript, un .txt y un .htaccess , también se les ocurrió que debían hacer que cuando el
usuario entrara a usarlo pudiera tener optimización para buscadores y compatibilidad con
navegadores viejos y así tener un resultado profesional en pocos minutos.
2.11. 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.
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 3
3. MAQUETADO WEB
Hasta hace poco la maquetación de una pagina web se hacía mediante tablas html. Actualmente
la maquetación se realiza con hojas de estilo en cascada (css), separando completamente el
contenido del archivo html de las definiciones de estilo que se guardarán en un archivo .css externo
que es enlazado por los documentos html del sitio web.
css puede ahorrar mucho tiempo de trabajo. Para cambiar, por ejemplo, el color de fondo de un
sitio web compuesto por 500 páginas, con css bastaría una pequeña modificación en la hoja de
estilo. Sin css habría que cambiar de forma manual los 500 documentos html.
El archivo css es cargado por los navegadores en el caché con lo que disminuye el tiempo de
respuesta.
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 4
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 5
4. RESOLUCION DE PANTALLAS DE CELULARES
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 6
TELEFONO SISTEMA
OPERATIVO
MEDIDA
PANTALLA ANCHO/ALTO PPI
DENSIDAD DE
PIXELES
iPhone 4 (4, 4S) iOS 3.5 640 x 960 326 200% HDPI
Samsung Galaxy S III Android 4.8 720 x 1280 306 250% XHDPI
iPhone 5 iOS 4.0 640 x 1136 326 200% HDPI
BlackBerry Curve
9320 BlackBerry 2.44 320 x 240 164
Nokia Asha Nokia Asha 3 320 x 240
Galaxy S4 Android 5 1920 x 1080 441 300% XXHDPI
Samsung Galaxy Ace Android v2.3 3.5 320 x 480 165
Samsung Metro Duos
C3322 2.2 240 x 320 182
LG Optimus L5 Android v4.0 4 320 x 480 144
Samsung Galaxy S II Android 4.3 480 x 800 219 150% HDPI
Samsung Galaxy Y Android v2.3 3 240 x 320 133
Nokia Lumia 520 Windows Phone 8 4 480 x 800 233 150% HDPI
Alcatel One Touch
T'Po Android 4.7 720 x 1280
Samsung Galaxy
Fame 3.5 320 x 480 165
LG Optimus L9 Android v4.0 4.7 540 x 960 234
LG Optimus L3 3.2 240 x 320 125
Nokia Lumia 710 Windows Phone 3.7 480 x 800 252 150% HDPI
LG Motion 4G 4.5 320 x 480 165
Motorola RAZR D3 Android v4.1 4.0 480 x 800 233 150% HDPI
Motorola Razr D1 Android v4.1 3.5 320 x 480 165 150% HDPI
Samsung Galaxy
Note II Android 5.5 720 x 1280 267 200% XXHDPI
Google Nexus 4 by
LG Android 4.7 768 x 1280 320 200% HDPI
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 7
Galaxy Nexus Android 4.6 720 x 1280 316 250% XHDPI
LG Optimus L7X Android v4.1 4.3 480 x 800
Alcatel One Touch
M'Po Android 4.7 720 x 1280
Nokia Lumia 505 Windows Phone
7.8 3.7 480 x 800 252 150% HDPI
SonyEricsson Xperia
Arc HD Android v2.3 4.2 480 x 854 233
Sony Xperia E Android v4.1 3.5 320 x 480 165
Alcatel S-POP Android v4.1 3.5 320 x 480 165
Huawei Ascend Y 300 Android v4.1 4.0 480 x 800 233
BlackBerry 8520
Curve BlackBerry 2.46 320 x 240 163
Motorola XT890
RAZR i Android v4.0 4.3 540 x 960 256
Galaxy S Android 4.0 480 x 800 233 100% MDPI
Google Nexus 5 Android 4.4 5 1920 x 1080 441 300% XXHDPI
Samsung Galaxy
Note III Android 4.3 5.7 1920 x 1080 386
5. EL MOCKUP
un mockup, mock-up, o maqueta es un modelo a escala o tamaño real de un diseño o un
dispositivo, utilizado para la demostración, evaluación del diseño, promoción, y para otros fines.
Un mockup es un prototipo si proporciona al menos una parte de la funcionalidad de un sistema y
permite pruebas del diseño
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 8
6. LAS UNIDADES Y MEDIDAS EN CSS
1. Unidades Absolutas 2. Unidades Relativas Vamos a profundizar en estos dos grupos para conocer las medidas que los componen: Unidades absolutas Como su nombre lo indica, son unidades que están completamente definidas. Esto quiere decir que su valor no depende de otro valor de referencia. En este grupo encontramos los siguientes elementos: cm: Aumenta el tamaño de nuestro texto o elemento en centímetros mm: Aumenta el tamaño de nuestro texto o elemento en milímetros in: Aumenta el tamaño de nuestro texto o elemento en pulgadas (1in = 96px = 2.54cm) px: Aumenta el tamaño de nuestro texto en pixeles (Dependiendo del dispositivo, este
elemento se clasifica también en Unidades Relativas. Aunque también depende de la versión de CSS que se maneje)
pt: Aumenta el tamaño de nuestro texto en puntos (1pt = 1/72 de 1in) pc: Aumenta el tamaño de nuestro texto en picas (1pc = 12 puntos aprox) Ya que el pixel es una de las unidades absolutas más utilizadas, realizaremos un ejemplo:
CSS:
h1 {font-size: 50px;}
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 9
HTML:
<h1>Medidas en CSS3</h1>
RESULTADO:
Unidades relativas Este tipo de unidad es más flexible y se expresa en forma de porcentaje (%). Me refiero a su flexibilidad porque se adapta de acuerdo al tamaño de otro valor de referencia. Por ejemplo, en el mundo real tu hermano y tú tienen dos balones de futbol. Un balón es grande y el otro es pequeño, pero a cada uno le corresponde la mitad de cada uno de esos balones (50%). No importa el tamaño del balón, porque igual siempre vas a ser dueño del 50%. Entonces, si el balón grande redujera su tamaño, igual tendrías el 50% de este. Ahora aplica este ejemplo a los distintos tipos de resolución de pantalla. Ahora bien, las unidades relativas se subdividen en 2 grupos: 1. Relativas a la tipografía 2. Relativas al viewport
Relativas a la tipografía
em: Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em (font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que se esté utilizando por defecto.
ex: Aumenta el tamaño de mi letra en cuanto a su altura. Rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, en la letra que esté
utilizando por defecto. Relativas al viewport – ventana
vw: Porcentaje relativo a la anchura del viewport. vh: Porcentaje relativo a la altura del viewport. vmin: Entre vw y vh toma el que tenga menor valor. vmax: Entre vw y vh toma el que tenga mayor valor
Las unidades relativas al viewport son muy importantes y se deben tomar en cuenta cuando realizamos una web para varios tipos de resolución de pantalla. Combinando esta serie de medidas con otros elementos que podemos agregar a nuestra sintaxis conseguiremos realizar un excelente trabajo.
Ejercicios
http://www.arkaitzgarro.com/css3/capitulo-13.html
7. ICON FONTS
Uno de los recursos que usamos todos los desarrolladores para darle un poco de vistosidad a un
sitio web son los iconos. Existen innumerables paquetes de iconos que pueden dar un toque ideal
a tus trabajos. Sobre todo nos resultan útiles a los que somos más orientados a la programación y
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 10
no tan creativos. Si me pidieran diseñar un icono, seguro que tardaría un buen rato y no me
quedaría ni la mitad de bien de lo que se encuentra por ahí.
Seguro que en este sentido habrás buscado y usado decenas o cientos de packs con iconos en tus
sitios y estarás familiarizado mayoritariamente con el uso de iconos mediante imágenes.
Personalmente ya había oído hablar varias veces de las ventajas de usar fuentes tipográficas para
mostrar los iconos en sitios web (en inglés se conoce como "icon fonts") y en principio parecía
sonar bien.
Los iconos por fuentes se implementan por medio de una tipografía especial, en la que en lugar de
caracteres que representan letras tenemos caracteres que representan imágenes de diversas
cosas. Seguro que ya has visto esos iconos en algún programa de diseño, pues siempre por defecto
en los ordenadores tenemos alguna de esas fuentes con iconos (aunque las que sueles tener
inicialmente te producen iconos un tanto feos).
En resumen, para usar los icon-fonts, en lugar de colocar un icono con una etiqueta IMG (o
cualquier otra etiqueta añadiendo un background de imagen con CSS), colocarás un elemento
cualquiera con un texto e indicarás que la fuente de ese elemento, que será tu tipografía
con el juego de iconos deseados.
Ventajas de los iconos por medio de tipografías
Lo más interesante de estos iconos no es que sean bonitos o feos, más o menos variados, sino el
modo en el que nuestro flujo de trabajo resulta mucho más sencillo y ágil. Veamos algunas de las
ventajas que deberían animarte a usar fuentes para tus iconos.
Evitar solicitudes al servidor
Generalmente los iconos por medio de imagen vienen en imágenes sueltas y para cada icono tienes
que hacer una solicitud al servidor para traerte la imagen. Sabemos que las solicitudes HTTP en
exceso es uno de los motivos por los que se ralentiza la carga de una página. Las fuentes van en un
único archivo (el de la tipografía que cargas con CSS para tener soporte a esos iconos).
Evitar el uso de sprites
Generalmente usamos sprites CSS cuando queremos tener varios iconos en un sitio web, de modo
que todos tus iconos están en una única imagen gráfica. Así, aunque tengas decenas de iconos,
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 11
solo realizas una única solicitud al servidor para cargar todos los sprites. Esto está genial, solo que
la creación de los sprites es laboriosa, así como su implementación. Las fuentes ya tienen
"paquetizados" esos iconos, con lo que no necesitas gastar tu tiempo en hacer sprites.
Ampliar / reducir los iconos
Tus iconos en una imagen tienen un tamaño fijo. Si quieres que el icono sea mayor en una parte
de la web y menor en otra, o si quieres que el tamaño de los iconos se adapte al tamaño de la
pantalla del usuario (lo que se conoce como "responsive"), tienes que usar preferentemente dos
o más imágenes distintas. Esto amplia la carga de la página y también tu trabajo para preparar
iconos en varios tamaños. Las fuentes tipográficas son vectoriales, por lo que se pueden agrandar
o reducir en su tamaño sin que pierdan calidad. Los iconos se pueden cambiar de tamaño con los
atributos de CSS font-size, por lo que con una única fuente tendrás iconos de infinitos tamaños.
Además, el tamaño de tus iconos se adaptará al tamaño de tu texto, sin que tengas que hacer
nada.
Cambiar el color
Si quieres hacer variaciones de tus iconos, como cambios de color para usar en partes distintas de
la página o secciones del sitio web también te ayudan las fuentes de iconos. Si usases imágenes,
lo más normal es que te creases varias imágenes para cada una de esas variaciones del icono que
necesitas. Con icon fonts podrás cambiar el color simplemente con el atributo "color" de CSS,
asignando el RGB que necesites en cada lugar.
Agregar sombras u otros estilos CSS
Con text-shadow podemos agregar una sombra a un icono, de cualquier color y forma y crear
diversos efectos que sería posible con imágenes solo a través de la creación de nuevas imágenes.
Pero habría otros efectos CSS como resplandor, trazo, tachado, grosor, etc. que también serías
capaz de implementar simplemente cambiando tus CSS.
Cambiar radicalmente de iconos
Si un día quieres cambiar de iconos radicalmente, aunque no es tan habitual, podría hacerse
posible solo con cambiar la tipografía de tus iconos y automáticamente cambiaría el aspecto de
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 12
todos los iconos de tu sitio. Imagina si los tuviéras en imágenes, con sprites. En ese caso sería
posible cambiarlos solo con alterar tus CSS, pero te obligaría a genera de nuevo tus sprites.
Desventajas de las fuentes de iconos
Como todo en la vida, aunque algo nos solucione la vida, no podemos dejar de mirar algunas
desventajas.
Iconos monocromáticos
Al ser fuentes, todo el icono tiene el mismo color. Es cierto que con CSS puedes cambiarlo y a veces
será blanco y otras negro, o azul, pero todo el icono tendrá el mismo color. Por ejemplo en un
icono con forma de flor no podrás tener los pétalos de un color mientras que el cáliz o pistilo de
otro. Osea, los iconos de imágenes siempre podrán tener otro tipo de detalles que los hagan más
espectaculares. Si queremos trabajar con varios colores en los iconos de fuentes lo podemos
conseguir con sombras, por ejemplo, pero al final siempre van a tener una silueta de un único
color.
Iconos iguales en todos los sitios web
Paquetes de iconos con imágenes hay miles, por lo que se hace fácil ser originales. Fuentes con
iconos, por lo menos de momento, no hay tantas, por lo que tus iconos pueden ser los mismos que
otros cientos de sitios que visitas.
Recursos para trabajo con fuentes de icono
Aquí quiero destacar un par de sitios que he usado para fuentes de iconos y que están
evolucionando mucho, para dar soporte a más iconos y más usos.
Font-Awesome: http://fortawesome.github.io/Font-Awesome/
Como su nombre indica, es un asombroso conjunto de iconos, que nos viene a través de una
tipografía. Pero yo más bien diría que es un framework completo para implementar iconos. Te
ofrecen más de 400 iconos y una serie de CSS ya listos para que los puedas incorporar. Los estilos
están pensados para que los puedas usar directamente sobre textos, listas, botones… y para
realizar algunas implementaciones más revolucionarias como apilar iconos, unos encima de otros,
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 13
para producir nuevos iconos compuestos. Es genial, te recomiendo probarlo, pues en minutos te
adaptas a usarlos en un sitio web y te ahorran horas de retoques.
IcoMoon: https://icomoon.io/
Es más bien un conjunto de herramientas para implementar iconos por medio de fuentes. También
es muy recomendable, sobre todo porque tienes disponibles varios paquetes de iconos, por lo que
anulas el inconveniente de usar los mismos gráficos que otros sitios. Incluso puedes personalizar
tu tipografía para que solo incluya aquellos iconos que vas a usar, lo que supone una optimización
importante sin que tengas casi trabajo.
Bootstrap: http://getbootstrap.com/
El propio Bootstrap usa una librería llamada GLYPHICONS http://glyphicons.com/ para proveer de
un paquete de iconos ya listos para usar. Además de cientos de clases y de modelos para
implementar iconos en distintas interfaces gráficas.
8. MEDIA QUERIES
Los media queries son la herramienta más poderosa para hacer esto. Tomemos la estructura
donde usamos porcentajes y transformémosla en una columna cuando la ventana del navegador
es muy pequeña para mantener el menú en la barra lateral:
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 14
Ahora, nuestra estructura se ve increible en dispositivos móviles.
inline-block
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 15
Puedes crear una cuadrícula de cajas que llene el navegador armoniosamente. Esto ha sido posible por
mucho tiempo usando float, pero ahora con inline-block es aún más fácil. Veamos ejemplos con las
dos opciones.
El método difícil (usando float)
Tamaño 1014px
Tamaño 800px
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 16
Tamaño a 500px
El método fácil (usando inline-block)
Puedes logar el mismo efecto usando display: inline-block;
columna
Hay un nuevo set de propiedades CSS que te permiten tener múltiples columnas de texto. Echa un
vistazo:
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 17
frameworks para css
Debido a que las estructuras con CSS son complicadas, Hay frameworks que te ayudan a hacerlo fácil.
Aqui hay unos cuantos por si gustas echarles un vistazo. Usar un framework es solo una buena idea si
hace lo que quieres que tu sitio haga. No son un sustituto para saber como funciona el CSS.
www.juliacaSoft.com
Ing. Angel Rosendo Condori Coaquira 18
9. BOOTSTRAP