Core Icons -- Polycasts #01 Google Developers English Arabic

Core Icons -- Polycasts #01YouTube↗ IA↗(long shot)
Science & Technology 58K views 380 likes 5 dislikes 22 Sep 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

ROB DODSON: Hey, everybody.

مرحباً، كيف الحال؟

What's up? It's Rob Dodson here, from the Google Developer Relations

أنا روب دودسن، من فريق علاقات مطوّري Google.

سنقوم بهذه السلسلة

And in this series we're going to be covering the basics of using Polymer's core-icon elements.

بتغطية أساسيات استعمال عناصرأيقونة النواة الخاصة بـPolymer

In lesson 1, we'll look at how you

في الدرس الأول،

can use core-icon to get your very first image up on screen.

سنتعلّم كيف نستعمل أيقونة النواة لتعرض صورتك الأولى على الشاشة.

And in lesson 2, we'll look at how

في الدرس الثاني،

you can load in a custom icon set of your own making.

سنتعلّم كيفية إضافة مجموعة أيقونات مخصصة من صنعك.

But let's start with Lesson 1, how

لنبدأ بالدرس الأول،

to get your very first icon up on screen.

كيف تظهر أيقونتك الأولى على الشاشة.

So just about every website is going

يحتاج كل موقع إلكتروني إلى استعمال الأيقونات في مرحلةٍ ما.

to need to use icons at some point. So you know, looking at the Polymer site,

بالنظر إلى موقعPolymer ، لدينا أيقونة البحث هنا.

we've got the Search icon here. We've got a few buttons with icons.

لدينا بعض الأزرار التي تحوي أيقونات.

We've even got some of these arrows down here that include it.

لدينا أيضاً بعض الأسهم في الأسفل التي تتضمن أيقونات.

And so, what we're going to do today is, we're going to look at how you can use the core-icon element

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

to get a single icon up on screen,

لإظهار أيقونة على الشاشة.

maybe something like a letter.

قد تكون شيئاً يشبه الرسالة.

And how you could use maybe the core-icon elements

كذلك سنتعرف على كيفية استعمال مجموعة عناصر الأيقونة

set to load in a default set of icons.

لتحميلها في مجموعة أيقونات النواة الافتراضية.

That'll make it just a lot faster for you to get some icons displaying on screen.

مما سيسرّع إظهار بعض الأيقونات على الشاشة.

So, starting us off, let's first look at how

لنبدأ بمعرفة كيفية إظهار أيقونة نواة على الشاشة.

we can get a core-icon up on screen. So here, I'm assuming it's in bower_components. And I've just imported its definition.

سأفترض هنا أنها بداخل bower_components. وها قد استوردت تعريفها.

And once I drop my core-icon on the page,

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

I can give it a source attribute and point to some image file that I've got saved somewhere.

تشير إلى ملف صورة حفظته في مكان ما.

So here I'm loading this Android icon.

سأقوم بتحميل أيقونة أندرويد.

But I could refer to just about any image format that I want.

ولكن يمكنني الإشارة إلى صورة من أي نوع أريد.

It doesn't have to necessarily be SVG.

لا يتطلب أن تكون SVG بالضرورة.

It could be like a png, a gif, webp-- something like that.

قد تكون png، gif ،webp أو شيئاً مشابه.

But typically we prefer, and we recommend, that you use SVG.

ولكننا نفضل وننصحك باستخدام نوع SVG.

Primarily because it's a vector format. Which means, it's not going to lose any quality as you're scaling the image up or scaling it down.

لأنها صيغة ناقلة، مايعني أنها لن تفقد شيئاً من دقتها أثناء تغيير حجمها.

Now, you might look at this and think, it's not really a significant improvement over using something like the image tag.

الآن، عندما تنظر إلى هذا قد تعتقد أنه ليس تطوراً كبيراً عن استخدام علامة الصورة.

We've still got to refer to some source attribute, that's some file that we've got saved on disk.

مازلنا بحاجة الإشارة إلى سمة المصدر، وهو ملف قمنا بحفظه على القرص.

And that doesn't really save us that much time.

وهذا لا يوّفر علينا الكثير من الوقت.

So to make things easier on us, we can actually include a default icon set and pull

لتسهيل الأمور علينا، يمكننا تضمين مجموعة أيقونات افتراضية

our icons from there.

وسحب أيقونتنا من بينهم.

So let's take a look at that.

لنلق نظرة على هذا.

So here I'm including core-icons, instead of

أقوم هنا بتضمين أيقونات النواة، وليس عنصر أيقونة النواة وحسب.

just the core-icon element.

لاحظ حرف s هنا.

Note the s here. This is plural.

للدلالة على الجمع.

And what that's doing is, it's going to still load in the definition for core-icon,

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

but it's also going to pull in a default icon set.

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

So now you can just say, hey, I want an icon.

لذا يمكنك الآن القول مرحباً، أريد أيقونة.

I want it to be an Android icon.

أريدها أيقونة أندرويد.

And it's going to load that from my default icon set.

وسيقوم بتحميلها من مجموعة الأيقونات الأساسية.

There's a bunch of icons in the set.

هناك عدد من الأيقونات داخل المجموعة.

So I could throw in a Cloud icon. I could throw in a Polymer icon.

يمكنني وضع أيقونة Cloud . يمكنني وضع أيقونةPolymer .

In fact, if you want to take a look at the full suite of icons

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

that are in the default set, you can follow this link right here.

يمكنك اتّباع الرابط هنا، سيأخذك إلى هذه الصفحة.

That'll take you to this page. There's tons of great stuff that you can look at and throw into your site or application.

هناك مئات من الأشياء الرائعة التي يمكنك وضعها في موقعك أو تطبيقك.

All right. Now we've got something showing up on screen.

حسناً. أصبح لدينا شيء يظهر على الشاشة.

The next thing we have got to do is we've got to give it some size and we've got to style.

مايجب علينا فعله تالياً، يجب علينا إعطائها حجماً وتنسيقاً مناسبين.

So, I'm going to just apply some CSS classes here to change the size of my icon.

لذا سأقوم بتطبيق بعض أصناف CSS هنا لأغيّر حجم الأيقونة.

And that's so I can override the CSS that gives the icon its default sizing of 24 pixels.

وهذا لأقوم بإلغاء CSS الذي يعطي الأيقونة حجمها الافتراضي المكون من 24 بكسل.

So this icon, smaller class, for instance, has a width and height of 20 pixels.

مثلاً، هذا صنف أيقونة أصغر، لها عرض وارتفاع 20 بكسل.

That's going to give me this guy down here, who's much smaller.

سيعطيني هذه الأيقونة، التي هي أصغر بشكل ملحوظ.

Likewise, using icon-larger, width and height 90 pixels

وهكذا، استعمال مكبّر الأيقونة بعرض وارتفاع 90 بكسل،

gives me a much larger icon.

سيعطيني أيقونة أكبر حجماً.

And now to style this thing, it's super simple.

ولتنسيق هذا الشي، الأمر بسيطٌ جداً.

We're just going to give it a color, using the color property in CSS.

سنقوم بإعطائها لوناً، باستخدام صفة الألوان في CSS.

Set it equal to this bright green value.

سأضبطها لتماثل قيمة هذا الأخضر الفاتح.

And we'll get this guy over here on the right.

الذي يملكه صديقنا هنا على اليمين.

So that about covers the basics of getting our core-icon up

هذا يشمل أساسيات وضع أيقونة النواة على الشاشة.

on screen. Let's switch over to our Code Editor now, and we can actually see if we can get this to display in our browser.

لننتقل إلى محرر النص البرمجي الآن، لنرى إن كان بإمكاننا عرض هذا على المتصفح.

All right, so the first thing we needed to do is we need to make sure we're loading the platform.

حسناً، أول مايجب فعله هو التأكد من تحملينا للبرنامج.

So we're going to pull in bower_components /platforms/platform.js.

لذا سنقوم بسحب bower_components /platforms/platform.js.

That's going to give us access to all of the web component

هذا سيتيح لنا الوصول لكافة تقنيات مكونات الويب،

technologies, so we can start using things like HTML imports.

أصبح بإمكاننا البدء باستخدام أشياء كواردات HTML.

So then we're just going to write out an import.

ماعلينا سوى كتابة الإيراد.

And we're going to pull in that core-icons definition.

وسنسحب تعريف أيقونة النواة.

So we're going to say core-icons-- core-icons.html.

سنكتب core-icons-- core-icons.html.

Note reason core-icons-- the plural one here. Because that's going to give us access to the default icon set.

لاحظ كتابة Icons جمعاً.لأنها ستمنحنا الوصول إلى مجموعة الأيقونات الافتراضية.

And it's also going to load in the definition for core-icon

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

for us. So then we can just write out a core-icon tag and give it an icon attribute.

ويتبقى لنا كتابة علامة أيقونة النواة وإعطائها سمة الأيقونة.

And we'll point it at that Android icon that we've been using so far.

وسنوجهها إلى أيقونة أندرويد التي استعملناها إلى الآن.

احفظ هذا.

And go to our browser, and refresh the page.

ثم اذهب إلى المتصفح وقم بتحديث الصفحة.

And up there in the top left corner, we've got a little bitty icon.

وأعلى الصفحة في الزاوية اليسرى، لدينا أيقونة صغيرة.

So the next thing I want to do is, I want to give this icon a size.

ما أريد فعله تالياً، هو إعطاء هذه الأيقونة حجماً.

So I'm going to start to write out a style tag.

لذا سأبدأ بكتابة علامة تنسيق.

And I've got to remember, I've got to add a class to my icon elements.

وسأتذكّر إضافة صنف لعنصر الأيقونة.

I'm going to go down there.

سأنزل إلى الأسفل هنا.

And we'll give it a class of icon-larger .

وسأعطيها صنف تكبير الأيقونة.

So our CSS has greater specificity.

فأصبح لـCSS خصوصية أكبر.

So we're going to use that icon-larger class. And we'll set the width and height to 200 pixels.

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

It's kind of a big icon. But that way, everyone on the video can see it.

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

So go back and refresh the page.

عد وحدث الصفحة.

And we've got this much bigger icon.

وأصبح لدينا هذه الأيقونة الأكبر حجماً.

Now if you go and check out the Polymer documentation for the core-icon element, you can actually

إن تحققت الآن من مستند Polymer من أجل عنصر أيقونة النواة،

scroll down the page. And you'll see that there is a link down here

يمكنك تمريرهذه الصفحة، وستجد رابطاً في الأسفل،

at the bottom, which will point to the core-icons element set.

يشير إلى مجموعة عناصر أيقونة النواة.

So you can actually browse through all of the icons that are available in this default set.

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

So scrolling around, I can see that there's this cool Cloud

وبالتمرير بين الصفحات، وجدت أيقونة Cloud الرائعة هذه.

icon. And if I want, I can just copy its name.

وإذا شئت، يمكنني نسخ اسمها.

Go back to my Code Editor, paste that into my icon attribute.

والعودة إلى محرر النصوص البرمجية، ولصقه داخل سمة الأيقونة.

Then when I refresh the page, I've

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

got this cooler Cloud icon that I can work with.

أصبح لدي أيقونة Cloud أجمل والتي أستطيع العمل عليها.

And going back, if I want, maybe I can grab this Drive icon.

وبالعودة ، يمكنني إن شئت أخد أيقونة Drive .

Drop that into my icon attribute, refresh the page, and I've got the Drive logo.

ووضعها داخل سمة الأيقونة، أحدّث الصفحة، ولدّي شعار Drive.

But I want to stick with that Android icon, because we've been working with it for a bit now.

لكنني أريد الإبقاء على أيقونة أندرويد، لأننا قد عملنا عليها لبعض الوقت الآن.

So I'm going to put Android back in there.

لذا سأقوم بإرجاع أندرويد إلى هنا.

And the last thing I want to do is I want to give it a color.

وآخر ما أريد فعله هو أنني أريد إعطاءها لوناً.

So over my CSS, I'm just going to use a color property.

باستخدام CSS، سأستخدم صفة لون.

And I'm going to set it to this cool bright green hex value.

وسأعيّن قيمة الأخضر الفاتح العشرية.

So save that, go back and refresh the page.

سأحفظ هذا، وأعود وأحدث الصفحة.

And I've got this bright green Android icon.

وها هي أيقونة أندرويد باللون الأخضر الفاتح.

So that about covers the basics of using the core-icon elements.

وهذا يشمل أساسيات استعمال عناصر أيقونة النواة.

In the next video, we're going to look at how you can load in additional icon sets,

في الفيديو التالي، سنتعلّم كيفية تحميل مجموعات أيقونة إضافية.

including icon sets that you create yourself.

بما في ذلك مجموعات الأيقونة التي أنشأتها بنفسك.

Thanks for watching.

شكراً للمشاهدة.

Similar videos:

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201471% match

Core Header Panel -- Polycasts #04
Google for Developers
25.8K views 190 likes 1 dislikes 05 Nov 201470% match

Season's greetings! -- Polycasts #07
Google for Developers
13.1K views 99 likes 1 dislikes 15 Dec 201468% match

Core Iconset -- Polycasts #02
Google for Developers
24.6K views 171 likes 2 dislikes 06 Oct 201462% match

Core Drawer Panel -- Polycasts #05
Google for Developers
23.1K views 185 likes 3 dislikes 17 Nov 201454% match

Content Switcheroo with Core-Pages -- Polycasts #09
Google for Developers
21.5K views 222 likes 2 dislikes 09 Feb 201551% match

Scrolling at 60 frames with core-list -- Polycasts #12
Google for Developers
24.6K views 247 likes 4 dislikes 23 Mar 201533% match

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201530% match

Routing 101 -- Polycasts #10
Google for Developers
29.6K views 367 likes 4 dislikes 23 Feb 201529% match

Theming Elements -- Polycasts #17
Google for Developers
28.1K views 233 likes 2 dislikes 02 Jun 201529% match

The Awesome Power of Auto-Binding Templates -- Polycasts #08
Google for Developers
29.8K views 276 likes 5 dislikes 28 Jan 201528% match

Google I/O 2014 - Polymer and Web Components change everything you know about Web development
Google for Developers
142.7K views 1.2K likes 22 dislikes 25 Jun 201428% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201428% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201528% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201427% match

Becoming a Certified Mobile Web Specialist
Google for Developers
58.1K views 759 likes 28 dislikes 29 Aug 201725% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201425% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201424% match

Google I/O 2014 - Unlock the next era of UI development with Polymer
Google for Developers
100.5K views 971 likes 26 dislikes 26 Jun 201424% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201523% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201422% match

Introduction to the Physical Web (100 days of Google Dev)
Google for Developers
89.6K views 702 likes 16 dislikes 18 Jul 201521% match

Let’s build some apps with Polymer! - Chrome Dev Summit 2014 (Rob Dodson)
Google for Developers
58.4K views 662 likes 10 dislikes 20 Nov 201421% match

Google Developers
Google for Developers
45.1K views 266 likes 10 dislikes 30 Dec 201421% match

Chrome Dev Summit 2014 Highlights
Google for Developers
766.5K views 67 likes 21 dislikes 14 May 201520% match

Google I/O 2015 - Polymer and modern web APIs: In production at Google scale
Google for Developers
92.3K views 875 likes 20 dislikes 29 May 201520% match

Introduction to the Google Cast SDK, Version 3
Google for Developers
105.1K views 282 likes 16 dislikes 27 Jun 201620% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201420% match

Principles of mobile app design: Delight users and drive conversions - Google I/O 2016
Google for Developers
89.3K views 1.6K likes 31 dislikes 19 May 201620% match

Settings Privacy About Contact Donate