अरे लोग बस Steam वेबसाइट पर देख रहे थे और देखा कि यह फ्लैश का उपयोग नहीं करता है।वेबसाइट फ़्लैश का उपयोग नहीं करती है तो इसका उपयोग क्या कर रहा है?
पृष्ठ बनाने के लिए कौन सी तकनीकों का उपयोग किया जा रहा है? उदाहरण के लिए अलग-अलग खेलों के माध्यम से स्क्रॉल करने के लिए स्लाइड बार, यह वास्तव में कैसा चल रहा है?
किसी भी उत्तर के लिए अग्रिम धन्यवाद।
जावास्क्रिप्ट, और इसके बहुत सारे। पृष्ठ के सिर से:
<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>
उल्लेखनीय पुस्तकालय: पवित्र। प्रोटोटाइप। swfobject.js! आश्चर्यजनक बात यह है कि आखिरी बार फ्लैश को एम्बेड करने के लिए उपयोगी माना जाता है, हालांकि मुझे यकीन नहीं है कि यह उस पृष्ठ पर उपयोग में है (शायद फिल्मों या ऑडियो के लिए साइट पर कहीं और)।
स्क्रोल करने योग्य "गेम" अनुभाग एक ओवरफ्लो स्क्रॉलबार के साथ <div> की संभावना है। तीर शायद जावास्क्रिप्ट कॉल के लिंक हैं। चूंकि यह निश्चित चौड़ाई है, इसलिए यह "चौड़ाई x" बॉक्स को स्क्रॉल करने के लिए जावास्क्रिप्ट का उपयोग करता है।
अधिकांश भाग के लिए यह पृष्ठ केवल जावास्क्रिप्ट, एचटीएमएल, और सीएसएस है। यह जरूरी नहीं है कि AJAX, हालांकि यह सर्वर की लोड को कम करने के लिए "मांग पर" सर्वर से उन छवियों का अनुरोध कर सकता है, बजाय उन्हें प्रीफेच करने की बजाय।
मुझे लगता है कि "चौड़ाई एक्स द्वारा क्षैतिज स्क्रॉल" शायद वास्तव में उपयुक्त है, और संदेह है कि सभी छवियों को प्रीलोड करने से कोई लाभ भी नहीं होगा, और किसी भी दृश्य लोड समय की कमी का तात्पर्य है कि उन पिल्ले समय बर्बाद नहीं कर रहे हैं जब आप स्क्रॉल करते हैं तो फ्लाई पर लोड किया जा रहा है। यह एक महान तकनीक है जिसे मुझे अपने पृष्ठों के लिए उपयोग करना होगा। – Kzqai
वे इन सभी चीजों के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं। यदि आप पृष्ठ स्रोत को देखते हैं तो आप देख सकते हैं कि प्रोटोटाइप.जेएस और स्क्रिप्चुअल लाइब्रेरी दोनों पृष्ठ द्वारा शामिल हैं।
मेरा भयानक क्रोम स्निफ़ेर क्रोम एक्सटेंशन मुझे बताता है कि यह साइट script.aculo.us का उपयोग कर रही है, जो MooTools और jQuery के समान जावास्क्रिप्ट लाइब्रेरी है। इन दिनों बहुत से स्वच्छ प्रभावों के लिए गतिशील जावास्क्रिप्ट का उपयोग किया जा रहा है।
वैकल्पिक रूप से: http://builtwith.com/store.steampowered.com और https://addons.mozilla.org/en-US/firefox/addon/10229 – davidosomething
@ डेविडोडोमिंग - मैं buildwith.com के बारे में भूल गया था। मुझे याद दिलाने के लिये धन्यवाद! :) – ABach
ग्रेट संसाधन, builtwith.com, इसके बारे में नहीं सुना था, इसे इंगित करने के लिए धन्यवाद। – Kzqai
जैसे आप टैग किए गए, AJAX, या जावास्क्रिप्ट के अन्य रूपों की तरह।
अधिकांश कोई भी फ़्लैश समाधान या तो XHTML और जावास्क्रिप्ट (जैसे jQuery या Prototype, या माइक्रोसॉफ्ट के फ़्लैश प्रतियोगी के रूप में अक्सर जे एस पुस्तकालयों के संयोजन का उपयोग होने की संभावना है -। Silverlight
भाप वेबसाइट कुछ का उपयोग कर किया जा रहा है बहुत लोकप्रिय jQuery और jQuery Tools (Scrollable प्लगइन) के साथ-साथ। jQuery टूल्स के साथ स्क्रॉल करने योग्य प्लगइन वास्तव में त्वरित और आसान है और सामग्री और छवियों को प्रदर्शित करने के लिए वास्तव में उपयोगी है। मैंने इसे कई क्लाइंट की वेबसाइटों पर सकारात्मक के साथ उपयोग किया है परिणाम
अद्यतन: स्रोत को देखते हुए ऐसा लगता है कि स्टीम वास्तव में भी लोकप्रिय प्रोटोटाइप लाइब्रेरी का उपयोग कर रहा है लेकिन यह jQuery और स्क्रॉलबेल प्लगइन के लिए एक बहुत ही समान अवधारणा है।
हे, यह script.aculo.us का उपयोग करता है, जो इसकी ओर से प्रोटोटाइप पर आधारित है। मैंने इसे किसी को भी नहीं देखा।
प्रोटोटाइप, jQuery, म्यूटूल और ऐसे ही ढांचे हैं। यदि आप अपना खुद का जावास्क्रिप्ट फ़ंक्शन लिखते हैं तो आप वही कर सकते हैं। वे सिर्फ AJAX, एनीमेशन प्रभाव, उन्नत डोम ट्रैवर्सल, स्लाइड्स इत्यादि के लिए तैयार करने के लिए फ़ंक्शन प्रदान करते हैं और कारण मैं उनका उपयोग कर रहा हूं एनीमेशन चिकनीता है - जब मैंने jQuery शामिल नहीं किया था तो मैंने अपने कार्यों को लिखा है।
आप इस पर एक नज़र हो सकता है: http://w3techs.com/sites/info/steampowered.com
Tchalvak के उत्तर के अतिरिक्त (मैं अभी तक कोई टिप्पणी नहीं कर सकते हैं), swfObject, जो फ्लैश वस्तुओं एम्बेड करने के लिए प्रयोग किया जाता है, ट्रेलरों जो एक में दिखाया जाता है के लिए प्रयोग किया जाता है जब आप किसी गेम का विस्तृत विवरण देखना चुनते हैं तो कोने।
स्टीम क्लाइंट में "मीडिया" आइटम के रूप में उच्च गुणवत्ता वाले (आमतौर पर एचडी) संस्करण को डाउनलोड करने से पहले ट्रेलरों का पूर्वावलोकन करने के लिए भी इसका उपयोग किया जाता था।
यह एचटीएमएल और jQuery नामक यह नया आविष्कार है। – animuson
वास्तव में-नहीं- jQuery, स्पष्ट रूप से। – Kzqai
किसी ने इस प्रश्न को बंद करने के लिए चिह्नित किया है कि यह superuser.com पर है। यह बेतुका है; एक गैर-प्रोग्रामर यह वर्णन करने में सक्षम होगा कि स्टीम साइट के पीछे प्रोग्रामिंग क्या है? –