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