Andrés Moreno | Blog | Programación | Diseño Andrés Moreno | Blog | Orientado al desarrollo web con PHP, HTML, CSS y Javascript http://www.andresmorenostudio.com/blog/component/content/frontpage Sat, 20 Jan 2018 20:14:26 +0000 Joomla! 1.5 - Open Source Content Management es-es Instalar modern.IE en Ubuntu - Herramientas Cross Browser http://www.andresmorenostudio.com/blog/sistemas-operativos/ubuntu/36-instalar-modernie-ubuntu http://www.andresmorenostudio.com/blog/sistemas-operativos/ubuntu/36-instalar-modernie-ubuntu 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:

]]>
andrewmg1980@gmail.com (Andrés Moreno García) frontpage Mon, 07 Oct 2013 19:47:49 +0000
Slideshow responsive con CSS 3 y Javascript nativo http://www.andresmorenostudio.com/blog/programacion/javascript/35-slide-show-resposivo-css-javascript http://www.andresmorenostudio.com/blog/programacion/javascript/35-slide-show-resposivo-css-javascript 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:

]]>
info@andresmorenostudio.com (Andrés Moreno García (Admin)) frontpage Sat, 05 Oct 2013 19:41:02 +0000
5 técnicas para facilitar el cross browsing http://www.andresmorenostudio.com/blog/programacion/html/34-tecnicas-facilitar-cross-browsing http://www.andresmorenostudio.com/blog/programacion/html/34-tecnicas-facilitar-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:

]]>
info@andresmorenostudio.com (Andrés Moreno García (Admin)) frontpage Sat, 13 Jul 2013 07:50:05 +0000
Slideshow con CSS3 y Javascript (mejorado) http://www.andresmorenostudio.com/blog/programacion/javascript/33-slideshow-css-javascript-mejorado http://www.andresmorenostudio.com/blog/programacion/javascript/33-slideshow-css-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>
]]>
andrewmg1980@gmail.com (Andrés Moreno García) frontpage Sun, 28 Apr 2013 09:04:40 +0000
Como instalar Firefox 20 en Ubuntu 11.04 http://www.andresmorenostudio.com/blog/sistemas-operativos/ubuntu/32-instalar-firefox-20-ubuntu-11 http://www.andresmorenostudio.com/blog/sistemas-operativos/ubuntu/32-instalar-firefox-20-ubuntu-11 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.

]]>
andrewmg1980@gmail.com (Andrés Moreno García) frontpage Fri, 26 Apr 2013 14:28:17 +0000
Galería dinámica con Lightbox y PHP (II) http://www.andresmorenostudio.com/blog/programacion/php/31-galeria-dinamica-lightbox-2 http://www.andresmorenostudio.com/blog/programacion/php/31-galeria-dinamica-lightbox-2 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.

]]>
info@andresmorenostudio.com (Andrés Moreno García (Admin)) frontpage Sun, 24 Mar 2013 12:10:17 +0000
Slideshow sencillo con CSS3 y JavaScript http://www.andresmorenostudio.com/blog/programacion/javascript/30-slideshow-css-javascript http://www.andresmorenostudio.com/blog/programacion/javascript/30-slideshow-css-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="http://www.andresmorenostudio.com/blog/../img/rascafria-1.jpg" border="0" alt="Rascafría" /></li>
<li><img src="http://www.andresmorenostudio.com/blog/../img/rascafria-2.jpg" border="0" alt="Rascafría" /></li>
<li><img src="http://www.andresmorenostudio.com/blog/../img/rascafria-3.jpg" border="0" alt="Rascafría" /></li>
</ul>
]]>
info@andresmorenostudio.com (Andrés Moreno García (Admin)) frontpage Wed, 15 Aug 2012 14:34:19 +0000
Como aumentar 15 Gb la memoria en Symbian OS http://www.andresmorenostudio.com/blog/sistemas-operativos/symbian-os/29-aumentar-memoria-symbian-os http://www.andresmorenostudio.com/blog/sistemas-operativos/symbian-os/29-aumentar-memoria-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.

]]>
andrewmg1980@gmail.com (Andrés Moreno García) frontpage Sun, 06 May 2012 08:26:34 +0000
Uso de CSS 3 - Transiciones (II) - Creación de un menú http://www.andresmorenostudio.com/blog/diseno/css/28-uso-css3-transiciones-barra-menu http://www.andresmorenostudio.com/blog/diseno/css/28-uso-css3-transiciones-barra-menu Hoy un pequeño apunte de como crear un menú con HTML y CSS 3 que no tendrá nada que envidiar al de algunas páginas creadas completamente en Flash.

Al principio de este post, quería conseguir replicar el menú de la web de Apple, pero este hace uso de JavaScript en la opción del buscador (o yo no he sabido conseguir ese efecto solo con CSS 3), y el objetivo principal de este post es crear un menú enteramente en CSS 3, en lo que respecta a su comportamiento.

Para los más impacientes lo primero es mostrarle la demo del menú en CSS 3.¿os gusta?, bien pues vamos a ponernos manos a la obra...

Lo primero es el código HTML que he usado:

]]>
andrewmg1980@gmail.com (Andrés Moreno García) frontpage Fri, 09 Dec 2011 15:50:18 +0000
Uso e inconvenientes de fuentes embebidas en el diseño web http://www.andresmorenostudio.com/blog/diseno/css/26-uso-inconvenientes-fuentes-embebidas-diseno-web http://www.andresmorenostudio.com/blog/diseno/css/26-uso-inconvenientes-fuentes-embebidas-diseno-web Hoy voy a hablar sobre el uso de fuentes embebidas con la propiedad CSS @font-face y los inconvenientes con los que nos podemos encontrar en la maquetación de una web si usamos esta propiedad.

Para aquellos que no lo sepan, con la propiedad CSS @font-face es posible utilizar fuentes en nuestros diseños sin necesidad de tenerlas instaladas en el equipo cliente. Hasta no hace tanto esto no era posible, y limitaba bastante el diseño web, por lo tanto, esta propiedad supone un gran avance.

Esta propiedad no es nueva, ya existía en la especificación de CSS 2, se eliminó en CSS 2.1 (que usaban la mayoría de los navegadores) y ha vuelto con CSS 3.

]]>
andrewmg1980@gmail.com (Andrés Moreno García) frontpage Wed, 30 Nov 2011 20:00:59 +0000