CSS3

Que es ser un Front End?

Nadie logra lo que quiere rindiendose
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Que es ser un Front End?, Como ser un Ninja Front End? Y como llegar a ser el mejor Front End?

Son preguntas que al inicio de todo nos hemos preguntamos en algún punto. Si tú al igual que yo te apasiona la web quédate a leer esto te interesará.

La pasión nos conlleva a realizar muchas cosas como por ejemplo dejar de lado unas para hacer otras quizás nuevas o centrarse en una. Esto nos trae la búsqueda de la perfección y la dualidad cognitiva pues como empezó muchos terminan, rápido y fugaz. Ya que luego de un tiempo te pasara que has aprendido mucho y aun te falta mucho más, aunque tratas y pasa el tiempo sigue ocurriendo el mismo escenario pues cuando piensas alcanzar la meta esta se aleja hasta dejarte a una distancia aproximada al punto inicial. La dualidad cognitiva nos llevara a la decepción, percepción equivoca de que perdimos el tiempo y debimos hacer otra cosa, renegaremos, algunos lloraran y otro más locos se reirán de ya no saber qué hacer.

En todos estos escenarios el individuo ha perdido el porqué de que iniciara esto “La Pasión”.

Al parecer la pasión como todo se acaba y ellos perdieron el punto de enfoque y se estancaran, pero tú no, porque? Pues simple, estás leyendo esto.

 

Un Front End apasionado nunca vera un reto como reto sino como una nueva forma de andar, nunca caerá solo tropezará y nada será tan alto pues con algunos trucos y funciones se creara una cascada de ideas que juntas aran el escalón para pasar tal altitud.

Tu que estas desarrollando nunca olvides que esto al igual que tu primer amor inició con pasión y ella no te dejara sino tu a ella a la medidas que la cosa se ponga difícil.

Recuerda la adversidad no está para que te rindas sino para medir tu fortaleza y tus ganas de superarlas, Murieron las tablas y pasamos a div con floats, pues genial; Murió el float paso a display, pues grandioso; muere display empezamos las grillas, valla valla se mesclaron y salió mejor aún; se modifica y nace Flex, nunca te rindas pues a la medida que lo hagas serás uno de los que perdieron o vivieron seguir viviendo con su pasión.

 

Nunca dejes de leer lo que te gusta, no dejes de informarte y recuerda nunca se sabe todo.

Te dejo unos links de ayuda para tu evolución a un Front End o un Ninja Front End o mejor aún el Mejor Front End.

 

http://tympanus.net/codrops/css_reference/

http://tympanus.net/codrops/collective/

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Comenzar con el pre procesador LESS

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

LESS es un pre procesador dinámico de css que nos permite programar  en  CSS con variables, funciones, operaciones matemáticas, etc asi haciendo mas interesante el desarrollo para los front end.

LESS no es el único pre procesador que podemos usar ahi tenemos a  Stylus y SASS que tambien estan buenos pero por que mi preferencia a LESS?  es por que  tiene una sintaxis muy parecida a CSS y la escala de aprendizaje es casi nula.

para comenzar primero nos vamos a la web de LESS http://lesscss.org/ o podemos usar una CDN //cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js agregamos el javascript en el pie del html (lo pueden hacer en la cabecera pero no lo recomiendo por no ser una buena practica).

ahora cuando agregue un css debe colocar de esta forma

<link rel=”stylesheet” type=”text/less” href=”css/main.css”>

si se dan cuenta cambie solo el type  que ya no es “text/css” si no “text/less” esto sirve para que el javascript sepa en que archivo efectuar el proceso y otro detalle que el archivo que llamamos en el href puede tener la extension de css o less.

ahora en nuestro archivo externo que incluimos podemos ya programar.

creamos una variable indicando una fuente y para mostrar solo lo colocamos en donde queremos que se muestr

@fuentebase:'HELVETICA';
 
body{
font-family:@fuentebase;
}

Creamos una funcion (Mixins) que nos permitira ahorrar lineas de codigos para usr el font face, las funciones como en todo lenguaje de programacion nos permite enviar variables y en este caso nuestra funcion tiene 2 variables el nombre que le asignamos a la fuente para ser llamada y el nombre del archivo que tiene la fuente en todos sus formatos.
para concatenar una variable con un string el nombre de la variable debe estar entre corchetes {} y el @ que simboliza que es variable fue de los corchetes.

/*creamos una funcion y pedimos 2 variables*/
.font-face(@nombrefuente,@nombrearchivo) {
	font-family: @nombrefuente;
	src: url('../fonts/@{nombrearchivo}.eot');
	src: local('?'), url('../fonts/@{nombrearchivo}.woff') format('woff'), url('../fonts/@{nombrearchivo}.ttf') format('truetype'), url('../fonts/@{nombrearchivo}.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
/*aqui solo llamamos a la funcion mandando las variables*/
@font-face {
	.font-face('HELVETICA','HELVET')
}
@font-face {
	.font-face('Dakota Regular','Dakota_Regular')
}

anidar elementos que su nombre lo describe perfectamente pero con un ejemplo lo tendrán mas claro

section{
    width: 1024px;
    height: 768px;
    input{font-family:@fuentebase;}
    .nube{ position: absolute;}
}

como se ven incluimos dentro de section a los otros elementos que cuando lo procese less nos da como resultado

section{
    width: 1024px;
    height: 768px;
}
section input{font-family:@fuentebase;}
section .nube{ position: absolute;}

para crear un hover u otro estado del elemento lo hacemos de esta manera

a{
	text-decoration: none;
 
	&amp;:hover{
		text-decoration: underline;
	}
}

less por defecto esta configurado para estar para desarrollo pero cuando subamos en linea debemos indicar a less que ya estamos en producción y para esto debemos incluir este script antes del llamado al less.js.

// puede ser development y production
    less = {
        env: "production"
    };

y para que sirve?
si tu archivo less tiene un error

error-less

nos muestra esto e imagínate que el usuario vea esto? no es nada profesional entonces debemos configurar cuando esta en linea que esto este en producción y las lineas de arriba sirven para eso.

Ahora ahi un detalle que seguro varios ya se dieron cuenta que hacemos lenta la carga de la web por el proceso de generar entonces pueden usar Winless un software que le das la ruta de tu archivo less y te genera el css y por cada cambio este programa lo actualiza.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Prefijos en CSS3 SOLUCION

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Un problema al momento de maquetar es crear css  todos los prefijos para que sea soportado por todos los navegadores ya que cada navegador tiene su prefijo nativo.

-ms- Internet Explorer
-Moz- Firefox, Flock, K-Meleon, Camino, Galeon y otros.
-webkit- Safari, Google Chrome y otros.
-o- Opera

 

 

 

Tener estos prefijos hacen que tengamos un css muy largo y ademas que nos hace perder tiempo tampoco es dificil usarlas por ejemplo:

Queremos usar bordes con sombra:
esto es lo normal:

box-shadow:#fbd607 0px 0px 9px 4px;

Asi debemos hacer:

-ms-box-shadow:#fbd607 0px 0px 9px 4px;
-moz-box-shadow:#fbd607 0px 0px 9px 4px;
-webkit-box-shadow:#fbd607 0px 0px 9px 4px;
-o-box-shadow:#fbd607 0px 0px 9px 4px;

Ven que no es dificil?

Solucion de prefijos CSS3

  • Existe esta opcion cssprefixer  donde colocamos nuestro css normal sin necesidad del prefijo y al convertir nos crea todos los prefijos.

 

 

  • Esta es la mas practica y la que recomiendo ya que lo uso, -prefix-free  es un proyecto de Eric Meyer que es tan simple que nos descargamos un javascript que agregamos a nuestro pagina y automaticamente hace la magia!

 

 

 

 

 

  • CSS3 PIE es un archivo con extencion .htc  que nos sirve para hacer que Internet explorer desde su version 6 hasta 9 soportar CSS3 si es que nos toca un cliente que quiere que funcione en todos los navegadores pero hay que hacer que ver que se puede estar dejando de hacer cosas mas interesantes por estar dando soporte por que igual este metodo no soporta todo lo nuevo del css3

 

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more