Identificación de lenguajes y tecnologías de desarrollo
Producción multimedia. tecnologías y plataformas Módulo 8 Actividad 2 Toni Ruiz Homedes
Índice de contenidos Descripción de la actividad...............................................................................................................................3 Objetivo...........................................................................................................................................................3 Metodología de trabajo.....................................................................................................................................4 Inspección del sitio..........................................................................................................................................4 Identificación de las extensiones de las páginas Web.....................................................................................4 Uso de herramientas de análisis de sitios.......................................................................................................4 Keydomo.com..............................................................................................................................................4 Teqpad.com.................................................................................................................................................5 Netcraft.com................................................................................................................................................5 Mbn.dk/q......................................................................................................................................................5 Análisis del código fuente...............................................................................................................................7 Firebug ........................................................................................................................................................7 Web Developer Toolbar..............................................................................................................................8 Nacional Geographic.........................................................................................................................................9 Inspección del sitio..........................................................................................................................................9 Identificación de las extensiones de las páginas Web...................................................................................10 Uso de herramientas de análisis de sitios.....................................................................................................10 Análisis del código fuente.............................................................................................................................11 Solución final.................................................................................................................................................14 Microsoft...........................................................................................................................................................15 Inspección del sitio........................................................................................................................................15 Identificación de las extensiones de las páginas Web...................................................................................15 Uso de herramientas de análisis de sitios.....................................................................................................16 Análisis del código fuente.............................................................................................................................16 Solución final.................................................................................................................................................17
Descripción de la actividad En esta actividad se deberán identificar los lenguajes de programación y tecnologías de desarrollo utilizados para crear los sitios Web siguientes: •
http://www.nationalgeographic.com.es
•
http://www.microsoft.com
Además de nombrar el lenguaje y la tecnología se debe explicar como se supone que podría estar implementada la solución (tipos de servidores necesarios, comunicación entre ellos, etc.). Por ejemplo, la solución podría estar basada en un servidor Linux con servidor Web Apache utilizando PHP en el mismo servidor que accede a una base de datos. Otro requisito de la actividad es indicar si el lenguaje de programación se ejecuta en la parte cliente o por el contrario en la parte servidor.
Objetivo El objetivo de esta actividad es descubrir los lenguajes y las tecnologías que se han usado para implementar las Web propuestas, conocer herramientas para su detección y aprender a determinar cuales de estos lenguajes/tecnologías serían adecuados para implementar un proyecto Web concreto.
Metodología de trabajo Se ha analizado cada uno de los portales llevando a cabo los siguientes pasos (no necesariamente en orden): 1. Inspección del sitio 2. Identificación de las extensiones de las páginas Web 3. Uso de herramientas de análisis de sitios 4. Análisis del código fuente
Inspección del sitio Navegación normal por el sitio, identificando someramente los elementos presentes en él y elucubrando qué posibles tecnologías pueden generar una página Web como la presente
Identificación de las extensiones de las páginas Web Conforme se va navegando por el portal, se va mirando qué extensión tienen las páginas que se van cargando: html, php, asp, jsp. En multitud de ocasiones, un tipo de archivo ya te está indicando los lenguajes de programación empleados y te permite intuir sobre qué plataformas de desarrollo
Uso de herramientas de análisis de sitios Se han usado distintas herramientas on-line de análisis de Web, básicamente para obtener datos sobre el servidor en donde se aloja. Se han empleado los siguientes:
Keydomo.com http://www.keydomo.com/spider.php Este portal nos informa del tipo de servidor en el que está ubicado un sitio Web, así como la plataforma sobre la que se ha desarrollado. Además lee los metadatos presentes y revisa el buen funcionamiento de los links presentes
Teqpad.com http://www.teqpad.com/index Este portal nos ha sido menos útil para este trabajo. Informa básicamente de métricas asociadas a ese sitio (tráfico, valor económico), analiza si el portal es visible desde los principales buscadores, lee los metadatos, etc. Sin embargo, da muy poca información acerca del servidor: Solamente nos indica el tipo.
Netcraft.com http://news.netcraft.com/ Quizás el más completo en cuanto a información del servidor. Informa del tipo de servidor, dirección IP, ubicación geográfica, etc. Lo más curioso es que ofrece un historial del hosting del sitio a lo largo de su vida. Así se puede observar los distintos cambios tecnológicos que ha sufrido.
Mbn.dk/q http://mbn.dk/q/ Muy semejante a Keydomo, informa del tipo de servidor y de la plataforma de desarrollo. También muestra el código fuente de la pantalla.
El sitio tiene una pega: no es capaz de interpretar nombres de dominio compuestos, del tipo “.com.es”. Se ha intentado obtener información de http://www.nationalgeographic.com.es y se ha obtenido un mensaje de error por respuesta. Sin embargo, al entrarle http://www.nationalgeographic.com.es/2009/12/23/espiritus_inquietos.html, sí se ha conseguido un análisis satisfactorio
Análisis del código fuente Seguimiento del código fuente de algunas de las páginas del portal, identificando las declaraciones, scripts, objetos e imágenes incrustadas, importaciones, etc. Nos hemos apoyado en diversos plug-ins de Firefox para poder realizar el estudio de manera más eficiente, además de la. Concretamente, se han usado los siguientes: 1. Firebug 2. Web Developer Toolbar
Firebug http://getfirebug.com/
Se trata de un plug-in de Firefox que nos permite monitorizar los códigos HTML, CSS y javascript a medida que vamos navegando por un sitio Web. El HTML se ve en forma de árbol jerárquico, permitiéndonos ir descubriendo los elementos a medida que vamos abriendo las ramas. También nos permite hallar el código asociado a una parte del portal simplemente señalándolo sobre el portal y seleccionando una opción del menú asociado al botón derecho del ratón. A diferencia del código fuente original, Firebug también presenta aquel código que no está presente en el código directamente, pero se está usando (está referenciado en el código). Se pueden ver los ficheros CSS, ficheros de javascript, otros documentos HTML que se cargan en frames, etc
Web Developer Toolbar https://addons.mozilla.org/es-ES/firefox/addon/60
Esta herramienta es muy útil para el desarrollo de entornos Web. Tiene diferentes funcionalidades, aunque para esta práctica solamente se ha usado la opción de desactivar los estilos del portal. De esta manera es más fácil identificar los elementos de la página Web con su código fuente.
Nacional Geographic http://www.nationalgeographic.com.es
Inspección del sitio De la navegación por el portal se puede extraer varias conclusiones: •
Estamos delante de una Web compleja: tanto por su tamaño en contenido, como por sus funcionalidades. Hay información asociada a la revista Nacional Geographic España desde 1997 hasta la actualidad. Además de la información de la revista, tiene animaciones interactivas. También es complejo el sistema de gestión de anuncios, pues una misma página tiene distintos cada vez que uno entra en ella.
•
De la inspección de los anuncios (viendo las propiedades con menú del botón derecho), se observa que hay tanto gifs animados, como archivos de Flash. Indirectamente, está presente el lenguaje de programación ActionScript: probablemente los anuncios no los hayan desarrollado los creadores del portal, sino que las propias empresas anunciadas los hayan cedido como ficheros ya compilados, sin ninguna posibilidad de manipulación por parte de los webmasters
•
Las animaciones interactivas también son ficheros de Flash, así como los vídeos presentes en el portal. Es posible que los vídeos se hayan pasado a fichero flv sin pasar por una programación en ActionScript, sino utilizando algún tipo de motor ya existente. En cambio, probablemente el lenguaje de programación haya sido usado en las animaciones
•
Vista la cantidad de información presente, es harto improbable que esta Web se esté manteniendo vía HTML estático. Seguramente se utiliza alguna solución de Web dinámica. ¿Cuál? Debemos analizar las entrañas del código para verlo.
En esta imagen se puede ver la misma página del portal. En la primera ocasión, el anuncio de la derecha es un GIF animado. En la segunda ocasión se trata de un Flash
Identificación de las extensiones de las páginas Web Observando la extensión de las páginas cargadas, vemos que todas son “html”. Esto ya descartaría que la página Web esté basada en una plataforma java (extensión ”jsp”), ASP (la plataforma antigua, no la ASP.NET, extensión “asp”) o XAMPP (al menos usando el lenguaje de programación PhP, de extensión “php”)
Uso de herramientas de análisis de sitios De las herramientas sacamos las siguientes conclusiones: Tipo de Servidor
MicrosoftIIS/6.0
Sistema Operativo del servidor
Windows Server 2003
X-Powered by
ASP.NET
Según lo que nos indica las herramientas on-line, al parecer esta Web se basaría en ASP.NET. Veremos si analizando el código podemos encontrar alguna pista más que lo ratifique
Netcraft nos informa del histórico de hosting:
Sistema Operativo
Servidor
Último cambio
Proveedor de Servicios de Internet
Dirección IP
CONGOSTAUTISME acens technologies Barcelona Co-location services
217.116.15.51 Windows Server 2003 Microsoft-IIS/6.0
19-Dec-2009
ACK STORM, S.L.
62.97.115.136 Linux
Apache
15-Aug-2009
ACK STORM, S.L.
62.97.115.136 Linux
Apache
16-May-2009
ACK STORM, S.L.
62.97.115.136 Linux
Apache
29-Nov-2008
ACK STORM, S.L.
62.97.115.136 Unknown
Apache
15-Mar-2008
ACK STORM, S.L.
62.97.115.136 Linux
Apache/2.0.46 Red Hat 14-Jan-2008
ACK STORM, S.L.
62.97.115.136 Linux
Apache/2.0.46 Red Hat 15-Jul-2006
ACK STORM, S.L.
62.97.115.136 Linux
Apache/2.0.46 Red Hat 13-May-2005
Parece ser que hace muy poco que se ha decidido cambiar de proveedor de servicios y de plataforma. Sabemos que el servidor es Microsoft-IIS/6.0. Si asumimos como cierto que la tecnología de desarrollo es ASP.NET, sería muy probable que la base de datos (BDD) asociada fuera SQL Server, también de Microsoft. No obstante, programar de nuevo todo un entorno Web suele ser más sencillo que migrar los datos de un sistema gestor de BDD a otro. Teniendo en cuenta esto, viendo que anteriormente la Web estaba en un servidor Linux, es muy probable que estuviera programada en LAMPP, con lo que la base de datos asociada podría ser PostgreSQL o MySQL. No obstante, todo son elucubraciones. También podría ser que la BDD fuera Oracle, ya que empresas grandes suelen optar por tener los datos en este soporte. Casi seguro que la base de datos se encuentra en un servidor distinto del servidor Web. Es la opción por la que suelen apostar las grandes empresas, y la más probable si no se ha migrado de tipo de base de datos.
Análisis del código fuente Viendo el código de la página principal de la Web, se observa que el fichero se declara como XHTML 1.0 estricto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
Se puede ver también que se usa hojas de estilo en cascada (CSS): <link type="text/css" rel="stylesheet" href="/css/thickbox.css" />
Se usa javascript codificado directamente sobre el fichero html: <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script>
También se llama a ficheros javascript (extensión : <script type="text/javascript" src="/js/jquery.pack.js"></script> <script type="text/javascript" src="/js/jquery.watermark.pack.js"></script>
Se observa que el cuerpo de la página HTML se encuentra dentro de un formulario: <form method="post" action="/" id="aspnetForm">
El hecho de que el cuerpo esté dentro de un formulario y el identificador se que le ha dado a éste, nos hace pensar en la tecnología ASP.NET. Es raro, pues según wikipedia las páginas desarrolladas en esta plataforma deben tener extensión “aspx”. No obstante, en los foros hay gente que habla de ASP.NET con ficheros “html”, con lo que deduzco que debe ser una opción posible. Otra pista para pensar que ASP.NET es la plataforma: en el código aparecen sentencias con comandos tipo “_VIEWSTATE” o “_EVENTVALIDATION”. Aunque desconozco para qué sirven, parece ser que están asociados a este tipo de tecnología: <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQzOTcwNzQxNw9kFgJmD2QWBAIBD2QWBAIdDxYCHgRocmVmBRUvc2tpbnM vbmdtL3NjcmVlbi5jc3NkAh4PFgIfAAUSL3NraW5zL25nbS9pZTYuY3NzZAIFEGRkFgwCBw9kFgJmDxY CHgdWaXNpYmxlZ2QCCQ9kFgJmDxYCHwFnZAILDxYCHgRUZXh0BRMyMSBkZSBlbmVybyBkZSAy MDEwZAIND2QWBAIBD2QWAgIBDw8WAh4LTmF2aWdhdGVVcmwFFy9sb2dpbi5odG1sP1JldHVyblV ybD0vZGQCAg8WAh8BaBYCAgcPDxYCHwMFGC9sb2dvdXQuaHRtbD9SZXR1cm5Vcmw9L2RkAhUPZ BYCAgIPZBYCAgUPDxYCHwJlZGQCIw9kFgICAQ9kFgJmD2QWAgIDD2QWAmYPZBYCAgEPFgIfAW dkZDcQuRSYjmMFVcrgc2DHCtVlrIug" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLs5O7kBQKHuuqpDQKBsJpCHG/3q6V+kiop/YuAcDP2lOtpmK8=" /> </div>
Indicaré también ASP.NET como lenguaje de programación, además de plataforma, pues las sentencias anteriores son inherentes a ASP.NET. Es muy probable que la Web use en lado del servidor también C#, o VB.NET, o J#, pero lo desconozco.
Esta Web no usa directamente PhP, no obstante en varios fragmentos de código en javascript se puede ver que el objeto de esos scripts es montar una llamada a una página con extensión “php”, para cargarse en un frame de la página principal <iframe id='a6107702' name='a6107702' src='http://anuncios.eljueves.es/delivery/afr.php? zoneid=54&amp;cb=INSERT_RANDOM_NUMBER_HERE' framespacing='0' frameborder='no' scrolling='no' width='728' height='90'><a href='http://anuncios.eljueves.es/delivery/ck.php? n=aedafe7d&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://anuncios.eljueves.es/delivery/avw.php? zoneid=54&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=aedafe7d' border='0' alt='' /></a></iframe>
Solución final Después de haber realizado todo el análisis anterior, no se tiene una identificación al 100% veraz de cómo está implementada la Web. Los resultados que se presentan son suposiciones, debido a que no se tienen suficientes conocimientos para poder ir más allá de este punto. Lenguaje de programación
Ejecución en:
ActionScript
Cliente
XHTML
Cliente
CSS
Cliente
Javascript
Cliente
ASP.NET
Servidor
PhP
Servidor
SQL
Servidor
Plataforma tecnológica
ASP.NET
Tipo de Servidor
MicrosoftIIS/6.0
Sistema Operativo del servidor
Windows Server 2003
Sobre la base de datos, hago una suposición en función del histórico: Sistema gestor
PostgreSQL
Tipo de Servidor
Apache
Sistema Operativo del servidor
Linux
Microsoft http://www.microsoft.com
Inspección del sitio El portal de esta empresa es enorme, como era de esperar por otra parte. El menú es apabullantemente complejo, con demasiadas opciones. Por esa opción, se ha optado por una visita aleatoria por distintas páginas. Se ha podido comprobar que el diseño es muy heterogéneo. Cada familia de productos tiene un aspecto que difiere mucho del de las otras, provocando que el usuario tenga dudas de si todavía se encuentra en el mismo dominio. Cosa que, en ocasiones, sí es verdad. Microsoft, no se sabe con qué criterio, ha decidido que algunos productos tengan sitio propio y otros no. No se acaba de entender que Zune, Xbox o la Office tengan portal propio, y en cambio Windows7 se encuentre dentro de una carpeta de Microsoft.com. Sé que este no es un aspecto a tratar en este trabajo, pero me ha chocado bastante. En cuanto a los medios expuestos, al principio solamente se ha observado texto e imágenes fijas. Solamente después de instalar el plug-in de Microsoft Silverlight se ha podido tener una experiencia Web más animada. Silverlight viene a ser la respuesta de esta empresa al archiconocido Adobe Flash. Se ha observado que varios ficheros que antes eran imágenes estáticas (gif o jpg) han sido cambiados por objetos Silverlight. Se ha observado el código fuente y aparentemente no hay ningún control para cargar una imagen o un objeto en función de la configuración del navegador. Se entiende que debe haber un código que se ejecuta en el servidor. Un pequeño apunte que no es importante para esta práctica pero que es cuanto menos curioso (¿decepcionante?) para el mundo Web. Estaba visitando esta Web desde un sistema operativo Linux (Ubuntu 9.10), y el complemento para Silverlight no me ha funcionado correctamente. Dejando de lado los apuntes y volviendo al tema que nos ocupa, no cabe ninguna duda de que un portal de esta envergadura se mantiene vía un esquema de Web dinámica más base de datos. En el caso de Microsoft, es de esperar que use sus propias soluciones.
Identificación de las extensiones de las páginas Web Observando la extensión de las páginas cargadas, vemos que todas son “aspx”. Esto ya nos está indicando que el framework es ASP.NET ¿Alguien se esperaba otra cosa?
Uso de herramientas de análisis de sitios De las herramientas sacamos las siguientes conclusiones: Tipo de Servidor
Microsoft-IIS/7.5
Sistema Operativo del servidor
Windows Server 20081
X-Powered by
ASP.NET
Como Microsoft tiene su propia solución de Sistema Gestor de base de datos, se debe pensar que es la que está usando en su portal informativo/promocional: SQL Server. Seguro que la base de datos se encuentra en un servidor distinto del servidor Web, ya que probablemente sea compartida por otros portales asociados a Microsoft
Análisis del código fuente El código fuente de la página principal de Microsoft.com es sorprendentemente corto:
Viendo el código de la página principal de la Web, se observa que el fichero se declara como XHTML transicional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
Se puede ver también que se usa hojas de estilo en cascada (CSS): <link href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&m=cspMscomHomePageBase" typ e="text/css" rel="stylesheet">
También se llama a ficheros javascript (extensión js): <script type="text/javascript" src="http://i3.microsoft.com/shared/core/2/swe/3.5.0.0/3.5.30729.1/MicrosoftAja x.js">
Fijarse que en la línea anterior se llama a una fuente llamada MicrosoftAjax.js. Es posible que este portal esté usando la librería de AJAX para ASP.NET.
1
En el histórico de Netcraft hay veces que no detecta el servidor y otras que dice que es Windows Server 2008. Lo más lógico es pensar que se trata de algún tipo de problema de identificación, y que el SO no varía.
Hay que fijarse también en los objetos Silverlight: <object id="sl01_object" width="690" height="325" data="data:application/x-silverlight," type="application/xsilverlight"> <param value="Transparent" name="background"/> <param value="false" name="enableFramerateCounter"/> <param value="/global/En/us/RichMedia/WindowPane_R2.xaml" name="source"/> <param value="true" name="windowless"/> <param value="24" name="maxFramerate"/> <param value="__slEvent0" name="onError"/> </object>
De la misma manera que para el portal anterior, es este también se va a apuntar ASP.NET como lenguaje de programación, pues se considera que hay funciones e instrucciones presentes en el código fuente que son inherentes a éste
Solución final
Lenguaje de programación
Ejecución en:
Microsoft Silverlight
Cliente
XHTML
Cliente
CSS
Cliente
Javascript
Cliente
ASP.NET
Servidor
AJAX
Servidor/Cliente2
SQL
Servidor
Plataforma tecnológica
ASP.NET
Tipo de Servidor
Microsoft-IIS/7.5
Sistema Operativo del servidor
Windows Server 2008
2
Se considera AJAX como un compendio de herramientas cliente/servidor
Sobre la base de datos, hago la suposición más probable: Sistema gestor
Microsoft SQL Server 2008
Tipo de Servidor
Microsoft-IIS/7.5
Sistema Operativo del servidor
Windows Server 2008