20 مواقع رائعة زائفة فلاش
إن موقع ويب pseudo-Flash هو موقع ويب يبدو وكأنه موقع ويب Flash ، ولكنه في الحقيقة مبني على HTML و CSS القديمين.
عادة ما يكون هناك أيضًا مجموعة من جافا سكريبت لجلب الأشياء إلى الحياة وتقريب الواجهة.
والنتيجة غالبًا ما تتجاوز التوقعات التي نتوقعها من HTML و CSS ، وهذا هو السبب في أننا قد نفترض أن موقع الويب يعتمد على الفلاش. انقر بزر الماوس الأيمن ، على الرغم من ذلك ، وسوف تكون مفاجأة سارة.
أنا مهتم بشدة بمواقع ويب فلاش الزائفة ، وأتحدث عن هذا الموضوع بشكل متكرر. من الواضح أن Flash قد خسر بعضًا من أبعاده (على الرغم من أنه لم يتم اختصاره على الإطلاق) ، وتحول التركيز إلى التقنيات الأساسية للويب (HTML ، CSS ، JavaScript).
هناك سببان لهذا. الأول هو تقني. لقد شجعت أدوات تحسين محركات البحث الأسهل والمحسّنة مثل CMS مثل WordPress ودعم الأجهزة الواسع الأشخاص على دفع الأدوات القياسية إلى أقصى حد.
ثانيًا ، يتعرف الكثير من الأشخاص على كيفية التطوير باستخدام هذه اللغات الأساسية ، وهناك مجتمع كبير مستعد للتخلي عن فوائد Flash لهذه الأدوات المألوفة.
مع العديد من الأسباب لدفع الظرف والابتعاد عن Flash ، فإننا في وسط تحول هائل في تطوير الويب. بدأت مواقع HTML على أنها كيانات ثابتة. مع ظهور AJAX ، شهدنا كيف يمكن لوثيقة ديناميكية أن تغير توقعاتنا. رمي في الرسوم المتحركة ، التحولات والتفاعل ولديك وسيلة مختلفة جذريا.
بعض الضحايا السعداء
هذا التحول يأتي مع عدد قليل من الإصابات التي يرحب بها العديد من الناس (وأنا منهم). أولا من بين هذه الموسيقى الخلفية. أصبح تشغيله بشكل افتراضي على موقع ويب قياسي أمرًا صعبًا على المطور أن ينطلق. لم أعد بحاجة إلى البحث عن زر الإيقاف المؤقت أو كتم الصوت لإغلاق موقع الويب.
ثانيًا ، من غير المرجح أن تختطف مواقع الويب متصفحك الآن. لا تزال بعض مواقع الويب المستندة إلى فلاش تعمل ، بتغيير حجم إطار العرض وتحميل واجهات ملء الشاشة. ومع ذلك ، تظل مواقع الويب الزائفة فلاش في مكانها.
كلمات الحذر
وكما هو الحال في أي اتجاه ، يجب أن نتناول هذا الأمر بحذر. في المقام الأول ، نحن بحاجة إلى ضبط النفس. لمجرد أننا نستطيع القيام بأشياء جذرية باستخدام التمرير في الصفحة ، فإن الرسوم المتحركة والانتقالات لا تعني أنه ينبغي لنا ذلك.
أفضل رهان هو مراعاة الجمهور والمنتج بعناية ، وربما الأهم من ذلك ، تجربة المستخدم. مع وضع هذه الأمور في الاعتبار ، يمكنك تطبيق هذه الأساليب بطريقة إستراتيجية لتعزيز موقعك على الويب.
أمثلة على هذا النمط
1. اميلي Crssrd
في حين أن العديد من الأشياء على اميلي Crssrd جعل موقع الويب يبدو مثل فلاش ، سأركز على واحد. يبدو مؤشر التحميل هنا شيئًا قد نعثر عليه عادةً على موقع ويب Flash (على الرغم من أننا نراه كثيرًا مع وظيفة AJAX أيضًا). تحافظ هذه الآلية على الصور والمحتوى غير الثابت من الظهور قبل أن يتم تحميلها بالكامل ، مما يضمن مشاهدة المستخدمين للمحتوى بشكل صحيح. محمل هنا ، جنبا إلى جنب مع التحولات في الصفحة ، لجعل واجهة سلسة.
2. ستيفان كانشيف
أشياء كثيرة على ستيفان كانشيف كما يردد الموقع الإلكتروني أيضًا المقاربات المستندة إلى الفلاش ، كما أن التلاشي الخفي والأيقونات الخفية للأيقونات أثناء قيامك بالمرور عليها تجعل التفاعل جميلًا. تساعد لوحة المفاتيح المرئية المستخدمين على التركيز على عنصر واحد في كل مرة ويضيف القليل من الإزعاج لإضفاء الحيوية على هذه الصفحة البسيطة. مثال رائع على الاستفادة من شيء بسيط إلى تأثير كبير.
3. العلامة التجارية الجمهورية
لنقدر الجمهورية العلامة التجارية موقع الويب ، يجب على المرء التفاعل معه. تحتوي الحاوية حول الشعار على تفاعل بسيط رائع معها. يستخدم هذا العنصر المستند إلى CSS موضع الماوس لتغيير الحدود القياسية ديناميكيًا ، مما يؤدي إلى إحداث تأثير ثلاثي الأبعاد وضمان أن يبرز الشعار أمام الخلفية الشديدة. هذا النوع من الأشياء يحسن الواجهة والشعور العام للموقع دون الوقوع في الطريق. هذا هو بالضبط ما تريد: الإضافات لا ينبغي أن تتداخل مع سهولة الاستخدام.
4. كوبر
كوبر يتبع نهج شائع لمواقع الويب ذات الصفحة الواحدة. عند تحديد عناصر في التنقل ، يتحول المحتوى ذي الصلة إلى إطار العرض. مع التحولات السلسة ، يبدو موقع الويب كثيرًا مثل Flash ، ولكن يتم إنجازه بلغات الويب القياسية. على الرغم من أن وظائف الموقع جيدة ، فإن كل شيء يفجر على الأجهزة المحمولة. عند الاستفادة من هذه التقنيات ، يجب علينا تقييم تأثيرها على الأجهزة غير القياسية وجمهورنا المعين.
5. Flipboard
Flipboard يحتوي موقع الويب البسيط تمامًا على دوران محتوى معياري جدًا. ما يجعل هذا الموقع يشعر بأن الفلاش شبيه جداً بكيفية توزعه. تتكيف الصفحة بشكل ديناميكي لتناسب متصفحك (مع بعض القيود) ، وهو تأثير قياسي في عالم الفلاش.
6. ماكرى 2010
ماكرة 2010 يوفر التمرير في الصفحة إلى حد كبير مثل موقع كوبر. في هذه الحالة ، يقتصر العرض على المحتوى الذي يحدده المستخدم. لا هو الحل "الصحيح". هم ببساطة يبرهن على إمكانيات غير محدودة للنهج. أقدر مدى سرور موقع الويب هذا: فالرسوم المتحركة رائعة ، ولكنها لا تعترض طريق المحتوى أبدًا. توازن جيد بين النمط وسهولة الاستخدام.
7. 20 أشياء تعلمتها عن المتصفحات والويب
يعد التحويل التفاعلي للصفحة تأثيرًا شائعًا على مواقع الفلاش ، لدرجة أنه تم إنشاء منتجات كاملة فقط للاستفادة من هذه الوظيفة. لهذه الجزئيه، 20 أشياء تعلمتها عن المتصفحات والويب يبين ما هو ممكن ، مما يدل على الآثار التي كانت ممكنة مرة واحدة فقط مع فلاش. هذا الموقع هو جزء من العمل الجاد ومثال رائع على الموقع الإلكتروني القائم على المعايير.
8. إن إل إنجناريا
NL Engenharia هو موقع نموذجي لشركة معمارية. هذا ليس بالضرورة أمرا سيئا. انها تناسب تماما مكانة جيدة. يبدو أنه تم نقله حرفياً من Flash إلى HTML: التنقل المنزلق ، صور ملء الشاشة ، التحجيم الديناميكي ، جميع علامات الفلاش. يعمل ، على الرغم من. والنتيجة جميلة وتمثل الشركة جيدا.
9. ريان سي جونز
ريان سي جونز لديه محفظة جميلة للتصوير الفوتوغرافي. يتم إعطاء نقطة الاهتمام (الصور) بروز ساحقة. إنه مثال رائع لعدم السماح للتكنولوجيا بالوقوف في طريقها. بغض النظر عن الأدوات المستخدمة في بنائه ، فإن النتيجة هي طريقة بسيطة وفعالة لعرض عمل هذا الفرد.
10. ستوديو قانغ المهندسين المعماريين
للوهلة الأولى ، على واجهة الإبداعية والرسوم المتحركة على استوديو قانغ المهندسين المعماريين تبدو بخفة مثل الفلاش. ولكن في حين أن الواجهة فريدة ولا تنسى ، لا يسعني إلا أن أتساءل عما إذا كان ذلك مناسبًا. ومع ذلك ، فإنه يوضح ما يمكن القيام به باستخدام HTML ذي الطراز القديم.
11. DIST الإبداعية
DIST الإبداعية استفاد من HTML بطريقة لا تُعد شيئًا مدهشًا. مع الرسوم المتحركة ومؤشرات التحميل والواجهة السائلة ، يجمع هذا الموقع الإلكتروني بين إبداع أفضل تنسيقات الفلاش والحلول القابلة للاستخدام على HTML. على الرغم من النهج غير المعتاد ، فمن السهل استخدام وتوصيل تفرد الوكالة الإبداعية.
12. رسائل لليابان
رسائل لليابان لا يعني بالضرورة أن ننظر "فلاش". ولكن الرسوم المتحركة واللمسات الخاصة تجعل واجهة سلسة وموت سهلة الاستخدام. والعناصر التفاعلية بارزة ولكن لا تتعطل على الإطلاق. إنه مثال ساطع على كيف يمكن لهذا النوع من الجمالية أن يعزز موقع الويب القياسي.
13. أطلسون
كمطور ، يمكنك بالكاد ننظر Atlason موقع الويب دون الشعور بالرعب. لا أستطيع أن أتخيل العمل الذي ذهب إلى صنع هذا. أنا أحب بشكل خاص أن التصميم يملأ الشاشة ويستفيد كثيرا من العقارات المتاحة. أنا أيضا أحب الطريقة التي تتبع القليل من الاتفاقيات ومع ذلك لا يزال في غاية البساطة للاستخدام.
14. بت بايت بايت
بت بايت بايت تجمع المحتوى ديناميكيًا من مصادر متعددة ، بما في ذلك مدونة المالك وخلاصة Twitter وحساب Forrst. تشكّل خلاصات إطعام الأرواح هذه شيئًا شائعًا إلى حدٍ ما ، لكن هذا الموقع يُظهر أنه لا يحتاج إلى الشعور بالاستقرار على الإطلاق.
15. شكل
شكل يأخذ منهجًا مشابهًا إلى Bit Bit Bit ، ولكنه أكثر توجهاً نحو الصورة ، وهو أمر منطقي نظراً لطبيعة عمله. أحب ذلك ، على الفور ، فأنت لا ترى عمل الوكالة فحسب ، بل يمكنك أيضًا بدء تصفية المحتوى الملائم لك. تكون المحفظة مباشرة على الصفحة الرئيسية ، ومع ذلك فهي تعمل بكامل طاقتها ، حتى مع بقاء موقع الويب سهل الاستخدام.
16. EEHarbor
بينما تستخدم العديد من مواقع الويب المعروضة هنا انتقالات في الصفحة لتغيير المحتوى دون تحديث الصفحة ، بالطريقة EEHarbor هل هو رائع جدا. سرعة الموقع هي سبب كبير لنجاحها. لن تشعر أبدًا أن الرسوم المتحركة الرائعة تعيق المحتوى. انهم يساهمون فقط في صورة عالية الجودة للشركة.
17. ويلز رايلي
واحدة من أكبر القيود على HTML هي مقاومتها لأي شيء آخر غير الخط الرأسي والأفقي المستقيم. هناك طرق حول هذا ، ولكنها تعرض بعض المشكلات عبر المتصفح. ويلز رايلي يجمع بين واجهة متميزة تماما مع زاوية طفيفة. والنتيجة صعبة الانسحاب ولكنها تستحق ذلك.
18. مانشستر تصميم الندوة
مانشستر تصميم الندوة لديه واجهة فائقة نظيفة وبسيطة. يتم تمرير موقع الويب المكون من صفحة واحدة بشكل عمودي ، باستخدام رأس ثابت. في حين أن التأثير ليس غير عادي بشكل خاص ، إلا أن شيئًا عنه يبدو وكأنه فلاش. النهج البسيط وغياب الرسوم المتحركة المجنونة والانتقالات يؤدي إلى تباين مثير للاهتمام مع العديد من المواقع المتطرفة المعروضة هنا.
19. صوفي هارداش
صوفي هارداش يحتوي موقع الويب على بعض الرسوم المتحركة المثيرة للاهتمام. عناصر مختلفة تتحرك أو تكبير وأنت تحوم فوقهم. وتضيف الأمواج على طول القاع بعض الحياة إلى صفحة أخرى ثابتة. تصميم آخر غير نمطي يعمل جيدًا مع الرسوم المتحركة السلسة لجافا سكريبت.
20. ريناتو زيرو
ريناتو زيرو يحوّل موقع الويب الذي يتألف من صفحة واحدة المحتوى الذي يتم تحميله إلى حدث جميل. بدلاً من تحميل المحتوى مسبقًا وجاهزًا للاستخدام ، يتم تحميل كل قسم برسومات متحركة أنيقة أثناء التمرير لأسفل. الرسوم المتحركة سريعة. أنت لا تشعر أبدًا بأنك تنتظرهم. التأثير يبدو بالتأكيد مثل فلاش.
هل فاتنا أي مواقع HTML مذهلة تبدو مثل Flash؟