Resumen: Git, position, iconfonts y responsive design

Sistema de control de versionesAntes:Ustedes tenían un FTP que contenía un hosting con un /public_html/ en donde colocaban los archivos y publicaban su contenido directamente para mostrarlo en su dominio.Esto tiene un problema. Si dos personas quieren trabajar en el mismo archivo, estarían encimando los avances de cada quien, complicándose innecesariamente. Por otro lado, si quieren regresar a una versión anterior del proyecto (por ejemplo, ver mi sitio web de hace una semana), la solución de crear muchas carpetas con fechas tampoco es viable.Con este tipo de necesidades, aparecieron los Sistemas de Control de Versiones. SVN (Subversion) y GIT fueron las más innovadoras e implementaron estas soluciones.El mundo evolucionó y apareció GitHub, un servicio de GIT en la web. Gracias a su simplicidad, agilidad y comunidad, nos enfocaremos en él plenamente.Para esto, es necesario que registren una cuenta en GitHub para poder tener todos sus superpoderes.Beneficios- Múltiples versiones del mismo código- Cambios delta Base de datos atómica del código. Es decir, guarda los bits o las líneas cambiadas en diferentes versiones.- Equipos de diseño y desarrollo trabajando sobre el mismo archivo.- Cada commit tiene una autoría (responsable).- Manejo de ramas o Branches: * Master (github.com) - Repo principal * Master (fukencio.com) - Repo local * Master (local) - Repo local * devpony (local) ---> merge ---> master (local)Te recomendamos el ejercicio de “Github en 15 minutos”: http://try.github.io/levels/1/challenges/1Recuerda seguir las lecturas de esta clase relacionadas a GitHub.Position- staticLo que hemos hecho toda la vida, tiene todos los márgenes y se comporta normal.- relativePermite mover la caja sin afectar el modelo de caja por medio de left, top, bottom, right.- absoluteLa caja resetea el modelo de caja, se pone en la posición 0,0 en el contenedor relativo más cercano.Tip: si no le colocas posiciones left, top, bottom, right a un position: relative, se comportara igual que un position: static.Viewport: Nombre técnico del tamaño del navegador.Íconos vectorialesIcomoon - icomoon.io/appEs una aplicación web que me permite escoger cierto tipo de iconos y bajarlos como una fuente.Lo mejor de todo es que son vectoriales, es decir, cero preocupaciones por Retina Display. Pueden ser usadas como una tipografía normal, así que debes decirle adiós a los “png” como iconos.Para aplicarlos, debes mover la carpeta “fonts” que descargaste a tu proyecto e importar las fuentes por medio del CSS como habíamos visto en lecturas pasadas.Para aplicar esta fuente, primero debemos llamarla y luego por medio del pseudo elemento “after”, colocaremos el icono:#contenido .up:after{ content: “\e001”; font-family: “icomoon”;}Y de forma mágica se aplicarán nuestros iconos.Responsive DesignEn el pasado nos acostumbramos a realizar dos páginas web.Si queríamos lanzar un proyecto web para todo el público, debíamos desarrollar un sitio exclusivo para desktops y otro para móviles. Esto ocasionaba duplicación de contenido en la web y tener un subdominio m.tudominio.com, por si deseabas entrar desde un móvil.Eso es el pasado, en donde el mundo era cruel e insensible con los desarrolladores y el diseño se pensaba “Pixel by Pixel” (te mandaban en fireworks un “layout” y debía quedar totalmente igual en la web, ni un pixel más, ni un pixel menos).Y es así como llega CSS3 junto a unos amigos llamados “media queries” y una filosofía de layouts fluidos al cual @leonidasesteban define como “responsivear”.Con esto, aparecen nuevos conceptos que debemos conocer para ejecutar la nueva tendencia de fluidez y elasticidad en sitios web llamada “Responsive Design”:Viewport: este lo utilizamos para que nuestra web tome como tamaño el tamaño del navegador, esto evitará que se pueda hacer zoom en navegadores y nos ayudará a que cuando entremos desde un móvil, los layouts fluidos se acomoden según la pantalla.Media Query: es la forma de hacer consultas sobre la resolución de pantalla en donde se esta mostrando la página, así podemos colocar propiedades específicas para cada pantalla y acomodar la experiencia de usuario a tal punto que sea lo más agradable para este.Para empezar a “responsivear” como diría @LeonidasEsteban:Primero debemos colocar la siguiente línea en el html de la pagina que debemos “responsivear”. La cual desactivará el “pinch to zoom” en móviles y el navegador tomará el tamaño del navegador.Luego de esto podemos crear nuestro archivo “Stylus” en donde tendremos el siguiente código:@media screen and (min-width:768px) #contenido #nota float right font-size 1em height auto width 20% #nota:hover height auto .item display inline-block vertical-align top width 30% .titulo_item a font-size 0.9em font-weight normal@media screen and (min-width:1280px) #contenido .item width 20%Para colocar propiedades a la pagina cuando este en tamaño de 768px colocamos el “@media screen and (min-weight: 768px)”.Todo lo que esté acá adentro se aplicará cuando la página adopte los 768px o mayor a este.Ahora vemos que hay un “@media screen and (min-weight: 1280px)”. Esto significa que, cuando el navegador tenga tamaño de 1280px, se cumplirá el contenido de ambos “media queries”.