Andrés Moreno Web Developer

Para que me sirva de guía en el presente, voy a crear esta guía para la instalación de un entorno de desarrollo de componentes en un ecosistema JavaScript. Para ello voy a necesitar:

• Servidor Node.js y npm
• Instalación de la librería React
• Instalación de storybook
• Creación de un proyecto
• Añadir la dependencia styled-components para la creación CSS

El objetivo de este entorno es la creación de componentes genéricos aislados, aprender más sobre este entorno y, aunque lo dudo, sería interesante crear una librería de componentes para proyectos futuros. Aunque, hay que decirlo, creo que tendrá poco recorrido ya que los primeros intentos casi siempre me salen rana.

Para realizar esta guía e instalación voy a usar una máquina normalita que tiene instalado un Ubuntu 16.04 LTS.

Lo leía el otro día en algún post o twitter, "Nos guste o no Internet Explorer tiene una cuota de mercado muy alta", y es cierto, sobretodo si sumamos los datos de todas las versiones. Bien, pues al trabajar con Ubuntu hasta ahora no podía comprobar el resultado de la web en los nuevos navegadores de la familia Microsoft. Pues esto se ha acabado desde hace un tiempo, ya que han puesto a disposición de todo el mundo y de forma gratuita máquinas virtuales con cada navegador y distintos sistemas operativos.

Bueno, aquí voy a explicar como instalar en Ubuntu las máquinas virtuales que proponen en Modern.IE. Nos servirá como herramientas de test Cross Browser para nuestros proyectos web. Aunque en su página viene bastante bien explicado yo voy a detallar los pasos que he seguido.

Instalar VirtualBox de Oracle

Lo primero es tener instalado este programa, ya que para las plataforma Linux solo nos podemos descargar las máquinas virtuales para este programa.

Para instalarlo pues lo más fácil es descargarlo desde el Centro de Software de Ubuntu. ¿Qué buscas y no está? pues nada, vamos a la página de VirtualBox y elegimos de la lista la que corresponda con nuestra distribución.

Otra forma es añadir a tu fichero /etc/apt/sources.list el recurso correspondiente. En mi caso como tengo una distribución algo antigua de Ubuntu pues sería esta:

Otro slideshow a petición de Gustavo en un comentario del blog en el que indica que sería interesante que tuviera controles. Pues bien, tal como le comenté me puse manos a la obra y, espero que sea de su agrado ya que este slideshow responsive tiene algo más de curro que el anterior. Eso si, este ya no es tan liviano como el anterior ni en Javascript ni en CSS.

Por cierto Gustavo, no he puesto las imágenes como background, aunque podrías hacerlo incluyendo por cada elemento una imagen en tu CSS aplicando un alto.

Está inspirado en el de unslider.com, con la peculiaridad de no usar framework o librerías externas tipo JQuery, Prototype, Mootoools, etc. Las características que tiene esta demo son similares a las que proporciona unslider.com:

Navegación:

• Por mousewheel del ratón
• Por teclado
• Por enlaces
• Táctil para el móvil

Responsive

Se adapta perfectamente al tamaño de la pantalla en el que se visualiza. Pruébalo reduciendo el tamaño del browser con el que estés visitando esta página.

Configurable

Con unas pocas líneas de CSS puedes configurar el ancho y/o alto máximo de la galería. Es importante tener conocimientos básicos sobre las hojas de estilo. Para ello puedes sobreescribir las propiedades CSS en tú hoja de estilos, o puedes descargar la librería y modificar el CSS a tú gusto.

¿Cómo usar este SLIDESHOW?

En primer lugar debes descargar la librería o enlazar la librería desde tú código copiando estas líneas entre las etiquetas del documento HTML:

En este artículo voy a exponer una serie de técnicas y recursos para facilitar el Cross Browsing. ¿Y qué es eso?, pues no es más que un "palabro" nuevo (bueno, ya no tanto) para definir a lo que se dedica un maquetador web (también leído en twitter como pintacajas), desarrollador web o, como nos gusta definirlo ahora, front-end developer. Consiste en que la web a desarrollar sea fiel al diseño e interacción en los distintos navegadores, y si es posible, en sus distintas versiones. Desde ya os puedo decir que esto es casi imposible, bueno, si descartas Internet Explorer 6 y 7 es más fácil, entonces, ¿qué hacemos? pues utilizar la mejora progresiva. Lo expuesto aquí también servirá para eso.

Volviendo al tema, una definición acertada sería la que hace Iván Mendoza en el artículo Cross Browsing y CSS3, de donde copio y pego la siguiente cita:

Cross Browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es válido para cualquier navegador.

El artículo tiene algo de tiempo, que no por eso está obsoleto, y además, el acierto en mencionar a Internet Explorer, que para eso es el navegador que dá más quebraderos de cabeza en esto del Cross Browsing, por lo menos en sus versiones más "castizas", y como podréis comprobar más adelante en este artículo. Algunos dirán que Internet Explorer 10 ya no es un IE como los de antes.

Reset CSS

Una técnica recomendadísima desde tiempos inmemorables. Yo la descubrí en los tiempos en los que la burbuja inmobiliaria estaba a puntito de estallar. Ampliamente usada por la comunidad, pero que los que empiezan y que aún no la han usado en sus desarrollos les recomiendo que lo hagan para los nuevas web.

¿En qué consiste? pues en resetear los estilos por defecto de cada navegador. Si amigos, cada navegador aplica un hoja de estilos, y además no es estándar para todos. Cada navegador usa una diferente. Por eso es tan común encontrarse que al aplicar reglas de diseño en CSS la web se vea diferente en los distintos navegadores (incluso versiones del mismo). Yo diría más, que sin aplicar reglas CSS, escribiendo él código HTML, también verás diferencias en distintos navegadores.

Un reset CSS que podemos aplicar como punto de partida es el propuesto por Eric Meyer (no olvidéis seguir por twitter a este "chaval") y que puedes ampliar según tus necesidades:

A raíz de un comentario en el blog dejado por Abigail en el artículo Slideshow sencillo con CSS3 y JavaScript he decidido mejorar el script usado en ese artículo. En el comentario escribe que "no es capaz de implementar dos (o más) slideshow en una misma página". Esto es debido a que el script usado está accediendo al DOM mediante el ID padre.

Tras recibir este comentario le propuse una solución, pero no me gustaba demasiado, me parece poco elegante esa solución, así que me puse manos a la obra para realizar las modificaciones necesarias en el script, html y css anteriores para que no hubiera problemas si quieres incluir varios slideshow en una misma página.

Como siempre me gusta dejar por adelantado el enlace a la demo. Múltiples slideshows con CSS y JS.

Si lo comparamos con el anterior son evidentes varias diferencias. La mayor de ellas, como he comentado anteriormente, es la forma de acceso al DOM, que ya no es por el atributo ID, sino por el CLASS de los elementos:

var elemento = document.getElementsByClassName('galeria');

Para ello echemos un vistazo a como he implementado el marcado en HTML:

<div class="galeria">
  <ul>
    <li class="selected"><img src="img/galeria_2/alba-rocker.jpg" alt="Dos rockeros muy rockeros" width="680" />li>
    <li class="noselected"><img src="img/galeria_2/andres.jpg" alt="Un chico muy mosqueado" width="680"/>li>
    <li class="noselected"><img src="img/galeria_2/cafe.jpg" alt="La palabra café en una nevera" width="680"/>li>
    <li class="noselected"><img src="img/galeria_2/manifestacion.jpg" alt="Chica en la puerta del sol" width="680"/>li>		
  </ul>
</div>