Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Instalar modern.IE en Ubuntu - Herramientas Cross Browser

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.

Imagen de la página web de Modern.IE

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:

Slideshow responsive con CSS 3 y Javascript nativo

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.

Imagen slideshow responsive

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 <head> del documento HTML:

5 técnicas para facilitar el cross browsing

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:

Slideshow con CSS3 y Javascript (mejorado)

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.

Imagen de la demo slideshow múltiple

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>

Como instalar Firefox 20 en Ubuntu 11.04

Ubuntu 11.04 parece no dar soporte a la última versión de Firefox, por lo tanto para tener instalada la última versión de este navegador, que es el que uso habitualmente, tuve que hacerlo a mano. Para verlo vamos al lío.

Imágen de la página de Firefox

1.- Descargar Firefox

Para descargar la última versión nos dirigimos a la página de Mozilla Firefox y seleccionamos la versión que corresponda con tú sistema operativo. Por defecto, la página suele ofrecerte la versión que necesitas. Lo guardamos en algún sitio de tu pc. En mi caso directamente en el Escritorio.

2.- Descomprimir paquete

Lo siguiente que tuve que hacer fue descomprimir el paquete descargado que se llama firefox-20.0.tar.bz2. Para ello utilicé el gestor de archivadores por defecto que aparece instalado en Ubuntu 11.04.

3.- Mover a opt

Movemos la carpeta Firefox a la carpea "/opt".En esta carpeta suelen instalarse varios programas. En mi caso Firefox no está instalada en esta carpeta, ya que en su momento lo instalé desde el Centro de software de Ubuntu y lo instala en otra directorio diferente. También podéis usar el siguiente comando en la consola, si es que os gusta más, para moverlo.

sudo mv firefox /opt/firefox

Tanto con la opción gráfica como con la opción por terminal hay que tener permisos suficientes para mover la carpeta a su destino.

Galería dinámica con Lightbox y PHP (II)

Ver los efectos de la página Original Hover Effects me ha motivado para crear una demo similar (la suya es más guay) implementándola como Galería dinámica con lightbox y PHP.

No penséis que va a ser exactamente igual, ya que también me ha motivado a escribir un nuevo código PHP que facilite la implementación de la galería, esta vez utilizando un clase en PHP y no implementando el código en la propia página.

Bueno, lo primero es lo primero, aquí os dejo la demo Galería dinámica con lightbox y PHP (II) y, a continuación vamos a ver las partes del código más importantes, aunque más abajo pondré enlaces para descargar el ejemplo completo en PHP y en HTML.

Slideshow sencillo con CSS3 y JavaScript

Aprovechando las capacidades de CSS3 y un poco de JavaScript, he decidido crear dos slideshow bastante sencillos, teniendo en cuenta los que podemos ver en algunas páginas últimamente.

Imagen del slideshow

Podéis ver las demos del slideshow con efecto opacidad y el slideshow con efecto persiana.

Para este ejemplo no se ha usado ninguna librería de JavaScript, lo que se consigue que este sea lo más liviano posible en cuanto a peso se refiere. Al ser un ejemplo bastante sencillo no he visto conveniente usar alguna, ya que el script solamente se encargará de modificar los class de una lista de imágenes, y el peso de la animación recae sobre el CSS y las nuevas propiedades que proporciona su última actualización.

Ejemplo slideshow efecto opacidad

HTML

Para ello vamos a ver el código HTML.

<ul id="galeria">
<li><img src="/blog/../img/rascafria-1.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-2.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-3.jpg" border="0" alt="Rascafría" /></li>
</ul>

Como aumentar 15 Gb la memoria en Symbian OS

De un tiempo a esta parte nos encontramos con un gran número de servicios en la nube. En este post voy a recomendar el que ofrece el equipo de 4shared y que nos permite guardar hasta 15Gb gratuitamente, eso si, con ciertas restricciones que no voy a entrar a valorar.

Crear la Unidad Remota

Con un móvil bastante básico para lo que podemos encontrar en el mercado actual, un Nokia C5-00 con Symbian OS y conexión a internet, es con el que vamos a realizar este aumento de memoria, de forma gratuita y sin instalar ningún programa adicional. Para ello lo primero que hice fue una cuenta gratuita en 4shared.com.

Móvil Nokia C5-00

Una vez registrados y con nuestra cuenta activa lo siguiente es crear en mi móvil una Unidad Remota, que conectaré al servidor que ofrece este servicio. Para ello solo tenemos que ir a Gestor de archivos de nuestro móvil. Si es la primera vez que entramos veremos dos unidades, la interna del móvil y la tarjeta. Si pulsamos en Opciones veremos que podemos gestionar Unidades remotas.

Página 1 de 5

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar