مشاهده نسخه کامل
: esmaeil.net
16-08-2012, 22:15
وب چگونه کار می کند؟ چطور می توان تکنیک های ساخت صفحات وب را به سرعت و به آسانی یاد گرفت؟ برای شروع یادگیری آسان HTML و CSS باید از کجا شروع کرد؟ چگونه می توان محتوای چندرسانه ای را برای استفاده در وب به آسانی تهیه کرد؟ Mozilla Webmaker پاسخی است به تمامی این پرسش ها. Mozilla Webmaker شامل ابزارها و جامعه ای است که یک هدف اصلی را دنبال می کند: کمک به میلیون ها نفر برای کوچ کردن از به کار بردن وب به سمت ساختن وب.
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
Mozilla Webmaker سه ابزار آموزشی برای یادگیری چگونگی کارکرد وب سایت ها و کمک به ساخت صفحات وب در اختیار شما قرار می دهد. بد نیست نگاهی به این ۳ ابزار بیندازیم.
Thimble
Thimble یک ویرایشگر فایلهای HTML است که ساخت صفحات وب را برای شما بسیار ساده کرده است و در یادگیری آسان HTML و کمی هم CSS به یاریتان می آید. در کل باید گفت که به کمک Thimble نوشتن و ویرایش کدهای HTML و CSS، پیش نمایش فوری آنچه که انجام داده اید و انتشار و اشتراک صفحات تولید شده بسیار آسان خواهد بود.
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
برای شروع کار با Thimble هم کافیست به اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بروید. حال می توانید کار یادگیری را از صفر ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) شروع کنید و یا با انتخاب یک پروژه ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])، مراحل یادگیری را پیش ببرید. پروژه ها شامل صفحات قابل دستکاری هستند و به این ترتیب می توانید با دستکاری صفحات و مشاهده ی تغییرات ایجاد شده، درک و فهم خود را از چگونگی کارکرد عناصر و تگهای HTML بالاتر ببرید. پروژه ها را نیز می توان بر اساس دشواری، موضوع، و مهارت هایی که مورد نیاز تکمیل پروژه است فیلتر کرد. در ضمن می توانید به کمک نکات آموزشی ای که ویرایشگر Thimble به شما نشان می دهد روند یادگیریتان را سرعت بخشید.
همانطور که اشاره شد انتشار و اشتراک صفحات تولید شده نیز بسیار ساده است و تنها با یک کلیک می توانید آن را به اشتراک بگذارید. می توانید لینک صفحات تولید شده را توییت کنید یا با کپی کردن لینک، آن را در سایتتان یا در جاهای دیگر به اشتراک بگذارید. در ضمن پروژه ها تنها به کار با CSS و HTML ختم نمی شود و شامل کار با JavaScript نیز می شوند. به طور مثال می توانید با انتخاب پروژه ای مربوط به کار با جاوا اسکریپت به ساخت یک بازی جاوا اسکریپ بپردازید. پیشنهاد می کنم حتما سری به پروژه های Thimble ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بزنید.
X-Ray Goggles
به کمک X-Ray Goggles و با استفاده از مهندسی معکوس نیز می توانید چگونگی در کنار هم قرار گرفتن عناصر HTML و به این ترتیب، چگونگی ساخت یک صفحه ی وب را به آسانی و به طرزی جذاب یاد بگیرید. طرز کار با X-Ray Goggles بسیار ساده است. کافیست به اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بروید و روی دکمه ی X-Ray Goggles کلیک کنید. حال با گذاشتن نشانگر موس روی هر یک از عناصر صفحه، و فشار دادن حرف R از روی کیبورد، قاب یا فریمی مانند تصویر زیر را مشاهده خواهید کرد که شامل دو قسمت خواهد بود. در سمت چپ قاب، شاهد کد HTML عنصر یا تگ انتخاب شده خواهید بود و در سمت راست نیز، چیزی که در مرورگر نمایش داده می شود را خواهید دید. به عبارت دیگر، در یک طرف قاب، کدها قرار دارند و در طرف دیگر، نتایج!
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
در سمت چپ قاب، دو تب یا دو زبانه، جهت نمایش کد وجود دارد. Basic و Advanced که می توانید با سوییچ کردن بین هر یک از آنها و تغییر مقادیر هر عنصر و تگ انتخابی، در سمت راست قاب، شاهد تغییرات اعمال شده باشید که همین امر، درک شما را از چگونگی کارکرد هر یک از تگها، عناصر، مقادیر و … بالاتر خواهد برد. در آخر نیز می توانید با کلیک بر روی گزینه ی Commit Changes تغییرات اعمال شده را در مرورگر مشاهده کنید.یکی دیگر از امکانات بسیار جالب و کاربردی X-Ray Goggles امکان اعمال آن به هر صفحه ی دلخواه دیگر است. کافیست که X-Ray Goggles را در لیست بوکمارک مرورگر خود قرار دهید. مثلا در مرورگر کروم با رفتن به آدرس X-Ray Goggles ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) و کشیدن و رها کردن دکمه ی X-Ray Goggles در لیست بوکمارکها، از این به بعد با رفتن به هر سایتی و کلیک بر روی X-Ray Goggles از لیست بوکمارکها، می توانید انواع تگها و عناصر و مقادیر صفحه ی مورد نظر را شناسایی کنید، آنها را تغییر بدهید و شاید هم از آنها در طراحی های خود استفاده کنید!Popcornبه کمک Popcorn ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) می توانید به تولید محتوای چند رسانه ای نظیر فایلهای ویدیویی برای استفاده در صفحات وب بپردازید. Popcorn Maker ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) با بیش از ۲۰ افزونه ی خود شما را قادر به ساختن انواع ویدیو و محتوای چند رسانه ای جهت نمایش در وب می سازد.
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
البته استفاده از Popcorn Maker با توجه به سرعت نامناسب اینترنت در اکثر نقاط کشور برای همگان امکان پذیر نیست و یا ممکن است به سادگی نتوان از آن استفاده کرد اما به کسانی که اینترنت پر سرعت و مناسبی در اختیار دارند پیشنهاد می کنم که سری هم به Popcorn Maker ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بزنند و کمی با آن تفریح کنند.
منبع: Esmaeil.net ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
Mozilla Webmaker سه ابزار آموزشی برای یادگیری چگونگی کارکرد وب سایت ها و کمک به ساخت صفحات وب در اختیار شما قرار می دهد. بد نیست نگاهی به این ۳ ابزار بیندازیم.
Thimble
Thimble یک ویرایشگر فایلهای HTML است که ساخت صفحات وب را برای شما بسیار ساده کرده است و در یادگیری آسان HTML و کمی هم CSS به یاریتان می آید. در کل باید گفت که به کمک Thimble نوشتن و ویرایش کدهای HTML و CSS، پیش نمایش فوری آنچه که انجام داده اید و انتشار و اشتراک صفحات تولید شده بسیار آسان خواهد بود.
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
برای شروع کار با Thimble هم کافیست به اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بروید. حال می توانید کار یادگیری را از صفر ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) شروع کنید و یا با انتخاب یک پروژه ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])، مراحل یادگیری را پیش ببرید. پروژه ها شامل صفحات قابل دستکاری هستند و به این ترتیب می توانید با دستکاری صفحات و مشاهده ی تغییرات ایجاد شده، درک و فهم خود را از چگونگی کارکرد عناصر و تگهای HTML بالاتر ببرید. پروژه ها را نیز می توان بر اساس دشواری، موضوع، و مهارت هایی که مورد نیاز تکمیل پروژه است فیلتر کرد. در ضمن می توانید به کمک نکات آموزشی ای که ویرایشگر Thimble به شما نشان می دهد روند یادگیریتان را سرعت بخشید.
همانطور که اشاره شد انتشار و اشتراک صفحات تولید شده نیز بسیار ساده است و تنها با یک کلیک می توانید آن را به اشتراک بگذارید. می توانید لینک صفحات تولید شده را توییت کنید یا با کپی کردن لینک، آن را در سایتتان یا در جاهای دیگر به اشتراک بگذارید. در ضمن پروژه ها تنها به کار با CSS و HTML ختم نمی شود و شامل کار با JavaScript نیز می شوند. به طور مثال می توانید با انتخاب پروژه ای مربوط به کار با جاوا اسکریپت به ساخت یک بازی جاوا اسکریپ بپردازید. پیشنهاد می کنم حتما سری به پروژه های Thimble ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بزنید.
X-Ray Goggles
به کمک X-Ray Goggles و با استفاده از مهندسی معکوس نیز می توانید چگونگی در کنار هم قرار گرفتن عناصر HTML و به این ترتیب، چگونگی ساخت یک صفحه ی وب را به آسانی و به طرزی جذاب یاد بگیرید. طرز کار با X-Ray Goggles بسیار ساده است. کافیست به اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بروید و روی دکمه ی X-Ray Goggles کلیک کنید. حال با گذاشتن نشانگر موس روی هر یک از عناصر صفحه، و فشار دادن حرف R از روی کیبورد، قاب یا فریمی مانند تصویر زیر را مشاهده خواهید کرد که شامل دو قسمت خواهد بود. در سمت چپ قاب، شاهد کد HTML عنصر یا تگ انتخاب شده خواهید بود و در سمت راست نیز، چیزی که در مرورگر نمایش داده می شود را خواهید دید. به عبارت دیگر، در یک طرف قاب، کدها قرار دارند و در طرف دیگر، نتایج!
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
در سمت چپ قاب، دو تب یا دو زبانه، جهت نمایش کد وجود دارد. Basic و Advanced که می توانید با سوییچ کردن بین هر یک از آنها و تغییر مقادیر هر عنصر و تگ انتخابی، در سمت راست قاب، شاهد تغییرات اعمال شده باشید که همین امر، درک شما را از چگونگی کارکرد هر یک از تگها، عناصر، مقادیر و … بالاتر خواهد برد. در آخر نیز می توانید با کلیک بر روی گزینه ی Commit Changes تغییرات اعمال شده را در مرورگر مشاهده کنید.یکی دیگر از امکانات بسیار جالب و کاربردی X-Ray Goggles امکان اعمال آن به هر صفحه ی دلخواه دیگر است. کافیست که X-Ray Goggles را در لیست بوکمارک مرورگر خود قرار دهید. مثلا در مرورگر کروم با رفتن به آدرس X-Ray Goggles ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) و کشیدن و رها کردن دکمه ی X-Ray Goggles در لیست بوکمارکها، از این به بعد با رفتن به هر سایتی و کلیک بر روی X-Ray Goggles از لیست بوکمارکها، می توانید انواع تگها و عناصر و مقادیر صفحه ی مورد نظر را شناسایی کنید، آنها را تغییر بدهید و شاید هم از آنها در طراحی های خود استفاده کنید!Popcornبه کمک Popcorn ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) می توانید به تولید محتوای چند رسانه ای نظیر فایلهای ویدیویی برای استفاده در صفحات وب بپردازید. Popcorn Maker ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) با بیش از ۲۰ افزونه ی خود شما را قادر به ساختن انواع ویدیو و محتوای چند رسانه ای جهت نمایش در وب می سازد.
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
البته استفاده از Popcorn Maker با توجه به سرعت نامناسب اینترنت در اکثر نقاط کشور برای همگان امکان پذیر نیست و یا ممکن است به سادگی نتوان از آن استفاده کرد اما به کسانی که اینترنت پر سرعت و مناسبی در اختیار دارند پیشنهاد می کنم که سری هم به Popcorn Maker ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) بزنند و کمی با آن تفریح کنند.
منبع: Esmaeil.net ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])