تعرف علي Google Web Designer

0 7

Google Web Designer

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

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

 

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

كما يوفر Google Web Designer مكتبة من المكونات تتيح لك إضافة معارض صور ومقاطع فيديو وخرائط وغير ذلك من أنواع الوظائف إلى مواقع الويب والإعلانات.

 

صورة من التطبيق

 

فيديو شرح للطبيق

 

لتحميل التطبيق

 

اضغط هنا 

 

 

شرح التطبيق

مطلبات تشغيل التطبيق

متطلبات نظام التشغيل Windows‏ متطلبات نظام التشغيل Mac‏ متطلبات نظام التشغيل Linux‏
نظام التشغيل Windows 7
Windows 8
Mac OS X 10.7.x أو أحدث Ubuntu 12.04+‎
Debian 8+‎
OpenSuSE 12.2++‎
Fedora Linux 17
المعالج Intel Pentium 4 أو أحدث Intel Intel Pentium 3 / Athlon 64 أو أحدث
الذاكرة 2 غيغابايت كحد أدنى، 4 غيغابايت مستحسن
دقة الشاشة 1280×1024 أو أكبر
حجم نافذة التطبيق 1024×680 أو أكبر
الاتصال بالإنترنت مطلوب

 

واجهة Web Designer

 

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

1- شريط الأدوات  2. شريط خيارات الأداة  3. المخطط الزمني  4- اللون والخصائص والمكوّنات والأحداث وCSS ولوحات التنسيق السريع الاستجابة والديناميكية ومكتبة العناصر

مساحة العمل

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

شريط العرض

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

الأدوات

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

الأداة           الوصف

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

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

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

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

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

أدوات لوحة الرسم
يمكنك إنشاء أشكال تستند إلى لوحة الرسم بما في ذلك الأشكال الأولية باستخدام أدوات الأشكال ومنحنيات بيزيه باستخدام أداة القلم

أدوات الألوان
يمكنك تعديل لون العناصر في المشروع، بما في ذلك تعبئة العناصر والشطب والتعبئة المتدرجة

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

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

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

أداة تغيير حجم إطار العرض
لتغيير حجم إطار العرض الذي تريد التصميم له.

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

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

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

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

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

اللوحات

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

 

تعيين اللغة

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

 

إعداد البيئة

تنظيم اللوحات

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

تصغير اللوحات وتوسيعها

لتصغير لوحة أو توسيعها، انقر على الشريط العلوي للوحة. سيتم تصغير اللوحة أو توسيعها إلى الحجم الأول أو المستخدم مؤخرًا.

تغيير حجم اللوحات

لتغيير حجم لوحة، تأكد من أنه تم توسيعها، ثم انقر أسفل اللوحة مع السحب. ستحتفظ اللوحة بحجمها عند تصغيرها، ثم تتم إعادة توسيعها بعد ذلك.

نقل اللوحات

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

جمع اللوحات في جانب واحد

لجمع عدة لوحات داخل لوحة واحدة، انقر على الشريط العلوي للوحة مع سحبه على اسم لوحة أخرى. يظهر من خلال خطوط التظليل مكان استقرار الشريط العلوي للوحة عند تحريره.

تغيير العرض

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

عرض المخططات والتصنيفات

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

الانطباق

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

  • محاذاة إلى > الشبكة للمحاذاة إلى أقسام 50 بكسل على الشبكة الثلاثية الأبعاد.
  • محاذاة إلى > العناصر للمحاذاة إلى الحواف والجوانب والنقاط المتوسطة لعناصر أخرى على الجزء الرئيسي.
  • محاذاة إلى > محاذاة الانطباق لمحاذاة العنصر المحدد في محاذاة مع العناصر الأخرى.

عرض الشبكة الثلاثية الأبعاد

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

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

عند تحديد عرض القواعد في قائمة العرض، تكون المسطرتان الأفقية والرأسية مرئيتين. يمكن لأدوات قياس المسافات مساعدتك في تحديد مكان العناصر في إعلاناتك ومستندات HTML5 تحديدًا دقيقًا.

عرض المقدمة وعرض الرأس وعرض الجانب

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

إعداد البيئة

تنظيم اللوحات

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

تصغير اللوحات وتوسيعها

لتصغير لوحة أو توسيعها، انقر على الشريط العلوي للوحة. سيتم تصغير اللوحة أو توسيعها إلى الحجم الأول أو المستخدم مؤخرًا.

تغيير حجم اللوحات

لتغيير حجم لوحة، تأكد من أنه تم توسيعها، ثم انقر أسفل اللوحة مع السحب. ستحتفظ اللوحة بحجمها عند تصغيرها، ثم تتم إعادة توسيعها بعد ذلك.

نقل اللوحات

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

جمع اللوحات في جانب واحد

لجمع عدة لوحات داخل لوحة واحدة، انقر على الشريط العلوي للوحة مع سحبه على اسم لوحة أخرى. يظهر من خلال خطوط التظليل مكان استقرار الشريط العلوي للوحة عند تحريره.

تغيير العرض

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

عرض المخططات والتصنيفات

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

الانطباق

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

  • محاذاة إلى > الشبكة للمحاذاة إلى أقسام 50 بكسل على الشبكة الثلاثية الأبعاد.
  • محاذاة إلى > العناصر للمحاذاة إلى الحواف والجوانب والنقاط المتوسطة لعناصر أخرى على الجزء الرئيسي.
  • محاذاة إلى > محاذاة الانطباق لمحاذاة العنصر المحدد في محاذاة مع العناصر الأخرى.

عرض الشبكة الثلاثية الأبعاد

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

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

عند تحديد عرض القواعد في قائمة العرض، تكون المسطرتان الأفقية والرأسية مرئيتين. يمكن لأدوات قياس المسافات مساعدتك في تحديد مكان العناصر في إعلاناتك ومستندات HTML5 تحديدًا دقيقًا.

عرض المقدمة وعرض الرأس وعرض الجانب

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

 

اختصارات لوحة المفاتيح

يمكن تحديد العديد من الأدوات باستخدام اختصارات لوحة المفاتيح، كما هو الحال في العديد من أوامر القائمة “ملف” و”تعديل”.

Windows Mac

أوامر مفاتيح القائمة ملف

ملف جديد Control-N Command-N
فتح ملف Control-O Command-O
إغلاق الملف Control-W Command-W
إغلاق الكل Control-Shift-W Command-Shift-W
حفظ Control-S Command-S
الحفظ باسم Control-Shift-S Command-Shift-S
حفظ الكل Control-Shift-L Command-Shift-L
استيراد مواد عرض… Control-Shift-I Command-Shift-I
إنهاء Control-Q Command-Q

أوامر مفاتيح القائمة تعديل

تراجع Control-Z Command-Z
إعادة Control-Y Command-Shift-Z
قص Control-X Command-X
نسخ Control-C Command-C
لصق Control-V Command-V
لصق خاص Control-Shift-V Command-Shift-V
بحث Control-F Command-F
بحث/استبدال Control-Shift-F Command-Shift-F
إنشاء مجموعة… F8 F8
التفاف Control-R Command-R
تقسيم Control-B Command-B
المخطط الزمني > إضافة إطار أساسي F6 F6
المخطط الزمني > إزالة إطار أساسي F5 F5

أوامر مفاتيح تحديد الأدوات

أداة التحديد V V
أداة تدوير العناصر الثلاثية الأبعاد W W
أداة نقل العناصر الثلاثية الأبعاد G G
أداة العلامات D D
أداة القلم P P
أداة الشكل البيضاوي O O
أداة الشكل المستطيل R R
أداة الخط L L
أداة النصوص T T
التبديل بين

  • أداة التعبئة
  • أداة الشطب
  • أداة التدرج
K K
أداة تدوير الجزء الرئيسي الثلاثية الأبعاد M M
أداة اليد H H
أداة التكبير/التصغير Z Z

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

غامق Control-B Command-B
مائل Control-I Command-I
تسطير Control-U Command-U

أوامر عامة

تحديد الكل Control-A Command-A
إلغاء تحديد الكل Esc Esc
تكبير Control-Plus (+) Command-Plus (+)
تصغير Control-Minus (-) Command-Minus (-)
تبديل معاينة الصور المتحركة Enter Enter
المعاينة في المتصفح Control-Enter Command-Enter
التبديل بين عرض الشفرات وعرض التصميم Control-Shift-C Command-Shift-C

 

مكونات وتراخيص البرامج مفتوحة المصدر

البرامج والتراخيص المضمنة

يتم توزيع البرامج المفتوحة المصدر التالية وتوفيرها ضمن تراخيص أخرى و/أو تتضمن المصدر من أماكن أخرى.

اسم الحزمة الترخيص
Webfont ترخيص Apache الإصدار 2.0
LESS – Leaner CSS v1.3.3 ترخيص Apache الإصدار 2.0
GL-Matrix ترخيص zlib/libpng
jsbeautify ترخيص MIT
uglifyjs ترخيص BSD
Codemirror 2 ترخيص MIT
Chromium Embedded Framework ترخيص BSD المبسط
NSIS (Nullsoft Scriptable Install System)‎ ترخيص zlib/libpng وترخيص bzip2 وترخيص Common Public الإصدار 1.0
Zip Utils ترخيص info-ZIP، وترخيص zlib
JSON CPP ترخيص MIT
خطوط Google ترخيص خطوط مفتوحة المصدر

 

 

 

 

مصدر المعلومات من support.google.com

قد يعجبك ايضا المزيد عن المؤلف

تعليقات

Loading...