آموزش های طراحی و برنامه نویسی وب
یه اتاق خاص و باحال برای علامه مندان به یادگیری . شروع کن ، دوره ببین ، یاد بگیر ، نظر بده و پیشنهاد کنآموزش های طراحی و برنامه نویسی وب
یه اتاق خاص و باحال برای علامه مندان به یادگیری . شروع کن ، دوره ببین ، یاد بگیر ، نظر بده و پیشنهاد کنآموزش ساخت پسورد لیست در کالی با ابزار crunch
در این ویدیو شما ساخت پسورد لیست رو در کالی و در محیط ویندوز یاد میگیرید.
آموزش طراحی رابط کاربری سایت . جلسه سوم
درباره این جلسه
توی این قسمت از تگ های heading یا تگ های عنوان شروع کردیم . مباحث اصلی که توی این بخش باید گفته میشد ، انواع سلکتور ها ، انواع استایل دهی به صفحات وب و دو مورد از خاصیت های Css3 هستند .
آموزش طراحی رابط کاربری سایت . جلسه دوم
درباره این جلسه !
توی جلسه دوم درباره ابزار های نقاشی یا همون html و css حرف زدیم و سعی کردیم که تا جایی که لازم بود شمارو با html توی این جلسه آشنا کنیم و جلسه بعد رو به css اختصاص بدیم . بعد از جلسه سوم انشالله وارد فاز عملی میشیم و توی اون بخش ، از هر چیزی که بخوایم استفاده کنیم قبلش یه توضیح مفصل دربارش میدیم . با ما همراه باشید .
HTML چیست ؟
HTML یه زبان نشانه گذاری ابر متنه ( مخفف Hyper Text Makup Language ) که برای ساخت عناصر و ساختار یا همون ستون های صفحه وب بکار میره . اگه یادتون باشه توی جلسه اول گفتیم که ( بعنوان مثال ) مداد سیاهی برای طراحی به ما ارائه میده . مثل ساخت فرم ها ، باکس های متنی ، لینک ها ، عکس ها و... .توی مثال ساده تر html مثل ساختار اسکلت انسان هستش .
البته html یه زبان برنامه نویسی نیست و نباید اون رو با زبان های برنامه نویسی اشتباه بگیریم .
حالا HTML5 چیه ؟
HTML5 آخرین نسخه از HTML هستش که تاکنون ارائه شده و اگه شما میخواین یه طراح وب بشین ، قطعا باید از این نسخه استفاده کنید و نسخه های قدیمی رو نادیده بگیرین . این نسخه طیف وسیعی از امکانات مختلف برای طراحی عناصر صفحه رو به شما میده و خیلی از مرورگر های جدید و بروز دنیا هم ازش پشتیبانی میکنن . در ادامه در مورد Css و آخرین نسخه اون هم صحبت میکنیم.
خب پس در مورد اینکه html چیه و چه کاربردی داره مفصل حرف زدیم . حالا این html یه سری اصطلاحات ریز و ساده داره .
Tag چیست ؟
اولین اصطلاح ساده HTML !
تگ ها همون نشانه ها هستن . گفتیم که HTML یه زبان نشانه گذاریه . تگ به معنی همون نشانه است . HTML هر کاری که انجام میده رو در قالب تگ ها و بر اساس اون ها انجام میده . مثلا با استفاده از هر تگ میگه که این عنصر مثلا این عکس یا این لینک کجا باشه یا اصلا با استفاده از فلان تگ یه جدول ایجاد میکنه .بصورت کلی ما تمامی عناصر موجود در صفحه مون رو با استفاده از تگ ها ایجادمیکنیم .
چجوری تگ ها رو ایجاد کنیم ؟
خیلی ساده ! همه عناصر HTML یا بهتره بگیم اکثر تگ های HTML با یه علامت <> شروع و یه علامت </> تموم میشن . اسم تگ رو درون این علامت ها مینویسیم .
<tagname>
...
<tagname/>
این ساختار یه تگ معمولی در html هستش . انواع مختلفی از تگ ها توی html وجود داره ( حالا از جهات مختلف ) . سه تا تگ اصلی هستش که برای ساخت یه سند html "باید" اون هارو بنویسید. اصلی ترین و پدر همه تگ های html ، خود تگ ِ html هستش .
<html>
<html/>
شما هر چیزی که تویه صفحهوب بخواین بنویسین باید درون این تگ ها و دو تگ بعدی بنویسین . یعنی تگ های head و body .
<html>
<head>
...
<head/>
<body>
...
<body/>
<html/>
از اسماشون هم مشخصه . html که نشون دهنده نوع سند ماست و صفحه مارو به مرورگر معرفی میکنه .
توی تگ head هر چیزی که مربوط به اطلاعات صفحه باشه رو قرار میدیم و اون چیز هایی که ما درون این تگ مینویسیم لزوما توسط کاربر دیده نمیشن .
اما توی تگ Body دقیقا هر چیزی که بنویسین توی صفحه مرورگر نمایش داده میشه . مثل یه لینک ، مثل یه عکس ، مثل یه دکمه ، مثل یه پاراگراف و غیره و غیره .
حالا انواع تگ ها از نظر Block بودن و Inline بودن ؟
یسری تگ ها هستن که فضایی که محتواشون اشغال میکنن به حدیه که عنصر بعد رو حتما به خط بعد از خودشون منتقل میکنن ( بطور ساده ! ) مثل تگ <p> ( که برای ایجاد یه پاراگراف استفاده میشه )
در اینجا سه تا پاراگراف داریم که خودتون هم میبینید هر پاراگرفا عنصر بعدی یا پاراگرفا بعد از خودش رو به خط بعد منتقل کرده . این یعنی هر کدوم از این پاراگراف ها یه خاط کامل رو ( علارغم محتوای کمشون ) اشغال کردن . به عناصر این مدلی میگیم عناصر بلاک ( Block ) یا تگ های بلاک .
حالا تگ های دیگه هم هستن که بهشون تگ Inline میگن . محتوای این تگ ها فقط به اندازه خودشون فضا اشغال میکنن و نه بیشتر . مثل تگِ <a> که برای ایجاد لینک به کار میره .
همونطور که مشاهده میکنید دوتا تگ <a> داریم با محتوای Link 1 و Link 2. نتیجه تو عکس زیرمشخصه .
تگ های <a> ما فقط به اندازه خودشون فضا اشغال کردن و عنصر بعد رو که یه تگ <a> دیگه هست ، رو کنار خودش انداخته . به تگ های این مدلی تگ Inline میگن .
نکته بعدی درباره خاصیت تگ هاست . خاصیت ها ، ویژگی ها یا همون Attribute ها .
Attribute چیست ؟
attribute ها ویژگی هایی هستن که تگ ها میگیرن . همه تگ های یه سری خاصیت عمومی دارن یه سری خاصیت خصوصی . که دیگه بهتره عادت کنیم و بهشون بگیم اتریبیوت ( attribute ) .
اتریبیوت های خصوصی ، ویژگی هایی هستن که فقط مختص به یک تگ هستن و نمیشه اون رو توی تگ های دیگه بکار برد ولی اتریبیوت های عمومی اتریبیوت هایی هستن که توی هر تگی میشه از اونها استفاده کرد .
مثلا اگه دقت کرده باشین توی مثال بالا ، لینکی که ایجاد کردیم بیشتر متنه تا لینک . خب این تگ <a> یه خاصیتی میگیره یه اتریبیوتی میگیره به اسم "href" . این اتریبیوت رو وقتی توی این تگ مینویسیم که بخوایم بهش آدرس بدیم . مثلا من میخوام وقتی روی Link1 کلیک کردم وارد سایت گوگل بشم . باید چیکار کنم ؟ باید مقدار اتریبیوت href رو برابر با آدرس مقصد قرار بدم . اول از همه نحوه نوشتن اتریبیوت رو میگم و بعد مقدار دهی اتریبیوتِ href . اتریبیوت ها رو باید به شکل زیر توی تک قرار بدین .
و حالا نتیجه باعث لینک شدن متحوای تگ <a> میشه .
اینم از این ! حالا اگه روی Link1 کلیک کنید وارد سایت گوگل میشید .
نتیجه گیری !
این ها نکاتی بود که توی این جلسه بیان شد . سعی کردیم که توی این جلسه هر چیزی که برای آشنایی با html نیاز بود رو بیان کرده باشیم . توی جلسه بعد درباره css حرف میزنیم و مثل این جلسه یکم باهاش کار میکنیم تا آشنایی لازم رو با طرز کار Css پیدا کنیم . هرچی که جلوتر میریم چیزای جدیدتری توی دوره مشاهده میکنید که قطعا قبلش درباره هرکدوم توضیح مفصلی ارائه میدیم . لطفا نظر ، انتقاد یا پیشنهاداتتون رو برای ما ارسال کنید . با تشکر .
جواد یوسفی
دوره آموزشی طراحی رابط کاربری سایت ( UI )
طراحی سایت یکی از لذت بخش ترین و در عین حال ساده ترین کار های دنیاست . یکی از ویژگی های یه وبسایت خوب ، ظاهر مناسبه . بطوری که وقتی کاربر وارد سایت میشه و ایجاد تعامل میکنه ، از محیطی که واردش شده لذت ببره و بازم به وبسایت ما سر بزنه . ممکنه برای هممون پیش اومده باشه که وارد یه سایتی شدیم و اون سایت محتوایی که میخواستیمو داشته ولی بخاطر ظاهر نامناسبش همون موقع سایتو ترک کردیم. ما سعی کردیم که توی این دوره ، مهارت ساخت یه رابط کاربری مناسب رو به شما یاد بدیم و با یه مثال عملی جلو بریم .
چه چیز هایی ازین دوره کسب می کنید ؟
همون طور که گفتم توی این دوره سعی داریم مهارت ساخت یه UI مناسب رو به شما آ»وزش بدیم . مهارت و تسلط کافی به html5 و css3
، از جمله چیز هایی هست که توی این دوره بدست میارید . در کل اگه با کارو تمرین این دوره رو بگذرونید بهتون قول میدم که به یه طراح UI بسیار خوب تبدیل می شید.
این دوره کاملا پروژه محور است و تمامی مراحل آموزش ، با یک مثال عملی همراه است .
در این دوره ، در جلسات اول از نرم افزار Notepad++ برای ساده بودن کار استفاده شده و وقتی که وارد فاز عملی و شدیم از نرم افزار Adobe Dreamweaver 2018 برای سرعت بخشیدن به کار استفاده کردیم .
جلسه اول : آشنایی بادوره و صحبت درباره Html و Css
نظرات و پیشنهادات وهمچنین انتقاداتتون رو برای ما ارسال کنید .