هناك عدد كبير من الأدوات لمطوري الويب. بعضها لا يمكن الاستغناء عنه حقًا، والبعض الآخر يمكن استخدامه من وقت لآخر لأداء مهام محددة. تشترك هذه الأدوات في شيء واحد: فهي تساعد في تحويل الأفكار الجيدة إلى تصميمات رائعة. تظهر الأدوات الجديدة في كثير من الأحيان، وتنتشر بسرعة التقنيات السحابيةلقد أدى ذلك بالفعل إلى حقيقة أن بعض المطورين لا يستخدمون عمليًا البرامج التي يجب تشغيلها من القرص الصلب - حيث يمكن العثور على جميع الأدوات اللازمة للعمل عبر الإنترنت. FreelanceToday يلفت انتباهكم 10 أفضل الأدواتلمطوري الويب.

أنشأ تيم بتروسكي، المطور من ألمانيا، موقعًا مثيرًا للاهتمام للغاية. أطلق خدمة ويب تسمى We Love Icon Fonts، والتي تعمل بنفس طريقة Google Web Font، ولكن مع الرموز بدلاً من الخطوط. يتم تحديث مجموعتها باستمرار، لذلك سيتمكن العديد من المطورين من العثور على مجموعات من الرموز على الموقع يمكن استخدامها في مشاريعهم. يمكنك توصيل المجموعة المطلوبة في بضع دقائق فقط. يكفي كتابة الكود المقدم من الخدمة في CSS وبعد ذلك سيتم توفير عرض الأيقونات بواسطة We Love Icon Fonts، التي تعمل كمضيف.

Maskew عبارة عن مكتبة Javascript مثيرة جدًا للاهتمام تتيح لك إنشاء عناصر منحرفة بسرعة. يحتوي الموقع على مثال لكيفية تحقيق التأثير المطلوب. في بعض الأحيان تبدو هذه العناصر مثيرة للإعجاب للغاية وسيكون من المفيد معرفة أن هناك أداة عبر الإنترنت تم إنشاؤها خصيصًا لهذا الغرض.

تعد خدمة UXPim أداة يمكن أن تكون مفيدة عند العمل معًا في المشاريع. إنه مصمم لحل مشكلات تجربة المستخدم بسرعة. منشئو الخدمة متخصصون على دراية جيدة بالجوانب المختلفة لتجربة المستخدم. إحدى المزايا المهمة جدًا لـ UXPin هي القدرة على التعاون في الوقت الفعلي. يتيح لك ذلك تتبع الأخطاء في الوقت المناسب في جميع مراحل إنشاء موقع ويب أو تطبيق. أداة مفيدة جدًا تتيح لك العمل على مشروع أثناء اختباره من أجل سهولة الاستخدام.

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

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

Scratchpad هو محرر نصوص للعمل مع HTML وCSS. إنه يعمل في الوقت الفعلي، ويظهر على الفور كيف سيتم عرض الرمز، ويمكنك أيضًا استخدامه لتبادل الروابط مع مستخدمين آخرين. بإمكان المسودة أيضًا إغلاق العلامات نفسها. الأداة المثاليةلتعلم وتعليم HTML/CSS.

يعد CSS3 Generator أداة مفيدة للغاية، خاصة لمصممي الويب الذين ليسوا على دراية كبيرة بـ CSS. إذا نسيت شيئًا ما أو لا تريد إضاعة الوقت في إنشاء التعليمات البرمجية، فيمكنك استخدام CSS3 Generator. كل شيء بسيط للغاية: ما عليك سوى تحديد التأثير المطلوب وتكوينه باستخدام عدد قليل من أشرطة التمرير ونسخ الكود ولصقه في مشروعك. يمكن استخدام الخدمة للغرض المقصود منها وكأداة تعليمية - بالنظر إلى كيفية تغيير الكود اعتمادًا على الإعدادات المحددة، يصبح من الأسهل فهم كيف يمكنك تحقيق النتيجة المرجوة بسرعة.

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

تقوم أداة MakeAppIcon بتحويل الصورة الأصلية إلى أيقونة تطبيق بتنسيق PNG. يمكن إجراء هذه العملية البسيطة يدويًا بسهولة، ولكن يمكن للخدمة توفير القليل من الوقت، حيث يتم تغيير حجم الصورة المحددة لتناسب جميع أحجام الأيقونات القياسية لنظامي التشغيل Android وiOS.

عند تطوير مواقع الويب، في بعض الأحيان لا يكون لديك الصور اللازمة في متناول اليد. ولكن إذا كنت تعرف حجم الصورة، فيمكنك التقاط أي صورة ستكون بمثابة "سمكة". ولكن لماذا تضيع الوقت في البحث عن صورة ومعالجتها إذا كانت هناك أداة مفيدة جدًا تسمى Fake Images Please؟ تقوم هذه الخدمة بإنشاء صور وهمية مع عناوين URL التي يمكنك استخدامها في أعمال التصميم الخاصة بك. لا يمكنك اختيار الحجم فحسب، بل يمكنك أيضًا اختيار اللون وحتى النص.

في هذه المجموعة، جمعنا لك مجموعة من الأدوات والموارد الأكثر أهمية والتي ستتعلم من خلالها كيفية القيام بكل شيء بشكل أسرع وتكون أكثر إنتاجية. إذا فاتنا شيء مهم جدًا لا يمكن لمطور الويب العيش بدونه، شاركه في التعليقات.

تصميم

ربما يكون تطوير التصميم هو الجزء الأكثر إبداعًا في العمل على موقع ويب، وبالتالي فإن الموارد المقدمة أدناه ستكون مرتبطة بالإبداع بطريقة أو بأخرى.

أنماط خفية

مصمم النماذج

أصبح CodePen منصة لعرض العروض التوضيحية الرائعة لـ CSS3 وJS. إذا كنت تبحث عن الإلهام (أو مجرد أزرار رائعة)، فتفضل بزيارة CodePen.

مدقق W3

Validator هي خدمة مجانية من W3C تساعد في التحقق من صحة مستندات الويب. يمكنه التعامل مع المستندات المكتوبة بمعظم اللغات الترميزية ويعطيك فكرة عما قد يكون به خطأ في الكود. عند البحث عن أخطاء في التعليمات البرمجية، يجب عليك أولاً استخدام هذه الأداة.

مينCSS

MinCSS هي أداة تقوم، من خلال عنوان URL، بتحميل الصفحة وCSS الخاصة بها وتكتشف المحددات غير المستخدمة. والنتيجة هي نسخة محسنة من CSS الأصلي.

تنظيف CSS

Clean CSS عبارة عن مجموعة من الأدوات لتنسيق التعليمات البرمجية وتحسينها، وليست مكتوبة بلغة CSS فقط.

CSSTidy

إنه مُحسِّن ومحلل أكواد CSS متاح لأنظمة التشغيل Windows وLinux وmacOS.  يمكنك التحكم به من أي منهماسطر الأوامر

ومن خلال برنامج PHP النصي.

تطبيق كوالا

تطبيق رائع متعدد المنصات يقوم تلقائيًا بتجميع ملفات Less/SASS.

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

أدوات التخطيط

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

FrameBox

يعد Frame Box أداة بسيطة للغاية عبر الإنترنت لإنشاء تخطيطات موقع الويب. يمكنك إنشاء إطار سلكي بسرعة كبيرة باستخدام عناصر واجهة المستخدم، وتغيير حجمها، وحتى ضبط عرض التخطيط. يمكنك مشاركة التصميم الخاص بك أيضًا الشبكات الاجتماعية. بسيطة جدا وفعالة.

أيقونات

مصدر مثير للاهتمام لتحميل الأيقونات المجانية.

هنا يمكنك العثور على الكثير من الرموز المثيرة للاهتمام. بمجرد تحديده، يمكنك أيضًا تغيير الخلفية والزاوية واللون. يتم البحث باستخدام الكلمات الرئيسية.

هذا هو المكان المناسب لأولئك الذين يبحثون عن أيقونات بسيطة. يمكن تنزيلها بتنسيق PNG أو SVG.

يتم إنشاء جميع الرموز المعروضة على هذا الموقع بتنسيق CSS خالص وفي كتلة DIV HTML واحدة فقط.

موقع يوفر خطوط الأيقونات. تحتاج فقط إلى إضافة الخط الذي تريده إلى المجموعة، واستيراده إلى CSS، وإرفاق فئة به وتطبيقه في المكان المناسب. هنا يمكنك رؤية مثال على سبيل المثال.

القوام

يعد البحث عن القوام أمرًا مريحًا للغاية، حيث يتم تقسيمها إلى فئات مختلفة.

مجموعة أخرى مثيرة للاهتمام من القوام. إن الشيء العظيم في هذا الموقع هو أن هناك عددًا لا بأس به من الفئات التي تغطي العديد من أنواع الأنسجة (مثل الأضواء أو أوراق النباتات) التي لن تجدها في أي مكان آخر.

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

الصور المخزنة

يمكنك العثور على الصورة المطلوبة دون أي جهد.

يقدم Dafont عددًا كبيرًا من الخطوط، معظمها مجاني للاستخدام التجاري والشخصي. هنا يمكنك أيضًا معاينة الشكل الذي سيبدو عليه النص على الفور. هناك العديد من الفئات المختلفة للبحث عنها. يمكنك أيضًا العثور على الخطوط السيريلية. ش

خدمة مريحة للغاية لتضمين الخطوط وتحويلها تلقائيًا إلى تنسيقات TrueType وWOFF وEOT Lite وEOT Compressed وSVG. يحتوي الموقع أيضًا على معرض للخطوط المجانية.

كيفية تضمين الخطوط متى مساعدة الخطالسنجاب، يمكنك أن تقرأ في المقال.

يحتوي Identifont على خطوط مجانية في قسم يسمى Fontset. ولكن أيضًا بمساعدة هذا المورد يمكنك تحديد الخط.

تتيح لك الخدمة تحديد الخط الذي تم استخدامه إذا قمت بتحميل صورة إليه. كما أن لديها العديد من الخطوط المجانية للتحميل.

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

الأدوات الوظيفية

هذه مكتبة جافا سكريبت تهدف إلى اكتشاف ما إذا كان المتصفح يدعم HTML5 وCSS3. في حالة عدم دعم الميزات الجديدة، ل علامات HTMLتنطبق بعض الفئات.

بالنسبة لأولئك الذين لا يزالون غير معتادين على المكتبة إلى حد ما، يمكنك القراءة عن التطبيقات العملية على حبري.

Ringmark هو اختبار على شبكة الإنترنت لقياس قدرات متصفحات الهاتف المحمول.

Polyfills عبارة عن نصوص برمجية تحاكي سلوك واجهات برمجة التطبيقات الأصلية في المتصفحات القديمة. هنا يمكنك العثور على أكثر من 40 نصًا. بعض منهم:

• طريقة JQuery-Animate-Enhanced $.animate() لتحديد انتقالات CSS لـ Webkit وMozilla وOpera. متوافق مع IE6+.
• CssSandpaper هي مكتبة JavaScript يمكنك من خلالها إنشاء تأثيرات مثيرة للاهتمام.
• JQuery-Anystrecht هو مكون إضافي يركز على نمذجة حجم الخلفية بتنسيق css3.
• تعد Transform.js وTransitions.js أيضًا من المكونات الإضافية المفيدة جدًا التي تفتح إمكانيات جديدة.

معارض الصور

معرض الصور استجابة مع التسميات التوضيحية.

Touch Touch هو معرض صور يسعى جاهداً ليكون الحل الأمثل لـ الروبوت المحمولوأجهزة iOS.

المنظر البسيط - شريط تمرير المحتوى مع الرسوم المتحركة المختلفة.

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

مولدات العفريت

يعلم الجميع فوائد استخدام الكائنات CSS. يمكن أن يساعدنا مولد الصور المتحركة التلقائي في توفير الكثير من الوقت. يوفر هذا المولد القدرة على إنشاء كائن بتنسيقات .png و.jpg بالإضافة إلى إنشاء كود CSS.

مواقع مفيدة

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

• اتحاد شبكة الويب العالمية (W3C) هو منظمة تعمل على تطوير وتنفيذ معايير التكنولوجيا لـ شبكة الانترنت. تقوم W3C بتطوير مبادئ ومعايير مشتركة (تسمى "التوصيات") للإنترنت. توصيات W3C)، والتي يتم تنفيذها بعد ذلك بواسطة الشركات المصنعة للبرامج والأجهزة. وهذا يضمن التوافق بين منتجات البرمجياتومعدات من شركات مختلفة، مما يجعل شبكة الويب العالمية أكثر تقدمًا وعالمية وملاءمة.
• WebPlatform.org هو مصدر مفتوح حيث يشارك المطورون تجاربهم. يمكنك على الموقع أن تقرأ عن الاتجاهات المثيرة للاهتمام في HTML5 وSVG وCSS3 والرسوم المتحركة والفيديو وWebGL وغير ذلك الكثير.
• يعد Html5 Please مصدرًا رائعًا إذا كنت تريد معرفة ما تدعمه المتصفحات الجديدة. بالإضافة إلى ذلك، هناك العديد من عمليات التعبئة المتعددة والاحتياطية التي يمكن استخدامها إذا كانت الخصائص غير مدعومة.

الترجمة – غرفة الواجب

ماذا ستفعل إذا وجدت نفسك فجأة على جزيرة صحراوية فارغة تمامًا، وليس لديك سوى محرك أقراص USB وإمكانية الوصول إلى الإنترنت عبر الطلب الهاتفي و كمبيوتر بسيط، عليها فقط نظام التشغيل؟ بطبيعة الحال، أول شيء ستفعله هو طلب المساعدة عبر الإنترنت، ولكن ماذا بعد ذلك؟ كيف تنظمين عملك كمصممة هناك؟

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

يمكن أن تكون التطبيقات المدرجة في هذه القائمة مفيدة في حل أي مشكلة - بدءًا من البرمجة وحتى إنشاء الرسومات وإدارة الأعمال التجارية عبر الإنترنت وإدارة المشاريع - وكل ذلك بمساعدة محرك أقراص محمول فقط. وعلى الرغم من أن محركات أقراص USB أصبحت أكبر (في أحدث ملاحظاتي، لم يعد محرك الأقراص المحمول سعة 64 جيجابايت باهظ الثمن بعد الآن، وهو أكبر بمقدار 4 جيجابايت من جهاز MacBook الحالي الخاص بي)، إلا أنك لا تزال بحاجة، بشكل أساسي، إلى برامج خاصة لتحقيق الوظائف الكاملة. قابلية النقل. تلبي التطبيقات المدرجة في قائمتنا هذه المتطلبات: محمولة وصغيرة بما يكفي لمحرك أقراص USB (غالبًا لمحرك صغير جدًا).

01. البرمجة

-
برنامج Notepad++ (الإصدار المحمول) هو تطبيق لكتابة البرامج بجميع الوظائف الضرورية. تم تجميعه بلغة C++، ويعمل على نظام التشغيل Windows. إنه متاح مجانًا وتم إصداره بموجب ترخيص GPL.

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

-
Nvu Portable هو إصدار محمول من برنامج Nvu Web Authoring. يتضمن محرر WYSIWYG ونظام إدارة ملفات قوي. مصمم للمستخدمين غير المتعلمين تقنيًا والذين لديهم معرفة أساسية (أو صفر) ببرمجة HTML وCSS.

-
Oiko CSS Editor - محرر CSS و(X)HTML وXML بتنسيق محمول مع مجموعة كاملةوظائف. يعمل في إصدارات Windows من 98 إلى XP. محرر موثوق به تمامًا مع واجهة سهلة الاستخدام، وعرض الخصائص والمحددات حسب المجموعات، وشجرة هيكلية لترميز CSS الخاص بك، بالإضافة إلى وظيفة العرض الحالية في متصفحات IE وMozilla.

-
Blender Portable هو نسخة محمولة من برنامج إنشاء الصور ثلاثية الأبعاد Blender. مدعوم من منصة PortableApps.com. تحتفظ النسخة المحمولة بجميع ميزات الإصدار الرئيسي من Blender.

-
يعد GIMP Portable بديلاً صغير الحجم لبرنامج Adobe Photoshop. على الرغم من أن واجهة مستخدم GIMP تستغرق بعض الوقت للتعود عليها، على عكس برامج تحرير الصور الأخرى، إلا أنها سهلة الاستخدام تمامًا.

-
Lightscreen Portable هو تطبيق محمول لنظام التشغيل Windows يسمح لك بذلك لقطاتسطح المكتب لأي من أجهزة الكمبيوتر الخاصة بك. ينفذ خمس عمليات بمعلمات متغيرة (تثبيت النافذة، تثبيت الشاشة، وما إلى ذلك)، يتم تشغيل كل منها باستخدام اختصار لوحة مفاتيح جديد الوصول السريع.

-
الجرأة المحمولة - المحمولة محرر الصوتلنظام التشغيل Mac OS X. تتمتع Audacity بالعديد من الوظائف المختلفة، بما في ذلك تسجيل الصوت "المباشر"، والتحرير (بما في ذلك معالجة ومزج عدد غير محدود من المسارات)، وتطبيق التأثيرات على ملفات الصوت، بالإضافة إلى ضبط التوافق مع تنسيقات مختلفةملفات.

-
إنكسكيب المحمول هو محرر رسوميات متجهية محمول. تشبه مجموعة ميزات Inkscape مجموعة ميزات برامج البناء الأخرى رسومات المتجهات، بما في ذلك Illustrator وCorelDraw وXara X. الصور الرسوميةتم حفظه بتنسيق SVG (رسومات متجهة قابلة للتحجيم).

-
FastStone Capture عبارة عن أداة مساعدة محمولة تلتقط الصور من الشاشة. يمكنك التقاط أي شيء: النوافذ، وصورة ملء الشاشة، والمناطق المستطيلة، وأي كائنات، والمناطق المحددة بشكل تعسفي، وحتى النوافذ القابلة للتمرير (وهي ميزة كبيرة مقارنة بالعديد من برامج التقاط الشاشة الأخرى، وليس فقط البرامج المحمولة).

-
فوتوغرافيكس - محمول برنامج الرسومات، مما يسمح لك بتحرير الصور وإنشائها. يحتوي على مجموعة من أدوات الرسم، ويسمح بتوسيعها من خلال إعدادات المستخدم، واختيار الطبقات والقنوات (بما في ذلك طبقات العمل والاستنسل)، ويتضمن أيضًا أدوات أخرى متنوعة.

-
Artweaver هو برنامج محمول ومتاح مجانًا لإنشاء الصور. يسمح لك بتحويل الصور على الفور إلى رسومات ويحتوي على مجموعة كبيرة من أدوات الرسم. بالإضافة إلى ذلك، يمكنك تصميم أدوات جديدة، وكذلك تكييف الأدوات الموجودة.

-
VLC Media Player Portable هو مشغل محمول لملفات الصوت والفيديو. تشغيل MPEG-1، MPEG-2، MPEG-4، DivX، WMV، MP3 والعديد من التنسيقات الأخرى. وبالإضافة إلى تشغيل ملفات الوسائط الخاصة بك، يمكن أن يعمل أيضًا كخادم وسائط، حيث يقوم بتوجيه تدفقات البيانات إلى مستخدم واحد أو أكثر عبر بروتوكولات IPv4 أو IPv6.

-
FileZilla Portable هو تطبيق FTP آخر من PortableApps.com. يدعم نقل الملفات باستخدام بروتوكولات بروتوكول نقل الملفاتو FTPS و SFTP، بالإضافة إلى إدارة نقل الملفات الكبيرة (أكثر من 4 جيجابايت). الكثير من خيارات التكوين. بالإضافة إلى ذلك، فهو يدعم HTTP/1.1، وSOCKS5، وFTP proxy، ويتضمن تسجيل الوصول إلى الملفات، وتصفح الدليل المتزامن، والبحث عن الملفات عن بعد.

-
XAMPP عبارة عن حزمة خادم ويب محمولة وكاملة تتضمن Apache وMySQL وPHP وPerl. يأتي مُهيأ مسبقًا، لذلك تحتاج فقط إلى فك ضغطه وتثبيته. ويشمل phpMyAdmin، فايلزيلا بروتوكول نقل الملفات Server وSQLite وZend Optimizer وMiniPerl وغيرها. إنه FTP وخادم الويب وخادم قاعدة البيانات في حزمة واحدة كاملة. هناك أيضًا إصدار خفيف يتضمن Apache وMySQL وphpMyAdmin وSQLite وحزم البرامج الخاصة بهم.

* - لعرض وتحرير ترميز HTML وCSS وجافا سكريبت مباشرة على الصفحة.
* - عارض خصائص CSS الأساسي.
* – شريط أدوات للتحقق من صحة أكواد HTML في Firefox.
* - قائمة إضافية ولوحة أدوات متنوعة لمطوري الويب.
* - مرجع HTML/CSS مدمج في Firefox.

-
القضبان الفورية - بيئة العمللـ Ruby، الذي يحتوي على Ruby on Rails وApache وMySQL، وهو جاهز للتشغيل. كل ما عليك فعله هو وضع هذا التطبيق في الدليل المحدد وتشغيله؛ ملفات التثبيتلا على الإطلاق.

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

-
Dia Portable هو تطبيق رسم تخطيطي مشابه لبرنامج Microsoft Visio. ومع ذلك، على عكس Visio، فهو مخصص أكثر لإنشاء مخططات العمل، أي أنه أكثر ملاءمة الاستخدام اليومي. يعمل مع ملفات XML، ولكنه قادر أيضًا على تحويل الملفات إلى تنسيقات EPS وSVG وPNG وWMF وXFIG. باستخدام Dia، يمكنك أيضًا طباعة المخططات (بما في ذلك المخططات متعددة الصفحات).

-
Mozilla Sunbird، الإصدار المحمول هو تطبيق تقويم متوافق مع Windows وLinux. خدمة تقويم مستقلة مع مجموعة كاملة من الوظائف، مثالية لإنشاء جداول العمل وإدارة المشاريع كالمعتاد.

-
يعد Task Coach Portable مخططًا آخر للاحتفاظ بقوائم مهامك ومشاريعك الحالية. وتشمل ميزاته سهولة الاستخدام واجهة المستخدم، مما يسمح لك بتخطيط الأنشطة وتنظيمها بسهولة، وتتبع التقدم المحرز في تنفيذها، وكذلك حساب الميزانية لمشاريع محددة، وتعيين مواعيد البدء والانتهاء لكل منها، وما إلى ذلك.

-
GnuCash Portable هو تطبيق آخر من PortableApps.com. خدمة وصول مجانية للاحتفاظ بالبيانات المالية مع معظم الوظائف المتأصلة في برامج التخطيط المالي التجاري. يسمح لك بالاحتفاظ بالسجلات. محاسبة القيد المزدوج، والحفاظ على حسابات صناديق الاستثمار المشتركة للأسهم/السندات، ومعالجة الفواتير ووثائق الحسابات الدائنة/المستحقة القبض.

-
OpenOffice.org Portable - نسخة من مجموعة برامج الأعمال الوصول المفتوح OpenOffice.org من PortableApps.com. يتضمن جميع تطبيقات OpenOffice.org الأساسية: Writer (معالج النصوص)، Calc (معالج جداول البيانات)، Impress (برنامج العروض التقديمية)، Draw (محرر الرسومات)، وBase (قاعدة البيانات).

-
AbiWord Portable هو معالج نصوص قادر على فتح الملفات التي تم إنشاؤها في مختلف برامج نصية، مشتمل، مايكروسوفت ووردوWord Perfect وOpen Document (OpenOffice.org) وOffice Open XML وRTF وHTML وغيرها. لديه جميع الوظائف الأساسية للمعيار معالج النصوص، بما في ذلك التدقيق الإملائي والنحوي وكتابة الحروف تلقائيًا من النماذج الثابتة.

07. تطبيقات أخرى مفيدة

-
Sumatra PDF هو عارض PDF مدمج ومحمول ومجاني لنظام التشغيل Windows. إنه في حد ذاته محمول، لذلك لا توجد نسخة "محمولة" منه. يتم التحكم فيه عن طريق اختصارات لوحة المفاتيح، ويمكن تهيئته ليكون عارض PDF الرئيسي.

-
يعد برنامج Foxit Reader V3.0 أحد منتجات مجموعة البرامج المجانية المحمولة. باستخدام Foxit، يمكنك فتح وقراءة مستندات PDF أثناء التنقل. لكن ضع في اعتبارك أنه وفقًا للتعليقات الموجودة على صفحة التنزيل هذا التطبيققد يكون تثبيته وتكوينه أمرًا صعبًا.

-
Pidgin Portable هو نسخة محمولة من برنامج المراسلة الفورية Pidgin (Gaim سابقًا). يدعم AOL، MSN، ICQ، Jabber وYahoo Internet messenger. ويمكن استكماله بوحدات التشفير للمراسلة الفورية الآمنة.

-
يتيح لك Trillian Anywhere توصيل عميل Trillian للمراسلة الفورية من محرك أقراص USB أو قرص. بفضله، يمكنك أخذ جهات الاتصال والإعدادات الخاصة بك معك في أي مكان، واستخدام نسخة محمولة من Trillian مع مجموعة كاملة من الوظائف على أي جهاز كمبيوتر متصل بالإنترنت.

من المؤلف:في طريقك لتصبح محترفًا في CSS، تحتاج إلى معرفة كيفية إجراء تصحيح أخطاء CSS وتحسينها. كيف يمكنك تشخيص وإصلاح مشاكل العرض؟ كيف تتأكد من أن CSS لا يسبب مشكلات في الأداء للمستخدمين النهائيين؟ وكيف يمكنك التأكد من جودة الكود؟

إن معرفة الأدوات التي يجب استخدامها ستساعدك على ضمان أداء الواجهة الأمامية على النحو الأمثل. سنلقي نظرة في هذه المقالة على أدوات المتصفح للمطورين Chrome وSafari وFirefox و مايكروسوفت ايدج.

أدوات المطورين المعتمدة على المتصفح

تتضمن معظم متصفحات سطح المكتب ميزة فحص العناصر التي يمكنك استخدامها لتصحيح أخطاء CSS. يمكنك تفعيل هذا الخيار من خلال النقر انقر بزر الماوس الأيمنالماوس واختيار "عرض العنصر". يمكن لمستخدمي Mac أيضًا فحص عنصر من خلال النقر عليه أثناء الضغط باستمرار على المفتاح Ctrl. توضح الصورة أدناه ما يمكنك رؤيته في Firefox Developer Edition.

أدوات مطور إصدار مطور Firefox

جافا سكريبت. بداية سريعة

في Firefox وChrome وSafari، يمكنك أيضًا الضغط على Ctrl + Shift + I (Windows/Linux) أو Cmd + Option + I (macOS) لفتح شريط أدوات المطور. توضح الصورة أدناه أدوات مطور Chrome.

أدوات مطوري كروم

في Microsoft Edge، يمكنك فتح أدوات المطور بالضغط على F12 كما هو موضح أدناه.

أدوات مطور Microsoft Edge

يمكنك أيضًا فتح أدوات المطور لكل متصفح باستخدام قائمة التطبيق:

Microsoft Edge: الأدوات > أدوات المطور

فايرفوكس: الأدوات> مطور الويب

كروم: عرض > المطورين

سفاري: التطوير > إظهار مفتش الويب

في Safari، قد تحتاج أولاً إلى تمكين قائمة التطوير بالانتقال إلى Safari > التفضيلات > خيارات متقدمة وتحديد مربع الاختيار إظهار القائمة في شريط القائمة. يوجد أدناه عرض لأدوات مطور Safari.

أدوات مطور سفاري 11

بمجرد فتح واجهة أدوات المطور، قد تحتاج إلى تحديد اللوحة المطلوبة:

مايكروسوفت إيدج: مستكشف DOM

فايرفوكس: المفتش

كروم: العناصر

سفاري: العناصر

ستعرف أنك فتحت اللوحة اليمنى عندما ترى HTML على أحد جانبي اللوحة وقواعد CSS على الجانب الآخر.

ملحوظة. الترميز الذي ستراه في لوحة HTML هو تمثيل DOM. يتم إنشاؤه عندما ينتهي المتصفح من تحليل المستند وقد يختلف عن العلامات الأصلية. باستخدام عرض ترميز المصدر، يمكنك رؤية ترميز المصدر، ولكن ضع في اعتبارك أنه بالنسبة لتطبيقات JavaScript قد لا يكون هناك ترميز المصدر هذا.

استخدام لوحة الأنماط

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

يتم تنظيم لوحة الأنماط في متصفحات مختلفةمتفق عليه تماما. يتم إدراج الأنماط القياسية، إن وجدت، أولاً. هذه هي الأنماط التي يتم تعيينها باستخدام سمة نمط HTML، إما بواسطة مؤلف CSS أو برمجيًا عبر البرامج النصية.

قواعد نمط المؤلف تسبق أنماط وكيل المستخدم. أنماط وكيل المستخدم هي أنماط المتصفح الافتراضية. كما أنها تؤثر مظهرموقعك. (في Firefox، قد تحتاج إلى تحديد خيار إظهار خيارات المتصفح لعرض أنماط وكيل المستخدم. يمكن العثور على هذا الخيار في لوحة خيارات شريط الأدوات.)

يتم تجميع الخصائص والقيم حسب المحدد. يوجد بجوار كل خاصية مربع اختيار يسمح لك بتمكين قواعد معينة أو تعطيلها. من خلال النقر على خاصية أو قيمة، يمكنك تغييرها لتجنب الاضطرار إلى تعديل التعليمات البرمجية الخاصة بك وحفظها وإعادة تحميلها.

تحديد قضايا التعاقب والميراث

عند التحقق من الأنماط، قد تلاحظ أنه تم شطب بعض الخصائص. تم تجاوز هذه الخصائص إما بقاعدة متتالية، أو بقاعدة متعارضة، أو بمحدد أكثر تحديدًا، كما هو موضح أدناه.

تحديد أزواج الخاصية والقيمة التي تم استبدالها بإعلان آخر

جافا سكريبت. بداية سريعة

تعلم أساسيات JavaScript من خلال مثال عملي لكيفية إنشاء تطبيق ويب.

في الصورة أعلاه، يظهر لون الخلفية والحدود وحجم الخط للكتلة مشطوبًا. لقد تم تجاوز هذه الإعلانات من قبل تلك الموجودة في الكتلة .Close، والتي تعد أولوية في CSS الخاص بنا.

تعريف الخصائص والقيم غير الصالحة

يمكنك أيضًا استخدام Element Inspector لاكتشاف الخصائص وقيم الخصائص غير الصالحة أو غير المدعومة. في متصفحات Chromium، يتم عرض قواعد CSS غير الصالحة مع يتوسطها خط وأيقونة تحذير بجوارها:

تحديد قيمة غير صالحة خصائص CSSمع باستخدام كروم

يقوم Firefox أيضًا بإزالة الخصائص والقيم غير الصالحة أو غير المدعومة. يستخدم Firefox Developer Edition أيضًا رمز تحذير، كما هو موضح أدناه. فايرفوكس القياسيةيعرض الأخطاء بشكل مشابه، لكنه لا يتضمن رمز تحذير.

كيف يعرض Firefox Developer Edition الخصائص والقيم غير الصالحة

في لقطة الشاشة أدناه في Safari، يتم شطب القواعد غير المدعومة بخط أحمر ويتم تمييزها بخلفية صفراء وأيقونة تحذير.

قيمة خاصية CSS غير صالحة في Safari

يستخدم Microsoft Edge بدلاً من ذلك تسطيرًا متموجًا للإشارة إلى الخصائص أو القيم غير المدعومة.

قيمة خاصية CSS لم يتم التحقق منها في Microsoft Edge

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

تصحيح أخطاء التخطيطات سريعة الاستجابة

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

الكروم

يوفر Chrome في أدوات المطورين الخاصة به ميزة شريط أدوات الجهاز. لاستخدامه، انقر فوق أيقونة الجهاز (في الصورة أدناه) في الزاوية اليسرى العليا بجوار أيقونة "تحديد عنصر".

رمز وضع التصميم سريع الاستجابة في Chrome

يتيح لك وضع الجهاز محاكاة طرق عرض متعددة أجهزة أندرويدوiOS، بما في ذلك الأجهزة القديمة مثل iPhone 5 وGalaxy S5. يتضمن وضع الجهاز أيضًا ميزة تقييد الشبكة للاقتراب منها سرعات مختلفةالاتصالات والقدرة على محاكاة وضع غير متصل بالشبكة.

فايرفوكس

في Firefox، هناك وضع مشابه يسمى وضع التصميم المستجيب. يذكرنا رمزه بأجهزة iPod المبكرة. ستجده على الجانب الأيمن من الشاشة في شريط أدوات المطور كما هو موضح أدناه.

أيقونة وضع التصميم سريع الاستجابة لمتصفح فايرفوكس

في الوضع التكيفي، يمكنك التبديل بين الاتجاهين الرأسي والأفقي، ومحاكاة أحداث اللمس، والتقاط لقطات الشاشة. كما هو الحال مع Chrome، يسمح Firefox أيضًا للمطورين بمحاكاة الاتصالات البطيئة من خلال التقييد.

مايكروسوفت ايدج

يتيح لك Microsoft Edge محاكاة الأجهزة المحمولة التي تعمل بنظام Windows، مثل Surface Tab، باستخدام علامة التبويب Emulation. حدد "Windows Phone" من قائمة ملف تعريف المتصفح كما هو موضح أدناه.

SitePoint.com يستخدم وضع محاكاة جهاز Microsoft Edge

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

سفاري

تم العثور على وضع التصميم سريع الاستجابة في Safari في أدوات المطورين. وهو مشابه لوضع محاكاة Firefox، ولكنه يضيف القدرة على محاكاة أجهزة iOS، كما هو موضح أدناه.

SitePoint.com عند عرضه باستخدام وضع التصميم سريع الاستجابة في Safari

للدخول إلى وضع التصميم سريع الاستجابة في Safari، حدد تطوير > أدخل وضع التصميم سريع الاستجابة أو Cmd + Ctrl + R.