Twitter Link

Hoy hemos publicado el link de Twitter en todas las páginas del sitio, anteriormente solo aparecia en el Homepage de cada versión, inglés y español.

Sitio Web con MegaMenu

En estos momentos estamos publicando el sitio con el rediseño de la navegación.
Hemos abandonado el sistema de "submenus" por el de "megamenu".  Y también, en esta misma ocación, rediseñamos las páginas iniciales de cada idioma.

Más detalles en un próximo post.

Nuevo Logo - Canal de Panamá

Hoy hemos publicado en la página inicial el  nuevo logo del Canal de Panamá.

Este logo ya ha aparecido, en medio televisivos, y hasta ahora hace su aparición en Internet.  Progresivamente estaremos actualizando distintas áreas del sitio donde el viejo logo aparece.

Nuevo Splashscreen en www.pancanal.com

A inicios de este mes cambiamos el splashscreen de PanCanal.

El arte original - en tono más celeste, y con América al extremo izquierdo - fue re-editado para centrear el continente de América en el mapa mundial, y darle una tonalidad mucho más azul.  De esta forma, tratamos de resaltar el valor de la ruta acuática por el Canal de Panamá.

Evolución de la Webcam de las Esclusas de Miraflores

Las webcams del Canal de Panamá, por su contenido visual y actualización constante (por lo menos, cada 60 segundos), son uno de los atractivos más grandes de nuestro website.  Seguido por el Sistema de Licitaciones (SLI) y la página de Información para Empleo.

Ahora, un poco de historia de nuestra primera webcam, la de las Esclusas de Miraflores.

A través de los años, estas cámaras han publicado las imágenes que capturan en un folder dentro de un servidor web.  Estos folders y los servidores han cambiado con los años por motivos de capacidad, performance, bandwidth, etc... esta parece haber sido la evolución de la cámara web más vieja de PanCanal:

http://www.pancanal.com/miraflores/miraflores.jpg

http://www.pancanal.com/webcam/miraflores.jpg

http://webcams.pancanal.com/miraflores/miraflores.jpg (link actual)

http://webcams.pancanal.com/miraflores/miraflores.jpg (redirecciona por alguna razón a http://www.pancanal.com/webcam/miraflores.jpg )

Así, la cámara web de Miraflores ha evolucionado, a tal punto que ahora existen dos. La que vemos arriba y una de mayor resolución.

Esta revisión, nos llevará tal vez a actualizar estos links "permanentes" que han quedado desactualizados, y que siguen siendo utilizados en programas (eg. Webcam-Watcher) o configuraciones viejas que no conocemos.  Una forma de alertar que hubo un cambio: es poniendo la nueva información en las imágenes (ver ejemplo), o mejor aún, redireccionando automáticamente (con una respuesta HTTP) a la ubicación nueva.

La solución que implementemos se verá con el tiempo, porque por el momento, no vemos que esto impacte enormemente a nuestros visitantes. O ¿sí?...

... si alguien necesita estos links actuales para algun proyecto interesante, aquí estan:

http://webcams.pancanal.com/webcam/miraflores.jpg
http://webcams.pancanal.com/webcam/hd-miraflores.jpg
http://webcams.pancanal.com/webcam/ampliacion.jpg
http://webcams.pancanal.com/webcam/cerro-luisa.jpg
http://webcams.pancanal.com/webcam/gatun.jpg
http://webcams.pancanal.com/webcam/hd-gatun.jpg

Nuevas mejoras en el Portal de Empleo

Continuando con las mejoras en el recién lanzado Portal de Empleo (antiguo sistema SASE) de la ACP.

Durante el transcurso de la mañana de hoy se publicaron nuevas mejoras para el entendimiento de nuestros visitantes. Entre ellas:

• Imagén de guía "Paso 1" para iniciar el proceso de Registro
• Mensaje de ayuda para Copiar/Pegar al hacer clic-derecho sobre la pantalla
• Mensaje de ayuda para presionar Filtrar al seleccionar alguna otra área
• Calendario más moderno para selección de fechas
• Al finalizar el proceso, botón que le permite revisar su información, revisar o añadir más ocupaciones

Para los que no les gusta leer, aquí tomas de cada mejora (en desorden)*:

* Faltó una toma del nuevo calendario.

Para entrar al Portal de Empleo, acceda mediante esta página:

• Información para Empleo

Estas mejoras hacen el uso del sistema más facil? Sus comentarios y sugerencias son siempre bienvenidos.

PanCanal crece a 1024

Hoy actualizamos al nuevo *ancho* de pantalla las páginas de http://www.pancanal.com/.
El nuevo estandar apunta a pantallas de 1024 pixeles de ancho.

Con esto ganamos más espacio que estaba inutilizado en los monitores de la mayoría de nuestros visitantes. (De esto nos dimos cuenta en Octubre del año pasado, cuando iniciamos el análisis de visitas con Google Analytics).

De igual forma, aumentamos proporcionalmente el tamaño de ciertas fuentes y títulos, también ampliamos y ajustamos el sistema de menués y sub-menués. (Aunque próximamente será reemplazado).

Como siempre, sus comentarios y sugerencias son bienvenidos.

Google Custom Search

Hoy hemos cambiado el Google Search que tenía el sitio por el Google Custom Search.

El link de Búsqueda o Search esta siempre disponible en la parte superior de todas las páginas del sitio.
O, lo pueden acceder con estos enlaces:

• http://www.pancanal.com/esp/search/
• http://www.pancanal.com/eng/search/

Estaremos monitoreando esta nueva adición e investigando formas de mejorar la búsqueda en nuestro sitio con este servicio de Google.

Webcast: Licitación del ensanche y profundización

Les informamos que la ceremonia de apertura de propuestas para la licitación del ensanche y profundización de las bordadas al norte del cauce del lago Gatún, como parte del Programa de Ampliación, será transmitida por circuito cerrado (Canal 10) y a través del sitio de Internet. La transmisión será a partir de la 1:00 p.m. de hoy, martes 1 de junio.

El enlace para la transmisión en vivo será http://www.pancanal.com/esp/multimedia/videos/97274.html.

DISTRIBUIDO POR LA OFICINA DE COMUNICACIÓN CORPORATIVA

Twitter y la Feria Tecnológica de la ACP

Hoy estamos experimentando el uso de Twitter con el evento de Tecnología que se esta llevando acabo en el Centro de Capacitación Ascanio Arosemena de la ACP. Para darle seguimiento, pueden ver más en el Twitter de Pancanal.


De igual manera pueden acceder directamente al webcast en el siguiente enlace: Feria Tecnológica de la ACP.  (La transmisión terminará junto con el evento, tal vez el link no este disponible entonces).

Esta es la primera prueba donde tratamos de narrar poco a poco las presentaciones de un evento cuando se estan dando. Pero nos preguntamos, ¿es necesario tanto nivel de detalle de un evento de ACP?

Como siempre, sus comentarios y sugerencias son bienvenidos.

Portal de Empleo

Hoy hemos lanzado el nuevo Portal de Empleo de la ACP.

Este es un sitio de ocupaciones en la ACP para que cualquiera pueda registrarse y así ser considerado, o también, para aplicar a puestos vacantes en momentos que hay disponibles.

El Portal de Empleo esta disponible desde el enlace "Información para Empleo":
http://www.pancanal.com/esp/hr/info-empleo.html

Este sistema reemplaza al SASE, y hemos trabajado para que fuera mejor que este antiguo sistema. Comentarios o sugerencias son siempre bienvenidas.

The Panama Canal @ Twitter

Finalmente, ya estamos en Twitter! ...y al parecer desde Septiembre 2009.

Podemos decir que, oficialmente, la cuenta Twitter de la Autoridad del Canal de Panamá es:

http://twitter.com/thepanamacanal

Otras cuentas Twitter, con o sin actividad, relacionadas a la ACP son:

http://twitter.com/pancanal
http://twitter.com/webdesignerACP

Ya saben: keep following!

Life Transit

I took this screenshot yesterday, from Miraflores Locks, just before our team and everyone went to celebrate the Life of one of our own, who parted unexpectedly.

Multiple Definition List FAQ Toggle (TJK_DL)

En PanCanal y algunos sitios de nuestra Intranet hemos implementado la presentación de información en forma de FAQ (Frequently Asked Questions). Básicamente es mostrar listado largo de items que al ser cliqueados expandan más la información, en este caso la respuesta a una pregunta.  Un ejemplo público esta en Canal FAQs, y esto, lo implementamos rápidamente en ese entonces con el Javascript DL Toggle de TJK_DL.

Pero, -que pasa cuando las cosas se ponen más complejas? Digamos múltiples Listas de Definición (DLs) en una misma página.

La solución a ese problema es sencilla. En vez de poner el id="TJK_DL" a cada DL: <dl id="TJK_DL">, le ponemos el id="TJK_DL" a un wrapping DIV: <div id="TJK_DL">  fuera de todo conjunto de Definition Lists de la página.

Código ejemplo:

<div id="TJK_DL">

<h2>2009</h2>

<dl>

<dt>Agosto 2009</dt>

<dd>

<ul>

<li><a href="#">27 de Agosto: 09-04</a></li>

</ul>

</dd>

<dt>Julio 2009</dt>

<dd>

<ul>

<li><a href="#">30 de Julio: 09-03</a></li>

<li><a href="#">14 de Julio: 09-02</a></li>

</ul>

</dd>

</dl>

<h2>2008</h2>

<dl>

<dt>Diciembre 2008</dt>

<dd>

<ul>

<li><a href="#">27 de Diciembre: 08-04</a></li>

</ul>

</dd>

</dl>

<h2>2007</h2>

<dl>

<dt>Noviembre 2008</dt>

<dd>

<ul>

<li><a href="#">30 de Noviembre: 08-03</a></li>

<li><a href="#">14 de Noviembre: 08-02</a></li>

</ul>

</dd>

<dt>Octubre 2008</dt>

<dd>

<ul>

<li><a href="#">1 de Octubre: 08-01</a></li>

</ul>

</dd>

</dl>

</div>

Claro, que lo óptimo sería sentarnos a buscar esta solución con YUI que es la librería que utilizamos ahora... 

Galería de Fotos del Canal de Panamá y Cooliris

Hemos re-publicado la galería de fotos del sitio en PanCanal. Una de las novedades, es que se pueden ver las fotos con el espectacular plug-in de Cooliris.

Para los que no conocen Cooliris, es un programa que permite navegar una gran cantidad de fotos fácilmente, presentadas en una pared tridimencional. Visite su sitio para conocer más de Cooliris.

La Galería de Fotos del Canal esta disponible en estos enlaces:

• http://www.pancanal.com/esp/photo/index.html
• http://www.pancanal.com/eng/photo/index.html

Anteriormente, cada albúm de foto abría en una animación Flash que demoraba en cargar. En esta ocación las fotos se pueden expandir a un tamaño mucho mayor que antes, y que abarca gran parte de una monitor a una resolución estándar. La razón de esto es la imagen superpuesta del logo de la ACP.

Transmisiones del Panama Jazz Festival

La ACP esta colaborando en el Panama Jazz Festival 2009, y como las presentaciones se estan realizando en las instalaciones de la ACP desde ayer es posible verlas en vivo a través de Internet. El enlace a la transmisión esta en la página principal de cada idioma en http://www.pancanal.com/.


Link Directo a Transmisión En Vivo - durante estos días - desde las 4pm a 6pm:
http://www.pancanal.com/esp/multimedia/videos/pma-jazz-festival.html


Más información del Jazz Fest 2009
http://www.panamajazzfestival.com/

Flash WebCam Viewer

Por múltiples problemas con la soluciones de refrescar imagenes, ya sean en Java, Javascript, o un simple HTML Meta-Refresh. Hemos dedicado un tiempo para crear un visualizador de webcams robusto en Flash y las pruebas contra las pasadas soluciones son satisfactorias.

La solución es un archivo Shockwave Flash (SWF) que se configura utilizando variables querystring variables en el llamado al SWF. De la siguiente forma:

flash-webcam-viewer.swf?ImageURL=WebCam.jpg&Refresh=10

Todas las variables de configuración disponibles por querystring son:

• ImageURL : Ruta a la imagen de webcam, puede ser relativa a la ubicación del SWF o absoluta. Default: "Panama Canal Miraflores Webcam" URL)
• Refresh : Tiempo en segundos del refresco de imagen (Default: "3" seconds)
• SnapsLimit : Cantidad de imagenes para cargar (Default: "300" snaps)
• Action : Link o javascript (Default: "NoAction")
• Target : objetivo de la Action. Puede ser: _top, _parent, etc.. (Default: "_self") [Versión: 2.07]

Por el momento, pueden tomar el SWF directamente de nuestro sitio (right clic en el siguiente link y salvar):

• http://webcams.pancanal.com/common/flash-webcam-viewer/2.06/flash-webcam-viewer.swf

Etiquetas en el Blog

Tip para quienes usen Blogger y el "classic template".

Si necesitan mostrar un listado de las etiquetas (o labels) ahí esta una técnica.

Alternación de Estilos

Estamos utilizando el script (\common\scripts\striper.js) para alternar (dos o más) estilos dentro de cualquier elemento HTML.

Esto lo pueden apreciar en acción bajo:

• Tablas de Cursos @ SiDMAR

Indicador en Submenus

Los submenus con subopciones aparecen con un identificador para notar que se pueden expandir más.

El regreso de los submenus

Hoy se publicaron en PanCanal opción de submenus bajo cada opción del menú global.
Esto debe brindarle a los usuario un acceso más expedito a cualquier parte del sitio.

Aplicados en inglés y español.
Véanlos http://www.pancanal.com

WIRED

Wired.com seems to have redesigned...

http://www.wired.com/

Tabs con estado por cookies

Se reorganizo una página de Compras bajo "Información Financiera".

http://www.pancanal.com/esp/procsales/buy.html

http://www.pancanal.com/eng/procsales/buy.html

En este se implementó tabs, que marcan el indicado y mantienen el estado por medio de Cookies. (lo pueden notar cuando navegan a otra página y regresan)

El cookie guarda el Tab activo por un día.

Nuevas Versiones de Browsers

La semana pasada salió la versión final de Internet Explorer 7, y ayer salió la versión Firefox 2.0.

CICH.org

La Comisión Interinstitucional de la Cuenca Hidrográfica del Canal (CICH) se complace en anunciar que se encuentra disponible su sitio en Internet http://www.cich.org/, con la finalidad de brindar a las organizaciones miembros y al público en general, información sobre la Cuenca Hidrográfica del Canal de Panamá (CHCP) y los trabajos que adelanta esta Comisión en esta área.
En este sitio, encontrarán secciones con información sobre: los representantes y colaboradores de la Comisión, los resultados del Programa de monitoreo ANAM-ACP, la CHCP, publicaciones, mapas relevantes, así como también información sobre los proyectos que se desarrollan en la Cuenca, entre otros.

Los invitamos a visitar este sitio.

Newsticker en Flash

Hoy reemplaza el Newsticker applet de los homepage en inglés y español por uno desarrollado en Flash.

Esto debe agilizar el tiempo de display de estas páginas. (Anteriormente, el Java applet demoraba el display de la página por varios segundos.)

El Newsticker se integra con el backend de las Noticias, que genera un XML de las últimas 10 noticias.

http://www.pancanal.com/esp
http://www.pancanal.com/eng

Blogging Thoughts for the New Year...

Feliz Año 2006. Estos son algunos comentarios sobre Corporate Blogging:

• "The other advantage of internal blogging is that it organises conversation into a long-term manageable form. Two people sharing ideas via blogs is a lot more permanent, viral and useful for the company than two people sharing the same information over by the watercooler."
• Tipos de Blogs

Via Google Search

PanCanal.com 2005

El sitio rediseñado de www.pancanal.com esta "live".

Gatun Webcam

Ya la webcam de Gatún ahora tiene nuevas dimensiones...

• http://www.pancanal.com/esp/photo/camara.html (Español)
• http://www.pancanal.com/eng/photo/camera-java.html (Inglés)

Launch PDF in _blank window from Flash Player

Navegando hoy le encuentre la razón a un problema que aparece en el sitio de http://www.rdya.com/ y muchos otros.

Al abrir un PDF en una ventana "_blank", la nueva ventana donde debe aparecer PDF en Internet Explorer aparece con un mensaje "Action canceled" y al hacer Refresh de la misma ventana, el PDF carga sin problema.

Lamentablemente en PanCanal, hemos tenido que remover todos los llamados de ese tipo. y mostrar el PDF en la pantalla donde se esta navegando (un asunto de usabilidad que personalmente no me gusta).

Nuevas dimensiones de Webcams

Desde ayer, las webcams de Miraflores y Cerro Luisa (que apunta generalmente al Puente Centenario) tienen nuevas dimensiones 640x480. Próximamente en Gatún será igual.

Clic aquí para direcciones en Español e

DOCTYPE

Por horas he buscado la razón por la cual uno de los diseños que entregué, no se mostraba igual cuando la aplicaba uno de los desarrolladores.

El resultado de las investigaciones, estaba en la primera línea de las páginas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

No es lo mismo que...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Recomiendo el uso del primero ( DTD con URI )

Algunos links de interés...

• http://www.webstandards.org/learn/templates/
• http://www.webstandards.org/act/campaign/dwtf/

Generardor para Pruebas de Layout (Netscape 4 mínimo)

3Col_NN4_FMFM - header:
3 columnas para Netscape Navigator 4 con Float Margins + Header

http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

Liquid Layout en NYTimes

Al parecer NY Times online, esta moviendosé al diseño "liquido" en la diagramación de sus artículos.

http://www.nytimes.com/

Diseño de tablas con datos

Observación interesante para el diseño de Tablas.

Congratulations!

Información que llegó mientras estuve de vacaciones...

Your site at: Panama Canal has been selected to receive The American Association Of Webmasters, "Gold" Award. We see all the hard work and dedication that you have put into constructing your web site and your efforts are well deserved. Your site displays: A nice clean Design and Layout of Website, with quality content and informative information for your visitors.

American Association Of Webmasters

SiDMAR

Online desde ayer...
http://www.pancanal.com/esp/hr/sidmar/index.html

Looming pitfalls of work blogs

Extracto de un artículo de la BBC:

"Companies need to accept that the world is moving on and must adopt the new technology and make guidelines.
"Blogs can put a human face on your company. They can also put a demon at the centre of the company PR."

Diseño para ciegos

Visually impaired people are now increasingly able to join in the video gaming fun thanks to an ever-expanding range of audio games.

http://news.bbc.co.uk/2/hi/technology/4112725.stm

Envío de Email

Este es un mensaje interesante de L.A. Times al enviar un lost password a un email.

"Information for accessing your account has been sent to the e-mail address you entered during registration. Please check your e-mail account now for an e-mail from "loginhelp@latimes.com" (be sure to also review your spam or bulk e-mail list just in case ours is inadvertently placed there by your e-mail provider such as AOL, Yahoo!, Hotmail or a workplace organization)."

Informe Anual 2003

El Informe Anual 2003 esta en línea! En inglés y en español.

Entrega de Arroba de Oro 2003 - El Salvador

Hoy nos llegó el Premio "Peoples Choice" Arroba de Oro 2003 - El Salvador. Sí... eso fue hace un año.

Fin de Año Fiscal

He estado muy ocupado desde que regrese de vacaciones. Con máquina nueva en el trabajo, así que reinstalando y configurando aplicaciones. Actualizando, manteniendo y mejorando sitios, retomando asignaciones pendientes, que se suma a la locura laboral de Septiembre en el Canal (fin de año fiscal).

Algunos enlaces y programas que no pueden faltarle a un WebDeveloper:

• Flash Renamer
• VM Ware
• xpPowerToys
• Web Accessories
• ieHTTPHeaders
• SWF Decompiler
• DENIM
• Atomic Mail Sender
• Bookmarklets
• y multiples Internet browsers

Este fue un pequeño respiro, septiembre no acaba... back to work.

Creación de PDF

Un quick "eyes-up":
No es lo mismo crear un PDF desde Word con:

• File > Print
• Adobe PDF > Create Adobe PDF

El primero, crea el PDF sin enlaces (bookmarks)

El segundo sí lo crea con todo.

Proyectores en Flash (stand-alone player)

Que Pesadilla!

Diseñe un flash para ser utilizado como un "intro" para CD.
El intro tiene sus propia navegación, pero al final los enlaces cargan PDF o un ejecutable (.exe)

Este tutorial en Actionscripts.org realmente ayudó, donde explican utilizar (Flash 5):

filename = "test.pdf";
fscommand ("exec", "start\t" + filename);
fscommand ("exec", "cmd\t/c\t" + filename);

Hay que notar que hay más seguridad en el uso de fscommand en Flash MX.
Al final tuve que salvar el FLA de MX en versión Flash 5 y desde Flash 5 generarlo para que el proyector no tuvera tantas restricciones.

Información sobre estas diferencias se encuentra en Macromedia.com:
Proyectors

(P.D.: Pesadilla porque tengo que resolver antes de irme de vacaciones. ;)

Creando Documentos Estáticos con ASP+Access

Encontre este artículo:
Create XML Documents from Access Output que trata sobre la creación de archivos estáticos desde Queries hechos a Access. Contiene un ejemplo que simplemente subí a mi IIS Webserver y funcionó.

Los archivos estáticos incluyen: HTML, XML, DOC (Word), XLS (Excel). Muy útil, especialmente en sistemas donde no se cuenta con Application servers.

90% of All Usability Testing is Useless

It’s much easier to change a whiteboard drawing than a wireframe; easier to change a wireframe than a prototype; and easier to change a prototype than a finished product.

Live Cameras - PanCanal.com

Hoy se hizo pública la nueva Cámara en Línea desde Cerro Luisa: Live Cameras - PanCanal.com.

Link to a PDF page

Esta página tiene un demo e información de como enlazar directamente a páginas dentro de un PDF.

Eso sí, necesitará tener activado "Open PDF in Browser" en las opciones del Acrobat Reader.

Newsletter en HTML

Hace tiempo diseñe un Newsletter en HTML para un Boletín de DataWarehouse. Lo había creado en Dreamweaver, y para enviarlo traté de probar con el sistema que usa ACP-INFO (y todos nosotros): Microsoft Outlook.

Bueno, el problema era que Outlook no aceptaba HTML puro en los emails. Así que era muy limitado. Así que pensé, en usar Word para abrir mi HTML y desde Word enviarlo por email con el feature "Mail Recipient".

Todo funciono bien en Word, el HTML Newsletter se desplegaba con todas las imágenes. Hasta que note que las imágenes, que en el HTML las llamaba de un servidor, se estan codificando en el mismo mensaje y por ende el tamaño del email aumentaba considerablemente.

Deje esta asignación, y recientemente segui buscando solución. Encontre un programa, Atomic Mail Sender que realmente envia el HTML intacto y sin agregarle las imágenes.

Altavista Reboots

AltaVista cambia de imagen...

iMarkup competitor of former Equill.

Este es un software de colaboración para el diseño y discución de páginas que se utiliza a través del mismo browser, no es necesario instalar nada.

Initializing...