it-swarm.asia

ما هو Shebang/hashbang (#!) في Facebook وعناوين Twitter الجديدة؟

لقد لاحظت للتو أن عناوين URL الطويلة والملتوية على Facebook والتي اعتدنا عليها الآن تبدو كما يلي:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

بقدر ما أستطيع أن أتذكر ، في وقت سابق من هذا العام ، كان مجرد سلسلة عادية تشبه عنوان URL (تبدأ بـ #) ، بدون علامة التعجب. ولكن الآن أصبح Shebang أو hashbang (#!) ، والذي لم أشاهده من قبل إلا في البرامج النصية Shell و Script Perl.

الجديد Twitter عناوين URL الآن ميزة رموز #!. عنوان URL لملف Twitter ، على سبيل المثال ، يبدو الآن كما يلي:

http://Twitter.com/#!/BoltClock

هل يلعب #! الآن دورًا خاصًا في عناوين URL ، مثل إطار عمل Ajax معين أو شيء ما نظرًا لأن واجهات Facebook و Twitter الجديدة أصبحت الآن Ajaxified إلى حد كبير؟ هل سيفيد استخدام هذا في عناوين URL الخاصة بي تطبيق الويب الخاص بي بأي طريقة؟

735
BoltClock

هذه التقنية تم إهمالها الآن .

يستخدم هذا لـ إخبار Google بكيفية فهرسة الصفحة.

https://developers.google.com/webmasters/ajax-crawling/

تم استبدال هذه التقنية في الغالب بالقدرة على استخدام واجهة برمجة تطبيقات JavaScript History التي تم تقديمها إلى جانب HTML5. بالنسبة لعنوان URL مثل www.example.com/ajax.html#!key=value ، ستتحقق Google من عنوان URL www.example.com/ajax.html?_escaped_fragment_=key=value لإحضار إصدار غير AJAX من المحتويات.

479
ceejayoz

يحتوي octothorpe/number-sign/hashmark على أهمية خاصة في عنوان URL ، وعادةً ما يحدد اسم مقطع من المستند. المصطلح الدقيق هو أن النص الذي يتبع التجزئة هو مرساة جزء من عنوان URL. إذا كنت تستخدم Wikipedia ، فسترى أن معظم الصفحات تحتوي على جدول محتويات ويمكنك الانتقال إلى أقسام داخل المستند مع مرساة ، مثل:

(https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing يحدد الصفحة و Early_computers_and_the_Turing_test هو المرساة. السبب في أن Facebook والتطبيقات الأخرى التي تعتمد على Javascript (مثل بلدي Wood & Stones ) تستخدم نقاط الارتساء هي أنها تريد جعل الصفحات قابلة للرجوع إليها (كما هو مقترح في تعليق على تلك الإجابة) أو دعم زر الرجوع دون إعادة تحميل الصفحة بأكملها من الخادم .

من أجل دعم إشارة مرجعية والزر الخلفي ، تحتاج إلى تغيير URL. ومع ذلك ، إذا قمت بتغيير جزء الصفحة (مع شيء مثل window.location = 'http://raganwald.com';) إلى عنوان URL مختلف أو بدون تحديد نقطة ربط ، فسيحمّل المتصفح الصفحة بأكملها من عنوان URL. جرب هذا في Firebug أو Safari's Javascript console. تحميل http://minimal-github.gilesb.com/raganwald. الآن في وحدة التحكم Javascript ، اكتب:

window.location = 'http://minimal-github.gilesb.com/raganwald';

سترى تحديث الصفحة من الخادم. اكتب الآن:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

آها! لا يوجد تحديث الصفحة! نوع:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

لا يوجد حتى الآن تحديث. استخدم زر الرجوع لترى أن عناوين URL هذه موجودة في سجل المتصفح. يلاحظ المتصفح أننا على نفس الصفحة ولكننا نغير المرساة فقط ، لذلك لا يتم إعادة التحميل. بفضل هذا السلوك ، يمكن أن يكون لدينا تطبيق Javascript واحد يظهر للمتصفح ليكون في "صفحة" واحدة ولكن لدينا العديد من الأقسام المرجعية التي تحترم زر الرجوع. يجب أن يغير التطبيق المرساة عندما يدخل المستخدم "حالات" مختلفة ، وكذلك إذا استخدم المستخدم زر الرجوع أو إشارة مرجعية أو رابط لتحميل التطبيق مع تضمين مرساة ، يجب على التطبيق استعادة الحالة المناسبة.

فهناك ما يلي: تقوم المراسي بتزويد مبرمجي Javascript بآلية لصنع تطبيقات قابلة للاحتباس ، قابلة للفهرسة ، وصديقة للزر الخلفي. هذه التقنية لها اسم: إنها واجهة صفحة واحدة .

ملاحظة هناك فائدة رابعة لهذه التقنية: تحميل محتوى الصفحة من خلال AJAX ثم ضخه في DOM الحالي يمكن أن يكون أسرع بكثير من تحميل صفحة جديدة. بالإضافة إلى زيادة السرعة ، يمكن إجراء مزيد من الحيل مثل تحميل أجزاء معينة في الخلفية تحت سيطرة المبرمج.

p.p.s. بالنظر إلى كل ذلك ، فإن علامة "bang" أو علامة التعجب هي إشارة أخرى إلى متتبع ارتباطات الويب من Google بأنه يمكن تحميل الصفحة نفسها بالضبط من الخادم على عنوان URL مختلف قليلاً. راجع (Ajax Crawling . هناك طريقة أخرى تتمثل في جعل كل رابط يشير إلى عنوان URL يمكن الوصول إليه على الخادم ثم استخدام Javascript غير مزعجة لتغييره إلى SPI مع مرساة.

إليك الرابط الرئيسي مرة أخرى: بيان واجهة صفحة واحدة

215
raganwald

بادئ ذي بدء: أنا مؤلف بيان واجهة الصفحة الواحدة الذي استشهد به raganwald

كما أوضح raganwald بشكل جيد للغاية ، فإن الجانب الأكثر أهمية في أسلوب واجهة الصفحة الواحدة (SPI) المستخدمة في FaceBook و Twitter هو استخدام التجزئة # في عناوين URL

تتم إضافة الحرف ! فقط لأغراض Google ، وهذا الترميز هو "معيار" Google للزحف إلى مواقع الويب المكثفة على AJAX (في مواقع ويب واجهة الصفحة المفردة القصوى). عندما يعثر متتبع ارتباطات Google على عنوان URL يحتوي على #! ، فإنه يعرف أن هناك عنوان URL تقليديًا بديلًا يوفر نفس "الحالة" للصفحة ولكن في هذه الحالة ، وقت التحميل.

على الرغم من الجمع بين #! ومثير للاهتمام للغاية بالنسبة لكبار المسئولين الاقتصاديين ، إلا أنه مدعوم من Google فقط (على حد علمي) ، مع بعض الحيل JavaScript يمكنك بناء SPI مواقع الويب SEO متوافق مع أي متتبع ارتباطات ويب (Yahoo ، Bing. ..).

لا يستخدم SPI البيان والعروض التوضيحية تنسيق Google الخاص بـ ! في تجزئات ، ويمكن إضافة هذا الترميز بسهولة ويمكن أن يكون SPI الزحف أسهل (UPDATE: now! يتم استخدام الترميز ويظل متوافق مع محركات البحث الأخرى).

ألقِ نظرة على هذا tutorial ، مثال لموقع ItsNat SPIبسيط ، لكن يمكنك اختيار بعض الأفكار لأطر عمل أخرى ، وهذا المثال متوافق مع مُحسّنات محركات البحث (SEO) لأي برنامج زاحف على الويب.

المشكلة الصعبة هي إنشاء أي (أو تحديد) "حالة صفحة AJAX" كـ HTML عادي لكبار المسئولين الاقتصاديين ، في ItsNat سهل للغاية وتلقائي ، نفس الموقع في نفس الوقت SPI أو صفحة تعتمد على SEO (أو عندما يتم تعطيل JavaScript للوصول). مع أطر عمل الويب الأخرى ، يمكنك اتباع نهج الموقع المزدوج ، فالموقع هو موقع [SPI) وصفحة أخرى تعتمد على تحسين محركات البحث (SEO) ، على سبيل المثال يستخدم Twitter تقنية "الموقع المزدوج".

111
jmarranz

سأكون حذرين للغاية إذا كنت تفكر في تبني اتفاقية هشبانج.

بمجرد أن تعطل ، لا يمكنك العودة. ربما هذه هي القضية الأكثر صعوبة. طرح منشور Ben نقطة مفادها أنه عندما يتم اعتماد pushState على نطاق أوسع ، يمكننا بعد ذلك ترك علامات التجزئة والعودة إلى عناوين URL التقليدية. حسنًا ، الحقيقة هي أنه لا يمكنك ذلك. لقد ذكرت في وقت سابق أن عناوين URL موجودة إلى الأبد ، يتم فهرستها وحفظها بشكل عام والاحتفاظ بها. لإضافة إلى ذلك ، لا تتغير عناوين URL الرائعة. لا نريد فصل أنفسنا عن جميع الروابط القيمة إلى المحتوى الخاص بنا. إذا قمت بتنفيذ عناوين URL hashbang في أي وقت ، فأنت تريد تغييرها دون قطع الروابط بالطريقة الوحيدة التي يمكنك من خلالها القيام بذلك من خلال تشغيل بعض JavaScript على المستند الجذر لنطاقك. إلى الأبد. هذا ليس مؤقتًا بأي حال ، أنت عالق في ذلك.

تريد حقًا استخدام استخدام pushState بدلاً من hashbangs ، لأن جعل عناوين URL الخاصة بك قبيحة وربما مكسورة - إلى الأبد - هو جانب سلبي هائل ودائم على hashbangs.

84
Jeff Atwood

للحصول على متابعة جيدة لكل هذا ، اعترف Twitter - أحد رواد عنوان URL لـ hashbang وواجهة من صفحة واحدة - بأن نظام hashbang كان بطيئًا على المدى الطويل وأنهم بدأوا بالفعل في عكس القرار والعودة إلى روابط المدرسة القديمة.

مقالة عن هذا هنا.

16
kingmaple

لقد افترضت دائمًا أن ! أوضحت للتو أن جزء التجزئة الذي تلا ذلك يتوافق مع عنوان URL ، مع أخذ ! مكان جذر الموقع أو المجال. يمكن أن يكون أي شيء ، من الناحية النظرية ، لكن يبدو أن Google AJAX Crawling API يعجبه بهذه الطريقة.

بطبيعة الحال ، تشير التجزئة فقط إلى عدم حدوث إعادة تحميل حقيقية للصفحة ، لذلك نعم ، إنها لأغراض AJAX. تحرير: Raganwald يقوم بعمل رائع يشرح هذا بمزيد من التفصيل.

9
Alan H.