macOS

ايران گستر در صدد آن است تا  اخبار و تکنولوژي هاي روز IT , اخبار گوگل ,اپليکيشن هاي کاربردي (بدافزار ها) يا مفيد  را در اختيار شما عزيزان قرار دهد تا شما عزيزان با مطالعه آنها وارد اين دنياي شيرين و پر چالش شويد و آنها را در کسب و کار و زندگي خود به کار گيريد.

سيستم عامل مک او اس Catalina

اپل رسما عرضه سيستم عامل مک او اس Catalina را آغاز کرد. از کاتالينا به عنوان يکي از مهم‌ترين بروزرساني‌هاي macOS ياد مي‌شود چرا که ويژگي‌هاي جديدي را در خود جاي داده و مي‌تواند تجربه لذت‌بخشي از کار با محصولات مجهز به اين سيستم عامل را براي کاربران به ارمغان آورد.(ايران گستر)

در مک او اس Catalina آي‌تيونز به چندين برنامه تجزيه شده و اپل Arcade نيز با بيش از 100 بازي در اين نسخه جاي گرفته است. با قابليت Sidebar نيز اين امکان براي کاربران فراهم مي‌شود تا بتوانند آيپد خود را به نمايشگر ثانويه مک تبديل کنند. در ادامه به طور مفصل‌تر به اين ويژگي‌ها اشاره خواهيم کرد.(ايران گستر)

• 
  

  اپليکيشن‌هاي جداگانه‌اي براي Music، TV و Podcasts

  
  

آي‌تيونز بعد از چند سال گنجاندن انواع محتوا در خود، بالاخره به چندين برنامه تقسيم شد. حال آي‌تيونز در مک او اس Catalina به اپليکيشن‌هاي مستقل Music، TV و Podcasts تجزيه شده است. قابليت Finder نيز به گونه‌اي طراحي شده که از مديريت دستگاه‌هاي iOS نيز پشتيباني مي‌کند. اين امکان براي کاربران فراهم شده تا از طريق سايدبار Finder بتوانند آيفون يا آيپد خود را با کمک قابليت Locations پيدا کنند.(ايران گستر)

• 
  

  Sidecar

  
  

يکي از ويژگي‌هاي جديدي که در مک او اس Catalina تعبيه شده، امکان استفاده از آيپد به عنوان نمايشگر ثانويه براي دستگاه‌هاي مک است. از اين قابليت مي‌توان به صورت سيمي‌و يا بدون‌سيم (وايرلس) استفاده و ارتباط ميان دستگاه‌ها را برقرار کرد.(ايران گستر)

• 
  

  Screen Time

  
  

اين ويژگي براي اولين بار در iOS 12 براي مديريت ميزان استفاده از دستگاه‌هاي آيفون و آيپد طراحي شد و اکنون راه خود را به دستگاه‌هاي مک باز کرده است.(ايران گستر)

HTML

ايران گستر در صدد آن است تا با آموزش هاي تصويري خود, شما را با به روز ترين زبان هاي برنامه نويسي آشنا کند تا با يادگيري آنها بتوانبد وارد بازار کار شويد و کسب و کار خود را رونق بخشيد. از اين پس آموزش هاي HTML مارا دنبال کنيد.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

نمايش کدهاي کامپيوتري

 وقتي مي گوييم کدهاي کامپيوتري يعني کدهايي که به يکي از زبان هاي برنامه نويسي يا نشانه گذاري يا … تعلق داشته باشد. اگر به کدهاي کامپيوتري نگاه کرده باشيد متوجه مي شويد که از نظر ظاهري کمي با متون عادي متفاوت هستند. ما مي خواهيم در اين قسمت اين حالت را در HTML به وجود بياوريم.(ايران گستر)

کد هاي کامپيوتري تنها متوني نيستند که از نظر ظاهري چنين تفاوت هايي دارند، بلکه ورودي هاي کيبورد (مثلا وقتي مي گوييم کليدهاي Ctrl و S را براي ذخيره سازي فشار دهيد و …) و موارد ديگري نيز در اين گروه هستند و ما مي خواهيم تک تک آن ها را بررسي کنيم.(ايران گستر)

ورودي هاي صفحه کليد

ورودي هاي صفحه کليد ورودي هايي هستند که از طرف کاربر و با فشردن کليدهاي خاص انجام مي گيرند. براي نمايش اين نوع ورودي ها مي توانيد از تگ <kbd> استفاده کنيد. نوشته هايي که درون اين تگ قرار بگيرند با فونت monospace نمايش داده خواهند شد. به اين مثال توجه کنيد:(ايران گستر)

مشاهده ي خروجي در JSBin

به خروجي برويد تا قسمت Ctrl و S را در فونت monospace مشاهده کنيد.(ايران گستر)

HTML

ايران گستر در صدد آن است تا با آموزش هاي تصويري خود, شما را با به روز ترين زبان هاي برنامه نويسي آشنا کند تا با يادگيري آنها بتوانبد وارد بازار کار شويد و کسب و کار خود را رونق بخشيد. از اين پس آموزش هاي HTML مارا دنبال کنيد.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

طرح کلي صفحات HTML

صفحات وب مانند صفحات رومه ها و مجلات، محتواي خود را در ستون ها و طرح هاي خاصي نمايش مي دهند. با معرفي HTML5 مبحث semantics وارد دنياي طراحي وب شد و حالا عناصري را داريم که semantic هستند.(ايران گستر)

semantic در لغت به معني «معنايي» است و وقتي مي گوييم عناصرِ semantic، منظورمان عناصري است که در HTML5 ديگر تنها يک عنصر نيستند، بلکه براي موتورهاي جست و جو معني خاصي دارند.(ايران گستر)

عناصر semantic اي که براي تعريف قسمت هاي مختلف يک صفحه استفاده مي شوند از اين قرار اند:(ايران گستر)

• <header> مسئول تعريف قسمت header در سايت ها است


• <nav> مسئول تعريف منوي سايت ها (نوار navigation) است


• <section> مسئول تعريف يک قسمت در سايت ما است


• <article> مسئول تعريف قسمتي مستقل است که داراي مقاله اي از سايت ما است


• <aside> مسئول تعريف قسمت کناري و جانبي سايت است


• <footer> مسئول تعريف قسمت footer در سايت ها است


• <details> مسئول تعريف جزئيات بيشتر در صفحات وب است


• <summary> مسئول تعريف يک heading براي عنصر <details> است.(ايران گستر)

براي درک بهتر به تصوير زير نگاه کنيد:(ايران گستر)

طرح کلي HTML5

اين نوع طرح، تنها طرحي نيست که شما مي توانيد براي سايت خود انتخاب کنيد بلکه طرح هاي بسيار زيادي وجود دارد اما ما مي خواهيم در اين قسمت در مورد اين طرح صحبت کنيم چرا که يکي از قديمي ترين و اصيل ترين طرح ها براي صفحات HTML است.(ايران گستر)

براي ايجاد اين نوع طرح چند ستونه 5 روش اصلي وجود دارد:(ايران گستر)

• استفاده از جداول HTML (اين مورد منسوخ شده است و به هيچ عنوان پيشنهاد نمي شود.


• استفاده از خاصيت float در CSS


• استفاده از flexbox در CSS


• استفاده از framework هاي زبان CSS


• استفاده از grid ها در CSS (ايران گستر)

جداول HTML

در سال هاي قبل (بسيار قبل تر از معرفي HTML5) طراحان مجبور بودند براي طراحي سايت هاي چند ستونه (طرح موجود در تصوير بالا) از <table> يا همان جدول ها در HTML استفاده کنند. واضح است که جدول ها براي شکل دهي به صفحات وب ساخته نشده اند بلکه براي نمايش داده هاي خاص که نياز به جدول دارند مي باشند.(ايران گستر)

استفاده از <table> براي شکل دادن به صفحات وب تان کاري بسيار طاقت فرسا و غير استاندارد است که کاملا منسوخ شده و هيچ انسان عاقلي ديگر از آن استفاده نمي کند.(ايران گستر)

فريم ورک هاي CSS

استفاده از framework هاي زبان CSS نيز يکي ديگر از اين گزينه ها است اما از آنجا که نمي توان يک framework کامل CSS را در اين مقاله توضيح داد، به صورت خلاصه از کنار آن عبور مي کنيم چرا که شما مي توانيد با جست و جو در اينترنت در مورد فريم ورک هاي CSS اطلاعات بيشتري کسب کنيد. اما به طور خلاصه چند مورد از اين فريم ورک ها را به شما معرفي مي کنيم.(ايران گستر)

فريم ورک Bulma

[caption id="attachment_77302" align="aligncenter" width="750"] Bulma CSS Framework[/caption]

فريم ورک Bulma يکي از محبوب ترين فريم ورک هاي CSS است که قبلا با نام Scotch شناخته ميشد. از مزيت هاي اصلي اين فريم ورک اين است که از CSS خالص تشکيل شده است و هيچ کد جاوا اسکريپتي ندارد؛ بنابراين تنها بايد يک فايل css را درون پروژه ي خود import کنيد و نيازي به فايل هاي js نيست.(ايران گستر)

همچنين اين فريم ورک بر اساس Flexbox طراحي شده است و بر پايه ي Sass مي باشد بنابراين تنها از کدهايي استفاده خواهيد کرد که به آن ها نياز داشته باشيد. طراحي با اين فريم ورک کاملا واکنش گرا (responsive) بوده و اولويت خود را بر گوشي هاي موبايل قرار داده است.(ايران گستر)

فريم ورک Bootstrap

[caption id="attachment_77313" align="aligncenter" width="750"] Bootstrap Framework[/caption]

HTML

ايران گستر در صدد آن است تا با آموزش هاي تصويري خود, شما را با به روز ترين زبان هاي برنامه نويسي آشنا کند تا با يادگيري آنها بتوانبد وارد بازار کار شويد و کسب و کار خود را رونق بخشيد. از اين پس آموزش هاي HTML مارا دنبال کنيد.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

 

 

عنصر <head> چيست؟

عنصر <head> در يک سند HTML وظيفه ي نگه داري از metadata را دارد و بين <html> و <body> قرار مي گيرد. metadata يعني «داده هايي که در مورد داده هاي ديگر» هستند! به طور مثال وقتي مي گوييم «metadata هاي سند HTML» يعني اطلاعاتي درباره ي سند HTML (که خود اطلاعات است).(ايران گستر)

واضح است که metadata نمايش داده نمي شود و شکل بصري ندارد بلکه مواردي مثل اين موارد را شامل مي شود:(ايران گستر)

• character set (مواردي مثل UTF-8)


• document title (عنوان سند)


• styles (استايل هاي CSS)


• محل قرار گيري تگ هاي link و script


• و ديگر اطلاعاتي که راجع به خودِ سند HTML باشد

بياييد تک تک اين موارد را بررسي کنيم.(ايران گستر)

تگ <title>

به عبارت ديگر 3 کار اصلي <title> از اين قرار است:(ايران گستر)

• موضوع صفحه ي HTML را در تب مرورگر کاربر نمايش مي دهد


• اگر صفحه اي به favorites اضافه شود، عنوان آن همان محتواي <title> خواهد بود


• تگ <title> همان چيزي است که در موتورهاي جست و جو به عنوان لينک سايت شما مي آيد

به اين مثال ساده نگاه کنيد:(ايران گستر)

مشاهده ي خروجي در JSBin

همانطور که مي بينيد اين موضوع بسيار ساده بود.

تگ <style>

ما در دوره ي CSS توضيح ميدهيم که کدهاي CSS به سه روش اصلي نوشته مي شوند:

• به صورت inline (به صورت attribute)


• به صورت internal (در قسمت <head> از سند HTML)


• به صورت external (در يک فايل جداگانه)

در واقع تگ <style> مورد دوم يا internal است. به مثال زير توجه کنيد:

مشاهده ي خروجي در JSBin

استفاده از کدهاي CSS به اين صورت ايده آل ترين حالت ممکن نيست اما ضربه ي جدي نيز به شما نمي زند. معمولا در يک وب سايت واقعي از آن جا که کدهاي CSS بسيار حجيم مي شوند مجبور مي شويد آن ها را در يک فايل جداگانه (external) بنويسيد و سپس با استفاده از link آن ها را به سند HTML متصل کنيد. اين نوع از نوشتن کدهاي CSS معمولا براي مباحث يادگيري و تمرين و يا کدهاي CSS خاصي است که برنامه نويس مي خواهد در آن قسمت قرار بگيرند.(ايران گستر)

تگ <link>