تعلّم

أحد الأشياء الرائعة عن الويب هي انه يتغير بإستمرار. ولربما كان هذا التغيير شاسع ومن الصعب إدراكه, فنحن هنا لنساعدك على اللحاق بهذه التغيرات وعلى فهمها - هنا ستجد مصادر كثيرة تساعدك على معرفة كيف تعمل برامج تصفح الأنترنت, وتساعدك على أن تكون على علم دائم بالتطورات والتغيرات التى تحدث فى هذة المتصفحات.

كيف أكون على علم دائم بالجديد فى هذة المتصفحات؟

• Keeping up with HTML5 and browser support - قائمة بمواقع ومصادر ترصد كل تغيير يحدث
• Peter Beverloo’s Blog - تحديثات أسبوعية بكل جديد فى   WebKit و Chrome
• The WHATWG Blog - تلخيصات أسبوعية بكل مستجدات معايير الويب
• W3C’s open web - تحديثات أسبوعية بكل جديد فى   the Open Web Platform
• Opera Developer News - رصد تطورات   Opera's web platform
• HTML5 Rocks updates - الأخبار الهامة والعاجلة عن HTML5 و Chrome
• Mozilla Hacks - تقدم تطبيقات رائعة ونظرة على إمكانيات ال HTML5
• IE Blog - تحديثات المتصفح IE

كيف أعرف طريقة عمل المتصفح؟

• How Browsers Work: Behind the Scenes of Modern Web Browsers - مقال فى العمق عن كيفية عمل المتصفحات
• Life of a <button> element -by Alex Russell - فيديو رائع عن كيف تتعامل المتصفحات الحديثة مع ال CSS, وماذا يحدث خلف الستار لتطبيق ال CSS

مصادر تعليمية أخرى

• CSS-tricks - مدونة تقدم لمصممين المواقع مقالات رائعة ودروس ومواد للتحميل
• HTML5doctor - مصدر رائع لمن يريد تعلم ال HTML5, وطريقة عملها, وطريقة تطبيقها اليوم.
• Dive into HTML5 - تقدم نظرة عميقة على بعض إمكانيات ال HTML5
• Addy Osmani’s blog - عدد هائل من المقلات للذين يريدون تعلم jQuery, JavaScript, HTML5, CSS3.
• Paul Irish’s blog - مدونة مهمة تساعدك على تطوير مواقع رائعة – وتأتيك بكل جديد عن تقنيات تطوير المواقع.
• Dev.Opera - مقالات تعليم إمكانيات ال HTML5
• مصادر مهمة متنوعة عن متصفحات الويب ومعايير الويب
• YUI Theater - فيديوهات عن تقنيات الويب ألقيت فى شركة ياهو على مدار السنين
• Adobe Developer Connection - مقالات وفيديوهات لتعلم HTML5 و CSS3 و mobile development.

مراجع وموسوعات

• Mozilla’s MDN )Mozilla Developer Network) - مستندات و مراجع رائعة ولا غنى عنها عن HTML, CSS, JavaScript, DOM, وأشياء أخرى. وهو أيضا مكان جيد للمشاركة - و يمكنك معرفة كيف تساهم وتعلم كيف تبدأ.
• dochub.io - مرجع سريع لكل من   Mozilla’s MDN-docs و HTML و CSS و JavaScript و DOM.
• Forward-compatible websites - قائمة بأفضل الممارسات فى تطوير المواقع والتى ستعمل دائما حتى مع تغييرات متصفحات الويب.
• HTML5 Please - Use new and shiny responsibly - موسوعة لتقنيات ال HTML5 , ويمكنك البحث عن تقنية معينة ومعرفة هل تستخدمها ام لا ومتى تستخدمها.

قابل مطورون أخرون

حضور المقابلات والمؤتمرات المحلية فرصة جيدة لمقابلة المطوريين الأخرين ولمشاركة الأفكار والخبرات معهم, مواقع مثل WhatIsUpStartups ستساعدك فى معرفة الأحداث والمؤتمرات القريبة منك.

أطلب المساعدة

إسأل وجاوب على الأسئلة وشارك فى المحادثات على ال IRC

كيف تبدأ مع ال irc و موقع freenode

• قنوات او غرف IRC هامة على موقع irc.freenode.net:
  

  #html5 / #css / #javascript / #whatwg / #jquery / #yui / #dojo / #web/ #bbg

• وقناة js# على irc.mozilla.org

كيف تطلب المساعدة

1. من الأفضل , بل يجب أن تقوم بعمل jsfiddle أولاً.
2. قلل مساحة البحث عن المشكلة.
3. تذكر: كن دقيقاً
4. إسأل على IRC أو StackOverflow و ساحة المحادثات الخاصة به أو أصدقائك.

ساعد الأخرين

نحن جميعا نستفيد من بعضنا ونحتاج المساعدة من وقت إلى أخر, ومساعدة الأخرين تعمل على تثبيت المعلومات لديك, وتزيد من إدراكك وفهمك للتقنيات المختلفة. فى الأسفل ستجد مشاريع مفتوحة تحتاج إلى مساعدتك. تذكر ليس هناك مساهمة صغيرة, بل كل مساهمة لها قيمة.

مشاريع مفتوحة المصدر تحتاج إلى وقتك

• HTML5 Boilerplate - مشروع يساعدك على تطوير موقعك باستخدام افضل الممارسات.
• jQuery Learning Site - موقع تعليمى لمكتبة جافاسكريبت المشهورة jQuery.
• jQuery Mobile - افضل الممارسات عن البرمجة للهواتف النقالة
• Modernizr - مشروع يساعدك على الكشف عن التقنيات التى يدعمها المتصفح قبل تطبيقها.
• Bootstrap - سجادة عمل لكل من HTML و CSS و JS تساعدك على بناء تطبيقات الويب بسرعة – مقدمة من تويتر.
• Normalize.css - مشروع لجعل كل المتصفحات تعرض مواقع الانترنت بنفس الطريقة.
• Dojo - سجادة عمل شاملة لتطوير تطبيقات الويب والهواتف النقالة.
• Lazyweb requests - ادوات وحلول من الرائع ان يمتلكها مطورى الويب.
• jQuery standards project - قضايا ومناقشات متعلقة بمعايير الويب.

قم بإتباع خطوات ’طلب المساعدة‘ فى الأعلى وألق نظرة على بودكاست Addy Osmani عن كيفية المشاركة !

أرسل تعليقاتك على المواصفات

المواصفات specifications (وهى عبارة عن وصف دقيق لما ينبغى ان تكون علية التقنية او لغة البرمجة وكيف يتم استخدامها) تحدد وتنظم طريقة الأستخدام, ويتم وضعها من قبل فريق عمل Working Groups -WG من خلال محادثات مكثفة عن طريق البريد الإلكترونى. ولكن يبقى الإحتمال ان تقوم شركات متصفحات الويب بإنتاج متصفحات لا تتبع هذة المواصفات, وعندها يجب ان نقف نحن المطوريين ضد هذة البرامج ونقوم بإرسال feedback بكل خطأ نجدة فى هذة البرامج.

• تعرف على تاريخ الإنترنت.
• إلقى نظرة على كيفية عمل مجموعات ال CSS.
• إشترك فى هذة القوائم البريدية لتتابع المشاركات والمناقشات التى تقود الويب:
  • public-webapps - مناقشات تقنية عن تطوير تطبيقات الويب
  • www-style - مناقشات تقنية عن ال CSS
  • whatwg - القائمة البريدية ل Web Hypertext Application Technology Working Group
  • public-html - مناقشات تقنية حول HTML
  • www-dom - مناقشات تقنية عن ال DOM
  • public-fx - مناقشات حول القضايا التى توثر على ال CSS و SVG
• إقرأ HTML5 Spec for developers تم حذف ما لا يهم المطورين وتم تصميمها بطريقة جميلة
• أسهل طريقة لترسل تعليق او تبلغ عن خطا فى HTML specification هى أن تقوم بتحديد الجزء الذى تريد ان تبلغ عنة ثم تكتب تعليقك فى الشريط اسفل الصفحة.
• تعرف على أخر القضايا حول ال HTML و CSS عن طريق متابعة الحسابات الاتية
  • @whatwg
  • @csscommits

إكتشف الإمكانيات الجديدة

إذا كنت قد تعلمت الأساسيات, فهذا هو الوقت لتتعمق أكثر. هنا سوف نتعرف على Advanced CSS و الامكانيات الجديدة فى HTML ومستقبل هذة التقنيات. العديد من الأمكانيات متوفر دعمها الأن فى متصفحات الويب وإكتشاف هذة الإمكانيات والمميزات يساعدنا على دفع الويب إلى الأمام.

أمثلة على أفضل الطرق للتعرف على الإمكانيات الجديدة

• Global eval: what are the options? - kangax
• Multiple Backgrounds and Borders with CSS 2.1 - Nicolas Gallagher
• CSS background-image hacks - Nicolas Gallagher
• Let the Web move you — CSS3 Animations and Transitions - John Allsopp
• Patterns For Large-Scale JavaScript Application Architecture - Addy Osmani
• The Cicada Principle and why it matters to web designers - Alex Walker
• Keyframe animation syntax - Chris Coyier
• What's new in CSS Selectors (Level 4) - Shi Chuan
• Everything you always wanted to know about touch icons - Mathias Bynens
• The z-index CSS Property: A Comprehensive Look - Louis Lazaris

مميزات رائعة لتكتشفها ( وربما تكتب عنها )

المتصفحات تضيف مميزات CSS دائما. ونحن نكره الأوامر الخاصة بكل متصفح vendor prefixes لذلك نرسل تعليقاتنا عليها دائما وأنها لا تناسب عملنا. لذلك تشجع ان تجرب كل ميزه جديدة وترسل تعليقك عليها. وهذة نظرة على vendor-prefixed CSS property, كتبها Peter Beverloo, وفيها العديد من اوامر ال CSS التى تحت التجربة - وكثير منها ليست معروفة وليست مفهومة عند الكثير. يمكنك الكتابة عنها لتعلمها وتبسطها للمطوريين الاخرين - وهناك خواص أخرى مثل:

• The :checked selector / object-fit / background-clip / fx blur css filter / -webkit-line-clamp / text-overflow / box-sizing / CSS columns
• history.pushState(), HTML5 input checkValidity(), getClientRects / getBoundingClientRect, WebKit's ConvertPointFromPageToNode
• CSS Generated Content for Paged Media Module (GCPM)
• Differences between word-wrap, word-break, and white-space
• Harmony features like let / block-scoped bindings / block functions / destructuring / rest parameters / default param values.
• Web Components Explained (very early draft)
• Any features from these presentations:
  • The Future of CSS - Tab Atkins on what to expect from CSS in the future.
  • Data, Semantics, and the Process of Progress - browser evolution, Component Model, MDV
  • [JS|DOM].next() - Alex Russell on the next version of ECMAScript.
  • CSS3 Secrets - an interactive presentation on advanced CSS3 functionality.
  • The Future of Layouts in CSS - and how emerging specs will add proper layout control to CSS
  • The Future of CSS - an overview of a number of surfacing CSS features.

أكتب

أنشر ما تعلمتة ولا تخف من إرتكاب الأخطاء. أنشر على مدونتك و أحرص على ان تكون مقالاتك محدثة دائما. وقم بعمل مناقشات مع قراء مدونتك وعلمهم وتعلم منهم.

تعليم الناس هو طريقة جيدة للتعلم ولتثبيت المعلومات. لذلك فأنت تستفيد انت ايضا عندما تعلم الناس

ما الذى يجب ان تكتب عنة؟

أشياء يمكن ان تعلمها للناس: هنا ستجد أفكار جيدة

• لماذا وُجدت هذة التاج <br> و <hr>؟
• كيف تقوم بعمل slideshow بأقل قدر ممكن من الكود ؟
• ما هو ال DOM ؟ ولماذا وُجد ؟
• أنظر كيف يقوم المتصفح بتطبيق أى واحدة من ال CSS property , وقارن هذا مع ال CSS specifications
• كيف تقوم المواقع المشهورة بعمل صفحتها الرئيسية .
• كيف يمكنك إصلاح أحد أخطاء المواقع الكبيرة (مثل: وقت كبير فى التحميل - خطا فى الجافاسكربت - او أخرى )
• خذ Demo مشهورة و أشرحها بطريقة مختلفة او اشرحها هى نفسها
• قم بعمل تلخيص للأفكار التى تدور فى الويب مؤخراً.
• أكتب عن خبرتك فى المشاريع المفتوحة المصدر.
• كيف يمكن لل CSS preprocessor أن تؤدى إلى اخطاء فى الكود, إذا لم يتم التعامل معها بطريقة صحيحة
• إذا كانت لغتك الأم غير الإنجليزية:
  • ترجم بعض المقالات المهمة والمشهورة عن تطوير وبرمجة الويب.
  • وضح الأشياء الغامضة او الغير معروفة فى ال specifications

بلغ عن الأخطاء

يجب على شركات المتصفحات أن تعالج أخطاء المتصفحات بجدية اكثر, وعلينا ان نساعدهم فى ذلك.

• ساعد مجتمع الويب: بلغ عن أخطاء المتصفحات - كتبه Lea Verou
• مسئولية مطوري الويب - كتبه John Resig
• Help prioritize browser accessibility bugs - كتبه Vlad Alexander

• المواقع الخاصة بأخطاء المتصفحات - ساهم فى حل خطا موجود بالفعل أو بلغ عن خطأ جديد:

  • Mozilla's bugzilla
  • WebKit bugs
  • Chrome bugs
  • Opera bugs
  • Help IE

هاك

إدفع الويب إلى أقصى حدودة. هاك على CSS او advanced HTML او JavaScript او the browser's rendering engine. ادخل على مواقع مثل github , اختر مشروع وتفحص الكود جيدا وتعلم منة ثم ضع لمستك انت. هيا نجعل الويب مكان رائع - هناك طرق كثيره لفعل ذلك:

ساهم فى تطوير المتصفحات

• ساعد فى تطوير أدوات المطوريين مثل WebKit Inspector و Dragonfly. لقد تم برمجتهم بإستخدام HTML و CSS و JS لذلك فأنت لا تحتاج انت تكون مبرمج ++C لتشارك فى تطويرهم.
• قلل من ال test cases لموزيلا.
• هاك على Gecko
  • إقرأ دليل المطوريين لتبدأ فى تطوير Gecko..
  • قائمة ببعض اهم الأخطاء فى firefox و Gecko .
  • إشترك فى المحادثات على غرفتى introduction# و developers# على Mozilla's IRC server
• هاك على Webkit
  • دليل من جوجل للمساهمة فى تطوير Webkit.

ساهم فى سلاسل الإختبارات

الإختبارات هى شئ أساسى عند وضع معايير الويب وتطوير المتصفحات. ومن خلالها نتأكد من تعامل المتصفحات مع التقنيات بنفس الطريقة ام كل متصفح مختلف عن الأخر. حالياً, سلاسل إختبارات W3C ليس لديها إختبارات بالقدر التى تحتاجة. هذة الإختبارات تكتب بلغات تطوير الويب الأساسية HTML و CSS و JS.

• Get overviews of the w3c webapps test suite, the w3c HTML5 test suite, and the CSSWG test suite.
• Look into upstreaming some existing tests into the W3C Test suite.
• Upstream WebKit’s LayoutTests. Also see the LayoutTests theory & practice.
• Upstream Mozilla’s Mochitests.
• Join the conversation on public-webapps-testsuite, public-html-testsuite, and public-css-testsuite.
• Contribute to HTML5 Audio on the AreWePlayingYet? test suite.

ساهم فى المواصفات   specifications

• راجع على الأخطاء الموجودة على W3C bugzilla - وتعلم Bugzilla conventions.
• شارك فى محادثات WHATWG / public-webapps / www-style / public-fx.
• قم بكتابة إقتراحات لمعايير الويب.. (هنا ستجد كيفية فعل ذلك.)
• أكتب بعض المواصفات.

ساهم فى أدوات التحقق من صحة الكود

• HTML Validator needs some developer lovin', deets at lazyweb-reqs/18
• CSS Validator can always use some help. hop on that mailing list!
• WebVTT a video subtitling format, is an active area of standards interest