Hey Leute haben gerade die Steam Website angeschaut und bemerkt, dass es nicht Flash verwendet.Website verwendet keinen Blitz, also was benutzt es?
Welche Technologien werden zum Erstellen der Seite verwendet? Zum Beispiel die Schieberegler, um durch die verschiedenen Spiele zu scrollen, wie genau passiert das?
Vielen Dank im Voraus für alle Antworten.
Javascript und viel davon. Von der Seite Kopf:
<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>
Bemerkenswerte Bibliotheken: Skriptaculous. Prototyp. swfobject.js! Seltsamerweise soll das letzte eigentlich nützlich sein für das Einbetten von Flash, obwohl ich nicht sicher bin, ob es auf dieser Seite verwendet wird (vielleicht nur an anderer Stelle auf der Seite für Filme oder Audio).
Der scrollbare Abschnitt "Spiele" ist höchstwahrscheinlich ein <div> mit einer Überlauf-Bildlaufleiste. Die Pfeile sind wahrscheinlich Links zu einem Javascript Aufruf. Da es eine feste Breite hat, verwendet es nur JavaScript, um das Feld um "Breite x" zu scrollen.
In den meisten Fällen ist diese Seite nur JavaScript, HTML und CSS. Es ist nicht unbedingt AJAX, obwohl es verlangen kann, dass diese Bilder vom Server "on demand" die Serverlast verringern, anstatt sie vorher abzurufen.
Ich denke, die "Scroll horizontal by width X" ist wahrscheinlich wirklich zutreffend, und bezweifle, dass es sogar einen Vorteil hätte, alle Bilder nicht vorher zu laden, und das Fehlen irgendeiner sichtbaren Ladezeit bedeutet, dass diese Welpen keine Zeit verschwenden während des Scrollens geladen wird. Das ist eine großartige Technik, die ich für meine eigenen Seiten verwenden muss. – Kzqai
Sie verwenden JavaScript für all diese Sachen. Wenn Sie sich die Seitenquelle ansehen, können Sie sehen, dass die Bibliotheken prototype.js und scriptaculous beide auf der Seite enthalten sind.
Meine tolle Chrome Sniffer Chrome-Erweiterung sagt mir, dass diese Seite script.aculo.us verwendet, eine Javascript-Bibliothek ähnlich wie MooTools und jQuery. Dynamisches Javascript wird heutzutage für viele nette Effekte verwendet.
alternativ: http://builtwith.com/store.steampowered.com und https://addons.mozilla.org/en-US/firefox/addon/10229 – davidosomething
@davidosomething - Ich hatte builtwith.com vergessen. Danke, dass du mich erinnert hast! :) – ABach
Große Ressource, builtwith.com, hatte nicht davon gehört, danke, dass Sie darauf hingewiesen haben. – Kzqai
Wie Sie markiert, Ajax oder andere Formen von Javascript.
meisten keine-Flash-Lösungen sind wahrscheinlich entweder eine Kombination von XHTML und Javascript (oft JS Bibliotheken wie jQuery oder Prototype oder Microsofts Flash-Konkurrent mit sein -. Silverlight
Der Dampf Website scheint etwas mit zu ganz im Sinne des sehr populären und jQuery Tools (Scrollable Plugins) .Das scrollbare Plugin mit jQuery Tools ist wirklich schnell und einfach einzurichten und wirklich nützlich für die Anzeige von Inhalten und Bildern.Ich habe es auf mehreren Kunden Websites mit positiven verwendet Ergebnisse
UPDATE: Beim Betrachten der Quelle scheint Steam tatsächlich die ebenfalls beliebte Prototype-Bibliothek zu verwenden, aber es ist ein sehr ähnliches Konzept wie jQuery und das Scroll-Label-Plugin.
hey, es verwendet script.aculo.us, das in seinem Namen auf Prototyp basiert. Ich habe niemanden gesehen, der das bemerkt hat.
Prototyp, jQuery, MooTools und so sind nur Frameworks. Sie können dasselbe tun, wenn Sie Ihre eigenen JavaScript-Funktionen schreiben. Sie bieten nur fertige Funktionen für AJAX, Animationseffekte, erweiterte DOM-Traversale, Dias usw. Und der Grund, warum ich sie verwende, ist die Bewegungsglätte - ich habe meine eigenen Funktionen geschrieben, als ich jQuery nicht einbeziehen konnte.
Sie können an diesem einen Blick: http://w3techs.com/sites/info/steampowered.com
Neben Tchalvak Antwort (Ich kann noch nicht kommentieren), swfobject, die verwendet wird, Flash-Objekte einbetten, für Anhänger verwendet wird, die in einem dargestellt Ecke, wenn Sie eine detaillierte Beschreibung eines Spiels anzeigen möchten.
Es wird auch verwendet, um Trailer vor dem Download der hochwertigen (in der Regel HD) Version als "Media" -Element im Steam-Client zu sehen.
Es ist diese neue Erfindung namens HTML und jQuery. – animuson
Eigentlich -nicht- jQuery, anscheinend. – Kzqai
Jemand hat diese Frage zum Schließen markiert und gesagt, dass sie auf superuser.com gehört. Das ist absurd; Wie kann ein Nicht-Programmierer beschreiben, welche Programmierung hinter der Steam-Site stattfindet? –