دوره اموزش طراحی سایت برای صفحات داخلی

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

 


هر سایتی از دو بخش تشکیل میشود :

    فرانت اند
    بک اند

 
طراحی وب چیست؟

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

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

 
طراح وب سایت کیست؟

حال که با طراحی وب آشنا شدید نوبت به شناختن طراح وب سایت میرسد. طراح وب در حقیقت به شخصی گفته میشود که با استفاده از تکنیکهای مختلف کدنویسی از جمله  HTML، CSS، Javascript و …  یک سایت را طراحی میکند، کار او هیچ ارتباطی با برنامه نویسی ندارد اگرچه بهتر است که یک طراح وب یا Front End Designer آشنایی مختصری با زبانهای برنامه نویسی هم داشته باشد.برای این که یک وب سایت طراحی شود نیاز به تکنولوژی هایی است که شناخته شده ترین آنها شامل موارد زیر خواهد بود:

    HTML
     CSS
    jQuery

نکته مهمی که باید به آن اشاره کنیم این است که این موارد تکنولوژی و ابزار طراحی سایت هستند و نباید آنها را با زبان های برنامه نویسی اشتباه گرفت.

 
برنامه نویس Front End کیست و چه کارهایی انجام میدهد؟

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

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



 
توسعه دهنده فرانت اند کیست؟

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

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

 
توسعه دهنده فرانت اند چه کاری انجام می دهد؟

توسعه دهندگان فرانت اند کسانی هستند که دنیای گرافیک و فناوری را با هم تلفیق میکنند، در حقیقت آنها فایلهای طراحی شده وب سایت را تحویل گرفته و به جاوا اسکریپت (JS) و یا کد های CSS که عناصر اصلی توسعه FrontEnd هستند تبدیل میکنند. این کار هم به خلاقیت و هم به دانش فنی بالا نیازمند است. توسعه دهنده فرانت اند باید از نگاه کاربر به سایت و آنچه در آن نمایش داده میشود نگاه کند، کارایی و سرعت و همچنین  عملکرد قسمتهای مختلف سایت را بررسی کند، همچنین باید اطمینان حاصل کند که در فرانت اند خطا یا اشکالی وجود ندارد و طرح همانطور که پیشبینی شده است در مرورگرها و سیستمهای عامل به نمایش در آید. یک توسعه دهنده باید بارها و بارها همه چیز را کنترل کند تا خروجی سایت دقیقا مطابق میل کارفرما و کاربر باشد. در حالت کلی میتوان مسئولیتهای یک توسعه دهنده فرانت اند را به شکل زیر تعریف کرد:

    اولویت بندی کردن علاقه کاربران و طراحی یک ظاهر کاربر پسند
     ایجاد مفهوم با HTML ،CSS و JavaScript
     تولید و نگهداری وب سایتها و رابطهای کاربری وب
     ایجاد کردن ابزارهایی که باعث تعامل با سایت در مرورگرهای مختلف میشود
     اجرای طراحی سایت برای استفاده با تلفن همراه یا ریسپانسیو کردن سایت
     حفظ مدیریت گردش کار نرم افزار
     استفاده بهترین روشهایی بالا بردن رتبه سایت SEO
     انجام تست و آزمون خطا
 

توسعه دهنده وب از چه زبانهای برنامه نویسی استفاده میکند؟

همانطور که گفتیم توسعه دهندگان فرانت اند مسئول اجرای طرحها و مفاهیم در وب هستند،  اصلیترین ابزارهایی که برای کد نویسی و توسعه سایت از آنها استفاده میشود شامل HTML ،CSS و JavaScript است که از آنها برای ایجاد محتوا و ساختار سند استفاده میگردد، از CSS برای ساخت استایل و ظاهر طراحی قبل از اعمال JS استفاده میشود.

اغلب اوقات توسعه فرانت اند با محوریت جاوا اسکریپت صورت میگیرد. توسعه دهندگان FrontEnd اکثرا تمایل دارند تا به راحتی توسعه سایت را با استفاده از کتابخانه های درون ساختی این سه زبان صورت دهند، فرقی نمیکند که چارچوبهای طراحی مانند Bootstrap یا Foundation باشد، یا کتابخانه های JavaScript مانند AngularJS و React که برای راحتی در توسعه برنامه وب طراحی شده اند.

در سالهای اخیر شاهد محبوبیت بالای پسوندهای قدرتمندتر CSS مانند SASS بوده ایم که قدرت بسیار بیشتری را در طراحی خود ارائه میدهد. معمولا توسعه دهندگان Front-End نیاز است که به کد PHP ،Ruby یا Python دسترسی پیدا کنند تا بتوانند دادهها را با backend نیز متصل کنند، پس کاملا طبیعی است که آشنایی با زبانهای وبگرا فراتر از استانداردهای سه گانه HTML ،CSS و JavaScript برای توسعه دهندگان ضروری باشد.

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

برای این که بتوانید یک برنامه نویس فرانت اند موفق باشید باید مهارت هایی که در بخشهای قبل به آنها اشاره کردیم بیاموزید و تقویت کنید. به ویژه در مورد زبان های کد نویسی HTML، CSSو JavaScript باید برنامه جامع و منظمی برای یادگیری داشته باشید، چرا که اینها مهمترین تکنولوژی های مورد استفاده در فرانت اند خواهند بود. ضمن این که یک دوره مهارتهای عمومی نیز باید پشت سر بگذارید که شامل گیت، ترمینال لینوکسف ساختمان داده و الگوریتم GitHub،SSH، HTTP / HTTPS،Design،Patterns و Character Encoding میشود.

 
فریم ورک چیست؟

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

همچنین با فراخوانی این چهارچوب دیگر نیازی نیست هربار تمام کدهای موردنیاز و رایج را بنویسید. فریمورکها مجموعهای از کدها و کتابخانه ها هستند که موجب میشوند سرعت کدنویسی افزایش یابد و کدها در چهارچوبی مشخص نوشته شوند. برای مثال بوت استرپ یک فریم ورک رایگان و معروف برای CSS است که کمک میکند طراحی ریسپانسیو صفحات سایت به سادگی انجام پذیرد.