طراحی وب برای کودکان 👶: خوش آمدید

اینترنت در حال حاضر بخش بزرگی از زندگی همه را تشکیل می‌دهد، پس هیچوقت برای یادگیری طراحی وب زود نیست. در این دوره خوش ساخت و رنگی، نویسنده‌ای به اسم Joni Trythall قصد دارد تا با مفاهیم وب آشنای‌تان سازد و در پایان شما را با ساخت یک وبسایت ساده آشنا کند. حال که شما در حال خواندن این موضوع هستید خواه یک معلم باشید، خواه یکی از والدین و یا خود کودک این دوره بسیار مناسب است و مطمئن باشید که با دنبال کردن این سری می‌توانید به بهترین نحو پایه های وب را بیاموزید.😉

«مترجم: ارسطو عباسی هستم و خوشحالم که با یک سری آموزشی بسیار عالی با شما همراهم. درست است که عنوان این دوره طراحی وب برای کودکان است، اما منظور از کودک صرفا رده سنی پایین نیست، بلکه می‌تواند فردی باشد که به تازگی قصد ورود به دنیای طراحی وب را دارد. این دوره آموزشی را می‌توانید به زبان اصلی در این لینک مشاهده کنید.»

به وبسایت من خوش آمدید، اینجا جایی است که همگی عاشق طراحی وب هستند. همانطور که گفته شد در این دوره آموزشی قصد داریم شما را با مفاهیم وب و چگونگی ساخت یک وبسایت ساده آشنا کنیم.

این دوره به صورت قدم به قدم به شما یاد می‌دهم که چگونه یک وبسایت را از پایه بسازید و آن را در فضای اینترنت زنده کنید. تمام فایل های تمرینی در پایان هر جلسه‌ای قرار می‌گیرد، پس شما می‌توانید آنها را با نمونه های انجام شده خود مقایسه کنید. خب پس، وارد دوره شویم.

وب چگونه کار می‌کند؟


بگذارید اول با قدم های پایه‌ای شروع کنیم و بدانیم که وب چگونه کار می‌کند.

زمانی که دو کامپیوتر به اینترنت متصل می‌شوند (در تصویر زیر با رنگ زرد نشان داده شده) آنها می‌توانند با همدیگر صحبت کنند.

یک سرور (جعبه آبی داخل تصویر) یک کامپیوتر مخصوص است که تمام فایل‌های مربوط به صفحات وب را در خود نگه‌داری می‌کند. کامپیوتر خانه و یا مدرسه شما یک سرور نیست به این دلیل که به صورت مستقیم به اینترنت متصل نشده است. ما معمولا به اینترنت از طریق یک سرویس فراهم کننده اینترنت یا ISP (Internet Service Provider) متصل می‌شویم.

محتوای وبسایت‌ها (بخش مهمی که همه چیز در رابطه با آن تعریف می شود) براساس یکسری قواعد خاص از درک کامپیوتر سازمان‌دهی و ساخته می شود. قواعدی مانند صحبت کردن به صورت رمزی، باقاعده و زبان‌های کدنویسی، که ما در این دوره نیز قصد داریم چنین کارهای رمزی را انجام دهیم!

در این تصویر مرورگر قصد دارد تا وبسایت www.tutsplus.com را مشاهده کند، این در حالی است که فایل های مربوط به وبسایت در سرور موجود هستند. بعد از آن سرور فایل‌ها را به مرورگر برگشت می‌دهد و مرورگر آنها را ترجمه و به ما نشان می‌دهد. این کارها بسیار سریع رخ می‌دهند.

تمام این موارد که گفته شد اطلاعاتی در رابطه با به اشتراک گذاری و اتصالات است.

اگر شما وبسایتی را به صورت محلی در کامپیوتر خود داشته باشید، هیچ شخص دیگری بغیر از شما قادر به دیدن آن نیست، به این دلیل که محتوای وبسایت شما روی سرور قرار نگرفته است. در قدم های بعدی بیشتر راجع به چگونگی انجام این کار بحث خواهیم کرد.

شغل طراح وب


شغل طراحان وب موضوع بسیار مهمی است. تمام اقداماتی که در تصویر بالا مشاهده کردید تنها به یک دلیل انجام میشود: نمایش وبسایت! وظیفه یک طراح وب این است که چگونگی نمایش و کارکرد یک وبسایت را تعیین کند، البته موارد دیگری نظیر اینکه مطمئن شود وبسایت برای بازدیدکننده معلول قابل استفاده است نیز شامل وظایف وی می‌شود.

پروژه ما


در این دوره از وبسایت قصد داریم تا وبسایتی برای Tuts+ Town طراحی کنیم. این وبسایت احتیاج دارد تا اطلاعات کلی راجع به شهر‌ ما در آن قرار بگیرد. می توانید پیشنمایش این وبسایت را در تصویر زیر مشاهده کنید:

این وبسایت شامل همه موارد مهم مورد نیاز در زمینه طراحی وب است که مطمئن باشید تمام نکات آن را یاد خواهید گرفت. می‌توانید این وبسایت را به عنوان اولین پروژه خودتان در نظر بگیرید.

طراحی و ساخت


خب بیاید کمی راجع به اینکه برای ادامه کار به چه چیزهایی نیاز داریم صحبت کنیم.

اول از همه طرح اصلی مربوط به وبسایت را کشیده و سپس چیزهایی که مورد نظر است را داخل فایل مخصوصی قرار می‌دهیم. همچنین در این فایل لینک‌هایی را قرار می دهیم تا بازدیدکنندگان بتوانند به بخش‌های مختلف وبسایت مانند قسمت فروشگاه دسترسی پیدا کنند.

استایل‌دهی


بعد از اینکه فایل اصلی خود را ساختیم و قسمت های اصلی را در آن قرار دادیم، حال نوبت آن می رسد که طرح مورد نظرمان را زیبا کنیم. اینجا قسمتی است که تمام ایده‌هایمان را برای رنگ و لایه بندی می توانیم زنده کنیم.

چگونه می توانیم وبسایت‌مان را برای استفاده آسان کنیم؟ رنگ هایی که استفاده می کنیم قصد دارند چه احساسی به مخاطب بدهند؟ همه چیزهای وبسایت زمانی که با موبایل مشاهده می شود باید در کجا قرار بگیرند؟ درباره حالت تمام صفحه در یک کامپیوتر چه؟ چه فونتی مناسب وبسایت‌مان است؟ این سوالات، مواردی هستند که باید در رابطه با آنها فکر کنید، البته نگران نباشید. انجام این کارها واقعا جذاب و سرگرم کننده است و بعد از انجام چند پروژه خیلی ساده می‌شود.

نقشه دوره


در زیر نقشه کاملی آورده شده است که نشان می دهد برای طراحی وبسایت‌مان نیاز به چه قدم‌هایی داریم. هر کدام از بلاک‌ها در این تصویر دارای موضوعات و مقدمات است که در نهایت خود به قسمت های کوچک تری نیز تبدیل می‌شود.

مقدمات


شما می توانید این قسمت را در ابتدای نقشه به همراه یک ستاره صورتی مشاهده کنید. خب تا به اینجای کار ما ذهنیت پایه‌ای راجع به اینکه دنیای وب چگونه کار می‌کند و یک شغل مبتنی بر وب چیست پیدا کرده‌ایم و در اوج این دوره با ساختن و طراحی یک وبسایت آشنا خواهید شد.

ساختن یک وبسایت


قدم بعدی جایی است که ما می‌خواهیم در رابطه با ایده خود فکر کنیم و شروع به کشیدن آن کنیم. کشیدن طرح یک وبسایت مرحله بسیار جالب و مفرحی است که قبل از کدنویسی وبسایت شروع می‌شود. این کار باعث می‌شود زمان زیادی را صرفه‌جویی کنیم و در بازه‌ی فعالیت‌ها بمانیم.

در ادامه قصد داریم تا در رابطه با فایل‌ها و ابزارهایی که برای کدنویسی وبسایت‌مان نیاز داریم صحبت کنیم.

HTML


زبان نشانه‌گذاری ابرمتن که به انگلیسی HyperText Markup Language –به اختصار HTML- نام دارد یک زبان رمزی است (دارای قواعد خاص) که با آن محتوای فایل‌های متنی مربوط به صفحات وب را سازمان‌دهی می‌کنیم. –در تصاویر به صورت مختصر به آن اشاره شده است.- این زبان به مرورگر کمک می‌کند تا فایل‌های مربوط به وبسایت را درک کند و آن‌ها را نمایش دهد.

وبسایت ما و تمام وبسایت‌های دیگر دنیا از طریق عناصر این زبان نوشته شده و زنده‌اند! عناصر بخشی از این زبان هستند که هرکدام دارای مفهوم خاص خود هستند و به ما کمک می‌کنند تا همه چیزی را که در صفحات وب قرار می‌دهیم، توصیف کنیم.

در مورد کدهای نوشته شده در این تصویر نگران نباشید و از اینکه نمی‌توانید آنها را درک کنید ترسی به دلتان راه ندهید. تنها این را بدانید که هر وبسایتی از سندهای متنی به این شکل ساخته می‌شود.

CSS


شیوه‌نامه آبشاری که به انگلیسی Cascading Stylesheets –به اختصار: CSS- نام دارد به شما اجازه می‌دهد برای جذاب کردن و استفاده آسان از وبسایت توسط کاربر، یکسری از استایل‌ها (مانند: رنگ، فونت و حس کلی) را داخل وبسایت‌‌تان تعیین کنید.

لایه‌بندی با CSS

CSS همچنین به ما اجازه می‌دهد تا بتوانید قسمت‌های مختلف داخل وبسایت‌ را لایه‌بندی کنید.

تصاویر


در این دوره آموزشی قصد دارم تا به صورت سریع شما را با انواع مختلف تصاویر که قرار است در وبسایت استفاده کنیم آشنا سازم. علاوه بر این شما یاد خواهید گرفت که چگونه استایل‌های مورد نظرتان را روی آنها استفاده کنید. در اینجا چند تصویر کوچک و زیبا قرار گرفته است، شما در مورد آنها چه فکر می‌کنید؟

پایه‌های طراحی


در این مرحله قصد دارم شما را با «بلوک‌های ساختمان» طراحی وب آشنا کنم. ما می‌خواهیم مطمئن شویم وبسایتی را می‌سازیم که مردم می‌توانند به آسانی از آن استفاده کنند درست مانند زمانی که مشغول طراحی و استایل‌دهی به وبسایت هستیم.

تایپوگرافی


تایپوگرافی بخشی هنری برای چیدمان کلمات داخل وبسایت به حساب می‌آید. طراحی این عنصر درحالیکه می‌تواند وبسایت شما را موفق کند، می‌تواند باعث شکست آن نیز بشود.

به عنوان یک مثال ساده در همین ابتدای کار می‌توان تصویر زیر را به عنوان یک تایپوگرافی در نظر بگیرید:

رنگ


رنگ قسمت بسیار مهم و مفرح وبسایت است! رنگ باعث می‌شود که یک وبسایت زیبا و دارای مفهوم منحصر به فرد خود باشد. در این دوره قصد دارم به صورت مفصل راجع به آن صحبت کنم.

پایان این دوره


ما این دوره را زمانی به اتمام می‌رسانیم که شما بتوانید یک وبسایت را به صورت زنده روی سرور قرار دهید تا تمام دوستان و خانواده‌تان بتوانند آن را از طریق اینترنت مشاهده کنند. بعد از اتمام این کار می‌توانیم با هم راجع به ادامه کار و انجام مطالعات بیشتر در این زمینه صحبت کنیم.

یادتان باشد عجله نکنید، ما هنوز در قدم‌های اول هستیم.

به زودی می‌بینمتان😍

در جلسه بعدی یادخواهیم گرفت که چگونه خودمان را برای ساختن یک وبسایت با HTML آماده کنیم. من که نمی‌توانم صبر کنم.

منتشرشده توسط

ارسطو عباسی

یه نویسنده، وبلاگ‌نویس و توسعه‌دهنده خودآموخته‌ام. کسی که به هنر، برنامه‌نویسی، علوم، فلسفه، ریاضیات، ادبیات و مسافرت خیلی علاقه داره و هر روز سعی می‌کنه که چیزهای جدیدی رو یاد بگیره و آموزش هم بده.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *