Posts relacionados con el tag: ‘Desarrollo Web’

Kopas ya dispone de tienda on-line para la compra de sus trofeos

Jueves, 30 Agosto 2007 en Noticias de Abartia Team

Kopas ofrece desde 1980 una amplia variedad de productos tales como trofeos, llaveros, grabados, esculturas, tallas, reproducciones en resina, regalo de empresa y publicitario, fabricando tanto como producto estándar como en trabajo a medida y personalizado para cada cliente. Merece la pena visitar su sitio web para deleitarse con la amplia variedad de trabajos artesanales y artísticos, únicos.

Desde hace tiempo Kopas y Abartia Team trabajan conjuntamente para la modernización de sus oficinas y talleres con cableado y servidores nuevos pasando por las conexiones remotas VPN que utilizan nuestros AbarConnect, hasta llegar a la realización de la web de comercio electrónico http://www.kopasbilbao.com donde es posible adquirir sus productos de forma online.




Presentada la página web de la “Asociación de Comerciantes de Gernika”

Martes, 3 Abril 2007 en Noticias de Abartia Team

El pasado 28 de Marzo, Abartia Team presentó en Gernika la página web oficial de la “Asociación de Comerciantes de Gernika”. Se trata de un site totalmente accesible y posicionable en los principales motores de busqueda. La función de esta página es la de ser un escaparate de todas las tiendas de Gernika que pertenecen a la asociación. Cada tienda dispone de un escaparate propio en el que poder mostrar sus productos mediante fotos y texto adicional.

En la confección de la web, Abartia Team ha utilizado CMSMadeSimple además de haber implementado un módulo propio para la asociación, para de esta manera poder adecuarse a las necesidades y especificaciones del cliente. Este módulo propio incluye funciones que un gestor de contenidos normal no es capaz de desarrollar.




Publicado el proyecto BILBAO AKTIBA!

Jueves, 29 Marzo 2007 en Noticias de Abartia Team

BILBAO AKTIBA!, es un proyecto para el Ayuntamiento de Bilbao, en colaboración con la agencia Amasté, en donde Abartia Team, se ha encargado del desarrollo tecnológico.

BILBAO AKTIBA! pretende crear un Plan Joven definido a través de un proceso participativo, basado en implicar a los/las jóvenes de Bilbao en las decisiones que afectan al presente y futuro de la ciudad, acercando así la calle a la política y la política a la calle.




Control de versiones en la empresa

Martes, 13 Marzo 2007 en Desarrollo Web

El control de versiones es una tecnología que permite a una persona o un grupo de personas colaborar y el elaborar un proyecto de forma ordenada. Imaginemos dos personas trabajando en un mismo documento y cada una escribiendo una parte del mismo. Al terminar de redactar, sería necesario que alguna de las dos mandase a la otra sus modificaciones por correo, para que la otra las añadiese al documento todo el texto, ¿cuantas horas debería dedicar a esta tarea?. Pocas, probablemente si el documento es corto, pero ¿si fuesen varias decenas de hojas? y los textos se intercalaran unos con otros?, el numéro de horas sería bastante mas elevado, por no decir la probabilidad de que dicho usuario cometiera algún fallo.

Para ayudar en este tipo de labor existen varios sistemas similares denominados control de versiones que básicamente lo que hacen es automatizar todo este trabajo. En Abartia Team hemos probado varios de ellos, y finalmente hemos implantado Subversion (SVN). Este es su sitio en Internet:http://subversion.tigris.org/

Es un sistema moderno de control de versiones que utilizamos para sistematizar el control de nuestros proyectos y que además es Software Libre. Podeis leer mas al respecto en su sitio oficial (el enlace anterior), o en la Wikipedia: http://es.wikipedia.org/wiki/Subversion




Como localizar tu empresa con Google Maps

Jueves, 6 Julio 2006 en Desarrollo Web, Soluciones a medida

¿Quién no conoce Google Maps hoy en día? Un servidor Web que ofrece mapas desplazables, ampliables y personalizables, compuestos tanto por imágenes de callejeros como por imágenes de satelite.

Se trata de una tecnología que ha calado hondo en internet y que, entre otras cosas, permite su uso de manera completamente gratuita en todo tipo de Webs, incluidas las comerciales, siempre y cuando el acceso a la página donde se muestra sea gratuito.

Una de las ventajas que Google Maps ofrece al entorno empresarial es que la localización mediante esta tecnología permite la inclusión de iconos personalizados para la identificación de la empresa en el mapa, de manera que el propio logo puede indicar la localización exacta de la empresa y no romper así con la imagen corporativa.

Este tipo de mapa es realmente facil de manipular, por lo que expondremos como ejemplo lo que hemos hecho para nuestra Web:

  1. Para utilizar Google Maps, lo primero que hay que hacer es crear una cuenta en Google (con una cuenta de Gmail también nos vale)
  2. Una vez obtenida la cuenta, necesitaremos pedir una clave (key), que nos permita utilizar el API de Google Maps desde nuestro dominio. Necesitaremos una clave distinta para cada dominio donde vayamos a insertar el mapa.Una vez tengamos la clave, el uso del API para crear un mapa con la localización de nuestra empresa es relativamente sencillo:
  3. Creamos un documento HTML con sus partes fundamentales:
    <html>
    <head>
    <title>Ejemplo Mapa Abartia</title>
    
    </head>
    <body>
    <h1>Localización de Abartia</h1>
    </body>
    </html>
  4. Añadimos la llamada al API de Google, mediante una etiqueta <script> dentro del campo <head> de la web. En el parametro key de la URL, se deberá introducir la clave facilitada. Por ejemplo, para el dominio www.abartiateam.com esta será: ABQIAAAAOZ___lY-aPqjpyQwGsqqVRTgWyDm2t_NAnmiqOBiWP0tgX-Y9BQ0tr2Kd9p2zS-cFD68A_UMMtfGxg
    <head>
    [...]
    <script xsrc='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOZ___l…‘
    type=’text/javascript’></script>
    […]
    </head>
  5. Añadimos las funciones load() y GUnload() a los eventos onload y onunload de la etiqueta <body> respectivamente para que se muestre el mapa una vez cargada la página.
    <body onload='load()' onunload='GUnload()'>
  6. Dentro del cuerpo de la página, añadimos la capa (div) donde se mostrará el mapa, indicando también su anchura, altura y margenes. Es importante añadir un identificador para el div. En este caso lo identificaremos como “map”.
    <div id='map' class='mapa' style='width: 44em; height: 35em; margin: 0.5em auto;'></div>
  7. Una vez preparada la página, se debe añadir un script a la sección <head> donde configuraremos los atributos del mapa (coordenadas, iconos, texto a mostrar, etc.). En el caso de Abartia Team, el script es el siguiente:
    <script type='text/javascript'>
    
    //<![CDATA[
    
    function load() {
    if (GBrowserIsCompatible()) {
    
    var icon = new GIcon();
    icon.image = 'logo_abartia.gif';
    icon.shadow = 'map_shadow.png';
    icon.iconSize = new GSize(105, 42);
    icon.shadowSize = new GSize(101, 30);
    icon.iconAnchor = new GPoint(0, 30);
    icon.infoWindowAnchor = new GPoint(0,20);
    
    var direccion = "
    <address>
    Avenida Enekuri 4, Entreplanta Dcha, Dcha<br />
    48014 - Bilbao<br />
    Bizkaia<br />
    Tel: +34 94 475 88 16<br />
    
    Fax: +34 94 475 96 45<br />
    E-mail: <a xhref='mailto:info@abartiateam.com'>info@abartiateam.com</a><br />
    </address>";
    var marcador = new GMarker(new GLatLng(43.272253,-2.947941), icon);
    GEvent.addListener(marcador, 'click', function(){marcador.openInfoWindowHtml(direccion);});
    var map = new GMap2(document.getElementById('map'));
    map.setCenter(new GLatLng(43.272253,-2.947941), 15);
    map.setMapType(G_NORMAL_MAP);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addOverlay(marcador);
    marcador.openInfoWindowHtml(direccion);
    
    }
    }
    
    //]]>
    </script>

    A continuación trataremos de explicar el script parte a parte:

    1. Lo primero que se hace en la función load es comprobar si el navegador es compatible con el API de Google Maps:
      if (GBrowserIsCompatible()) {
    2. Se configuran los iconos y sus posiciones en el mapa:
      var icon = new GIcon();
      icon.image = 'logo_abartia.gif';
      icon.shadow = 'map_shadow.png';
      icon.iconSize = new GSize(105, 42);
      icon.shadowSize = new GSize(101, 30);
      icon.iconAnchor = new GPoint(0, 30);
      icon.infoWindowAnchor = new GPoint(0,20);
    3. Creamos una variable con la dirección o texto que nos interese mostrar en el bocadillo. Se permiten etiquetas HTML :)
      var direccion = "
      <address>
      Avenida Enekuri 4, Entreplanta Dcha, Dcha<br />
      48014 - Bilbao<br />
      
      Bizkaia<br />
      Tel: +34 94 475 88 16<br />
      Fax: +34 94 475 96 45<br />
      E-mail: <a xhref='mailto:info@abartiateam.com'>info@abartiateam.com</a><br />
      </address>";
    4. Configuramos un marcador para la coordenada que deseamos, y le añadimos el evento “click” para que al pulsar sobre él se muestre un bocadillo con la información descrita en el paso anterior.
      var marcador = new GMarker(new GLatLng(43.272253,-2.947941), icon);
      GEvent.addListener(marcador, 'click', function(){marcador.openInfoWindowHtml(direccion);});
    5. Añadimos un mapa dentro del elemento que identificamos anteriormente con el nombre ‘map’, lo centramos en las coordenadas que nos interesan, y lo configuramos con un nivel de zoom de 15.Indicamos que el tipo de mapa es el callejero (G_NORMAL_MAP), aunque también existen las opciones de foto de satelite (G_SATELLITE_MAP) e híbrido (G_HYBRID_MAP)

      Añadimos los controles de zoom y movimiento (addControl).

      Insertamos el marcador en el mapa, y hacemos que se muestre el bocadillo al iniciar la página.

      var map = new GMap2(document.getElementById('map'));
      map.setCenter(new GLatLng(43.272253,-2.947941), 15);
      map.setMapType(G_NORMAL_MAP);
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.addOverlay(marcador);
      marcador.openInfoWindowHtml(direccion);

En caso de ser una empresa con más de una delegación, es posible mostrar todas las delegaciones en un mismo mapa, aunque solo se puede mostrar un bocadillo en cada momento, por lo que probablemente la mejor opción sea no mostrar ninguno al principio y desplegarlos al hacer click sobre cualquiera de las delegaciones, como hacen por ejemplo en la Web de la Autoescuela Galdakao, aunque eso queda a elección del autor.

Por último recomendar el paso por la página oficial del API de Google Maps para comprobar todo lo que se puede hacer con esta magnífica herramienta.




Entorno de desarrollo: Eclipse

Martes, 4 Julio 2006 en Desarrollo Web, Soluciones Empresariales

Eclipse es una comunidad cuyo fin es elaborar una plataforma de desarrollo de software. Recientemente se ha publicado la versión 3.2. La cantidad y velocidad de desarrollo de distintos plugins hacen que Eclipse sea un proyecto muy importante y que ofrece un entorno completo de desarrollo.

En AbartiaTeam hemos integrado varios plugins para el desarrollo: subclipse para la integración con Subversion, wpt para desarrollo web, y PHPEclipse para trabajo con PHP, entre otros.




Gestión de Bookmarks de una oficina mediante una Intranet

Viernes, 10 Febrero 2006 en Soluciones a medida

Buscando un sistema para almacenar Bookmarks al estilo de del.icio.us hemos encontrado Sitebar. La idea consistía en compartir los bookmarks entre los integrantes de un equipo de trabajo en vez de almacenar cada uno los suyos. del.icio.us es impresionante pero no interesabe compartir con todo el mundo los bookmarks de la oficina. Por esta razón, Sitebar podía servir.

Con SiteBar podemos realizar las siguientes operaciones:

  • Disponer de los bookmarks en cualquier navegador
  • Acceso seguro y controlado en la oficina o casa
  • Exportar o Importar los Bookmarks
  • Guardar noticias y Feeds

SiteBar tiene dos formas de uso, a través del servicio ofrecido por la web my.sitebar.org y bajando la versión en php e instalandolo en nuestro servidor web. Que en este caso es la que nos interesa. En cualquiera de los dos casos tiene la posibilidad de integrarse en navegadores como Firefox, Internet Explorer y Opera. Resultando muy sencillo poder añadir nuevos bookmarks desde nuestro navegador favorito.

La instalación en un servidor web es bastante sencilla. En cada puesto cliente es necesario instalar y configurar las extensiones para facilitar la labor de elegir, añadir o eliminar bookmarks.




Uso de la tecnología Ajax en el desarrollo web

Viernes, 10 Febrero 2006 en Desarrollo Web

Interesante la utilización de la tecnología Ajax. Hasta hace poco la utilización de varios frames, uno de ellos oculto, mejor dicho con altura cero, era la única forma posible para simular una actualización de los datos sin el molesto paso a una página intermedia.

Los accesos a base de datos se realizaban en el frame oculto y su resultado se enviaba al frame que el usuario si que veía. Esta opción tenía un inconveniente, podía ocurrir que el frame oculto se cargase antes que el frame que se veía y diese un error de javascript al no encontrar donde enviar la información. Las páginas se formaban mal.

Así que era necesario realizar malabarismos y tener miles de controles para que todo funcionase perfectamente.

Con la llegada de Ajax, todo se simplifica notablemente. Por un lado, ya no es necesario tener frames, los buscadores lo agradecerán, y por otro no es necesario controlar que página se carga antes, puesto que sólo necesitamos una y el código javascript se ejecuta una vez se ha cargado la página en el navegador del cliente.

Realmente todo esto recuerda al Remote Scripting que se podía utilizar con el IIS de Microsoft y las active server pages (asp). Si alguien lo ha utilizado se dará cuenta de la similitud, lo bueno es que con la tecnología ajax ya se puede utilizar cualquier servidor web.




Ventajas del uso de Apache

Sábado, 21 Enero 2006 en Posicionamiento en Google

La utilización de apache ayuda en la mejora del posicionamiento. El servidor web Apache junto con el módulo mod_rewrite puede convertirse en una herramienta muy jugosa para crear páginas con enlaces amigables para los buscadores.

No hay más razón que evitar urls del tipo http://dominio/index.php?id=re345hfg&p=jf4 y decir algo así como http://dominio/soluciones/bonitas. Esta última url resulta mucho más interesante y fácil de indexar y buscar.

La activación del módulo en Apache 2 es bastante sencilla simplemente escribir el siguiente comando en un terminal:

a2enmod rewrite

Después forzamos el reinicio de apache con el comando:

/etc/init.d/apache2 force-reload

Y estará listo para su funcionamiento.

La segunda parte consiste en plantear las reglas necesarias que harán de nuestro sitio web más amigable para los buscadores. Suponiendo que tenemos claro cuales son nuestros objetivos de posicionamiento y por tanto tenemos claro sobre que palabras clave queremos identificarnos procederemos de la siguiente forma.

Suponemos que tenemos una página que es dinámica por ejemplo index.php y la palabra clave por la que queremos posicionarnos es “posicionamiento en google”

http://dominio/index.php?param=56 y esto queremos que se transforme en http://dominio/posicionamientoengoogle.html

En el fichero .htaccess después de los redireccionamientos, directoryindex y demás ponemos lo siguiente:

RewriteEngine on

RewriteRule ^/posicionamientoengoogle.html /index.php?param=56 [PT]

Así conseguimos transformar las url basadas en parametros a url amigables.

Aunque si todo esto parece complicado, existe una herramienta para creación de reglas que puede ayudar a crearlas, aunque sin demasiadas pretensiones.

Se puede encontrar más información en el proyecto Apache