الدرس الاول التعريف ما المقصود بـ Google Web Designer؟

ما المقصود بـ Google Web Designer؟

يعد Google Web Designer تطبيقًا متقدمًا على الويب يمكنه التصميم باستخدام HTML5 ويتيح لك تصميم إعلانات HTML5 وغيرها من محتوى الويب باستخدام واجهة مرئية ومتكاملة لإعداد الشفرات. باستخدام عرض التصميم في Google Web Designer، يمكنك إنشاء المحتوى من خلال أدوات الرسم والنصوص والعناصر الثلاثية الأبعاد، كما يمكنك تحريك العناصر على مخطط زمني. وبعد الانتهاء من إنشاء المحتوى، يمكنك استخراج محتوى من Google Web Designer بتنسيق HTML5 وCSS3 وجافا سكريبت واضح يسهل على الإنسان قراءته.

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

يتيح لك عرض الشفرات في Google Web Designer إمكانية إنشاء ملفات CSS وجافا سكريبت وXML باستخدام تظليل التراكيب والإكمال التلقائي للشفرات لتتمكن من كتابة الشفرات بسهولة وبعدد أخطاء أقل.

متطلبات النظام

  الحد الأدنى الموصى به
نظام التشغيل Windows® 7/ Windows 8
Mac® OS X 10.7.x أو إصدار لاحق
Windows® 7/ Windows 8
Mac® OS X 10.7.x أو إصدار لاحق
المعالج معالج Intel Pentium® 4 أو AMD Athlon 64 معالج Intel Pentium® 4 أو AMD Athlon 64
الذاكرة ذاكرة تخزين عشوائي RAM سعتها 2 غيغابايت ذاكرة تخزين عشوائي RAM سعتها 4 غيغابايت
درجة دقة الشاشة 1280×1024 1920×1080
حجم نافذة التطبيق 1024×768 كحد أدنى 1024×768 أو أكبر
اتصال الإنترنت يلزم عند الاستخدام لأول مرة بعد التنزيل ولإجراء التحديثات وللدخول إلى المساعدة. يلزم عند الاستخدام لأول مرة بعد التنزيل ولإجراء التحديثات وللدخول إلى المساعدة.

 

واجهة Web Designer

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

1- لوحة الأداة  2- لوحة خيارات الأداة  3. المخطط الزمني  4- اللون والخصائص والمكونات والأحداث ولوحات CSS

مساحة العمل

في وسط واجهة Google Web Designer توجد مساحة العمل. في وضع التصميم، تعرض مساحة العمل الصور والنصوص وغير ذلك من العناصر بشكل مرئي، بالشكل الذي تظهر به تمامًا في المتصفح. وفي وضع الشفرات، تعرض مساحة العمل الشفرة بتشفير الألوان والتنسيق المناسبين.

شريط العرض

يتيح لك شريط العرض الاختيار بين وضعي التصميم والشفرات، كما يتيح لك معاينة HTML ونشر الإعلان، ويتيح لك أيضًا إمكانية تغيير مستوى التكبير/التصغير والصفحة التي تعمل عليها.

الأدوات

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

الأداة الوصف

أداة التحديد
لتحديد عناصر ونقلها في مساحة العمل

أداة تدوير العناصر الثلاثية الأبعاد
لتدوير العناصر بأبعاد ثلاثة

أداة نقل العناصر ثلاثية الأبعاد
لنقل العناصر في مساحات ثلاث

أداة العلامات
لإنشاء علامات HTML من أي نوع من خلال النقر على الجزء الرئيسي وسحبه

أداة النصوص
لإضافة نص

أداة الشكل
لإنشاء أشكال أولية

أداة دلو التلوين
لتعديل لون عناصر في المشروع

أداة زجاجة الحبر
لتعديل لون الخط وشطب عناصر في المشروع

أداة تدوير الجزء الرئيسي الثلاثية الأبعاد
لتغيير العرض الثلاثي الأبعاد للمشروع

أداة اليد
لتغيير عرض منطقة العمل

أداة التكبير/التصغير
لتكبير التصميم الإعلاني وتصغيره

خيارات الأداة

يعرض شريط خيارات الأداة خيارات للأداة المحددة حاليًا. على سبيل المثال، عندما يتم تحديد أداة النص، يعرض شريط خيارات الأداة خيارات تنسيق الخط والنص.

 

المخطط الزمني

الوضع السريع
الوضع المتقدم

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

اللوحات

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

 

 

الانضمام إلى منتدى Google Web Designer

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

الانضمام إلى منتدى Google Web Designer:

Google Web Designer forum

الكاتب Geek4Arab

Geek4Arab

مواضيع متعلقة

التعليقات مغلقة