Hola chicos, he estado mirando el sitio web Steam y noté que no usa Flash.no usa el flash, entonces, ¿qué está usando?
¿Qué tecnologías se utilizan para crear la página? Por ejemplo, la barra deslizante para desplazarse por los diferentes juegos, ¿cómo exactamente está sucediendo eso?
Gracias de antemano por cualquier respuesta.
Javascript, y mucha. De la cabeza de la página:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Steam</title>
<link href="http://cdn.store.steampowered.com/public/css/styles_storev5.css?v=221260115" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]> <link href="http://cdn.store.steampowered.com/public/css/styles_storev5_ie6.css?v=3855293424" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]> <style type="text/css"> .iepoupfix{ display: block; } </style> <![endif]-->
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/swfobject.js?v=3216748271&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/prototype-1.6.0.2.js?v=1627908004&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/scriptaculous/scriptaculous.js?v=1333279996&l=english&load=effects,controls,slider"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/javascript.js?v=853265233&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/main.js?v=199395227&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/jserrorreport.js?v=19341832&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/header.js?v=318945778&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/search.js?v=630051104&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/cluster.js?v=4033443305&l=english"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Steam Search" href="http://store.steampowered.com/public/open_search.xml">
</head>
Bibliotecas notables: Scriptaculous. Prototipo. swfobject.js! Extrañamente, el último se supone que es útil para incrustar flash, aunque no estoy seguro de si está en uso en esa página (tal vez en cualquier otro sitio del sitio para películas o audio).
La sección de "juegos" desplazables es muy probablemente <div> con una barra de desplazamiento de desbordamiento. Las flechas son probablemente enlaces a una llamada javascript. Como es de ancho fijo, solo usa javascript para desplazarse por "ancho x".
En su mayor parte, esta página es solo JavaScript, HTML y CSS. No es necesariamente AJAX, aunque puede solicitar esas imágenes del servidor "a pedido" para disminuir la carga del servidor, en lugar de recuperarlas previamente.
Creo que el "desplazamiento horizontal por el ancho X" es probablemente muy útil, y dudo que incluso se obtenga ningún beneficio al no cargar todas las imágenes, y la falta de tiempo de carga implica que esos cachorros no están perdiendo el tiempo siendo cargado sobre la marcha mientras se desplaza. Esa es una gran técnica que tendré que usar para mis propias páginas. – Kzqai
Están usando JavaScript para todo esto. Si observa el origen de la página, puede ver que las bibliotecas prototype.js y scriptaculous están incluidas en la página.
Mi increíble Chrome Sniffer Chrome extensión me dice que este sitio está utilizando script.aculo.us, que es una biblioteca de Javascript similar a MooTools y jQuery. Javascript dinámico se está utilizando para muchos efectos aseados en estos días.
alternativamente: http://builtwith.com/store.steampowered.com y https://addons.mozilla.org/en-US/firefox/addon/10229 – davidosomething
@davidosomething - Me había olvidado de builtwith.com. ¡Gracias por recordarme! :) – ABach
Gran recurso, builtwith.com, no había oído hablar de él, gracias por señalarlo. – Kzqai
Me gusta etiquetado, ajax u otras formas de javascript.
mayoría de las soluciones no-flash son propensos a estar utilizando ya sea una combinación de XHTML y Javascript (a menudo las bibliotecas JS como jQuery o Prototype o competidor de flash de Microsoft -. Silverlight
La página web vapor parece estar usando algo en la línea del muy popular jQuery y jQuery Tools (Scrollable). El plugin desplegable con jQuery Tools es realmente rápido y fácil de configurar y muy útil para mostrar contenido e imágenes. Lo he usado en varios sitios web de clientes con resultados
ACTUALIZACIÓN: mirando la fuente, parece que Steam está utilizando realmente la biblioteca Prototype también popular, pero es un concepto muy similar a jQuery y al plugin scrollabel.
hey, usa script.aculo.us, que en su nombre se basa en Prototype. No vi a nadie notando eso.
prototipo, jQuery, MooTools y otros son solo frameworks. Puede hacer lo mismo si escribe sus propias funciones de JavaScript. Proporcionan funciones listas para usar para AJAX, efectos de animación, avance DOM avanzado, diapositivas, etc. Y el motivo por el que los estoy utilizando es la suavidad de la animación: escribí mis propias funciones cuando no podía incluir jQuery.
Es posible que tenga un vistazo a esto: http://w3techs.com/sites/info/steampowered.com
Además de la respuesta de Tchalvak (que no puedo comentar todavía), swfobject, que se utiliza para incrustar objetos Flash, se utiliza para remolques que se muestran en una esquina cuando eliges ver una descripción detallada de un juego.
También se usa para obtener una vista previa de los Trailers antes de descargar la versión de alta calidad (generalmente HD) como un elemento "Media" en el cliente Steam.
Es esta nueva invención llamada HTML y jQuery. – animuson
En realidad, no, jQuery, al parecer. – Kzqai
Alguien marcó estas preguntas para el cierre diciendo que pertenece en superuser.com. Eso es absurdo; ¿Cómo podrá un no programador describir qué programación hay detrás del sitio de Steam? –