زبان استفاده از طراحان وب چیست؟
جهان امروز به سمت تخصص فوق العاده ای (به عنوان مثال برنامه های تلفن همراه برای تقریبا هر چیزی) است. اکثر طراحان ترجیح می دهند روی نقاط قوت خود تمرکز کنند - جنبه های خلاقانه طراحی وب سایت. اجازه دهید توسعه دهنده چگونگی آوردن آن را به زندگی بیاندازد. یا بهتر است، یک سایت زنده با ابزار طراحی مدرن ایجاد کنید، جایی که بدون نیاز به یک برنامه نویس تماس بگیرید!
راهنمای طراح وب برای برنامه نویسی
اما در اینجا چیزی است که به عنوان یک خلاق، شما می خواهید کنترل کامل بر کار خود را. شما می خواهید کار خود را ادامه دهید. شما می خواهید مرزها را فشار دهید.
برای شناختن هنر خودتان، باید محیط را درک کنید. رسانه وب، کد است.
برای کسانی که تمایل به ساخت وب سایت دارند، سوال این است که آیا طراح وب باید یاد بگیرد که چگونه کد شود؟ اما بیشتر از این است که کدام یک از طراحان وب باید یاد بگیرند؟
یک طراح لازم نیست یک گورو HTML یا CSS باشد. یا یک کدور متخصص. طراح باید به اندازه کافی در مورد کد ای که مبنای وب را تشکیل می دهد را درک کند برای اینکه بتواند نقاط اتصال و تصمیم گیری های طراحی صدا را در اختیار داشته باشد.
برای کسی که قبلا برنامه نویسی نداشته است، می تواند کمی غرق شود. HTML، CSS، جاوا اسکریپت، پی اچ پی، روبی، SQL .. توسعه وب در واقع از یک دسته از زبان های برنامه نویسی مختلف استفاده می کند. اگر طراح هستید که علاقمند به یادگیری نحوه طراحی وب سایت شما می شود، در اینجا چیزی است که باید بدانید و شروع به کار کنید.
جلو پایان در مقابل عقب پایان وب توسعه
بخشی از وبسایت که بازدیدکنندگان آن را مشاهده می کنند، نام جلویی است. پایان برگشت شامل تمام داده ها، تصاویر، سرور و سایر اجزای ذخیره شده می باشد. طراحی و توسعه وب کمی شبیه ساخت یک خانه است معمار خانه را طراحی می کند بسیار شبیه طراحی وب سایت وب سایت؛ خدمه ساخت و ساز آجر، ملات، لوله کشی و غیره به همان اندازه به عقب پایان توسعه، نقاشان، تزئینات داخلی و غیره دست زدن قابل ملاحظه و پایان دادن به خانه های مشابه به توسعه پایان جلویی.
توسعه ظاهری در HTML، CSS و جاوااسکریپت انجام می شود، در حالی که توسعه دهندگان عقب معمولا از برنامه های PHP، Ruby، Python، Java، SQL یا .Net استفاده می کنند. توسعه دهندگان کامل پشته که متوجه می شوند و می توانند پشته کامل را کد کنند یعنی هر دو ظاهر و پسزمینه. (برای کسب اطلاعات بیشتر در مورد پایان جلویی در مقابل عقب پایان، شما می توانید اینجا و اینجا را بخوانید).
طراح نیازی به یادگیری تمام این زبان های برنامه نویسی ندارد. هدف این نیست که یک توسعه دهنده کامل پشته باشد، یا واقعا هر نوع توسعه دهنده (مگر اینکه واقعا میخواهید تغییر ایجاد کنید)! هدف این است که بدانیم چگونه یک طرح به کد تبدیل می شود. برای طراحان منطقی است که به درک اصول اولیه برنامه نویسی پایان دهند، زیرا این بخشی است که طرح و عناصر بصری طراحی را ایجاد می کند.
HTML (زبان نشانه گذاری HyperText)
رفتن از طرح یا مدل به یک وب سایت زنده شامل مراحل بسیاری از برنامه نویسی می شود، و همانطور که در بالا دیده اید، بسیاری از زبان ها را می بینید. اولین گام در این فرآیند معمولا برای طراحی اجزای سایت به عناصر HTML و ارسال کد HTML پایه است. هر مولفه عنصر نامیده می شود و با استفاده از برچسب ها مشخص می شود. متن، تصاویر، انیمیشن ها هر یک به یک عنصر HTML تبدیل می شوند. هر عنصر به یک سلسله مراتب نامیده می شود که درخت DOM است که تعیین می کند که کدام عنصر بارگیری و نمایش داده می شود. در اینجا یک مثال ساده از HTML پایه است.
<!DOCTYPE html>
<html>
<body>
<h1>A Dummy Heading</h1>
<p>Some text that spans the line.. </p>
</body>
</html>
این خیلی ساده است! به غیر از متن اصلی ما قرار داده شده است، هیچ یک از یک ظاهر طراحی شده، طرح یا هر عنصر بصری دیگر وجود دارد. این به این دلیل است که اطلاعات یک ظاهر طراحی شده به CSS میرسد. اما قبل از رفتن به CSS، در اینجا برخی از آموزش های آنلاین عالی برای کمک به شما با HTML آشنا هستند
مقدمه ای بر HTML از یادگیری
معرفی HTML در W3Schools
معرفی به HTML توسط HanAcademy
CSS (Cascading Style Sheets)
اکثر اطلاعات یک ظاهر به طور جداگانه از HTML به عنوان ورق CSS ذخیره می شود. توسعه دهندگان ترجیح می دهند محتوای را از سبک جدا سازند تا آسان باشد یک یا چند نفر دیگر بدون تغییر همه چیز را تغییر دهند و یا مجبور کردن تمام کد را انجام دهند. این به ویژه برای وبسایتهای بزرگ با چندین صفحه کار می کند. هر صفحه دیگر نیازی به داشتن طرح بندی خود دارد یا فونتها و غیره. تمام صفحات می توانند یک مجموعه مشترک از ورق های سبک CSS برای استفاده از یک طرح رایج، فونت و غیره استفاده کنند.
یا اگر مشتری تصمیم می گیرد که تغییرات عمده در طرح در آخرین لحظه انجام شود، می توانید سبک CSS را تغییر دهید و فقط تغییر هر صفحه سایت را تغییر دهید. معمولا زمانی که برنامه نویسان شروع به برنامه نویسی می کنند، فرآیند تکراری بین HTML و CSS پیش می آید و نسخه های نهایی آن آماده هستند.
باز هم این فقط یک مثال بسیار اساسی است. شما می توانید برخی CSS های عملی را از منابع آنلاین زیر یاد بگیرید:
CSS عملی از یادگیری
معرفی CSS توسط W3Schools
معرفی CSS در HanAcademy
JavaScript
جاوا اسکریپت چیزی است که اجازه می دهد عناصر پویا و تعاملی روی صفحه وب شما داشته باشد. اکثر فرمهای تماس، تغییر چرخش تصویر، زمینه های خودکار پیشنهاد / خودکار تکمیل و موارد مشابه بر اساس جاوا اسکریپت است. مطمئنا راه های دیگری برای اضافه کردن برخی از عناصر پویا وجود دارد، اما جاوا اسکریپت توسط بسیار محبوب ترین است. جاوا اسکریپت نیز برای تغییر محتوای HTML استفاده می شود یا محتوای مختلف را بارگیری می کند. W3School دارای نمونه های خوب زندگی است که می توانید ببینید که چگونه جاوا اسکریپت محتوای محتوا را تغییر می دهد. برای کسب اطلاعات بیشتر در مورد جاوا اسکریپت و نحوه کمک به طراحان، از منابع زیر دیدن کنید:
جاوا اسکریپت برای طراحان توسط راشل نابورس (و اضافی: مخلوط کنفرانس 2013 بحث اینجا)
ورودی جاوا اسکریپت (با مثالهای زنده) توسط W3School
یک کتابخانه گسترده ای از توابع جاوا اسکریپت، API ها و پلاگین ها در دسترس برای بسیاری از وظایف وب وجود دارد. به معنی، شما به راحتی می توانید از این بسته های از پیش ساخته شده استفاده کنید و به ندرت باید بیش از کد اصلی جاوا اسکریپت خودتان بنویسید.
همه اش رو بذار کنار هم
بنابراین ما شما را به زبان های اصلی وب توسعه پیشرفته معرفی می کنیم - آنهایی که برای ترجمه ی طراحی خود به یک صفحه وب زنده استفاده می شوند. همانطور که پیش از این گفتیم، فرایند برنامه نویسی اغلب تکراری است، زیرا برنامهنویسان با توجه به قابلیتهای مورد نیاز، تغییر بین این زبانها را پشت سر گذاشتند. اما چگونه همه اینها در کنار هم قرار می گیرند؟ دوره های زیر می توانند به شما کمک کنند که چگونه HTML، CSS و جاوا اسکریپت با هم ترکیب شوند تا طرح های خود را به زندگی تبدیل کنند:
ساخت اولین وب سایت خود را با HTML و CSS از قابل یادگیری
معرفی به HTML و CSS از Udacity
30 روز برای یادگیری HTML و CSS از Tut +
یک وب سایت با HTML + CSS از CodeAcademy ایجاد کنید
مقدمه ای بر توسعه وب در Udemy
توجه داشته باشید که این ها فقط برخی از دوره های مقدماتی برای برداشتن شما هستند. افرادی که علاقه مند به غواصی عمیق تر و یا گسترش مهارت های خود هستند، شامل توسعه وب سایت در جلو می توانند منابع بیشتری را در Learning، CodeAcademy، Tut +، Udemy یا دیگر پورتال های آنلاین جستجو کنند.
بسته شدن آن بالا
در حالیکه طراحان نیازی به دانستن کد نویسی ندارند، تلاش برای یادگیری اصول اولیه توسعه اولیه قطعا به گسترش افق آنها کمک خواهد کرد. این به ارمغان می آورد
درک که به ایجاد امکانات جدید طراحی کمک می کند
توانایی پیاده سازی یا آزمایش با سایت های زندگی خودتان
فرصت یا شاید واژگان برای برقراری ارتباط با توسعه دهندگان خود
و بیشتر از همه، رضایت و احترام شما از همه موارد فوق.
