آموزش dreamweaver

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

آموزش Dreamweaver

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

Dreamweaver یک برنامه کاربردی است که به شما امکان طراحی، کد گذاری و مدیریت وب سایت ها را می دهد. آنچه در مورد Dreamweaver جالب است، این است که هر دو امکان نوشتن کد و ایجاد یک وب سایت با استفاده از رابط بصری را ارائه می دهد.

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

Dreamweaver چیست و چگونه کار می کند؟

Dreamweaver یک IDE (محیط توسعه یکپارچه) است. به این معناست که این یک تکه از نرم افزار است که ابزارهای مختلفی را برای طراحی وب و توسعه آسان تر می کند.

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

ایجاد وب سایت ها از طریق یک رابط طراحی بصری

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

بسیار مفید است زیرا به شما اجازه می دهد اسکلت یک وب سایت را به سرعت و بدون نیاز به نوشتن یک خط کد بسازید. در عوض Dreamweaver به طور خودکار کد لازم را برای شما ایجاد می کند. به این ترتیب، از لحاظ نظری، شما می توانید کل یک وب سایت را ساخته و آن را به سرور خود آپلود کنید.

از سوی دیگر، اگر شما قادر به برنامه نویسی هستید، Dreamweaver دارای ابزارهای لازم برای آن است.

عمل کردن به عنوان یک ویرایشگر کد Full-fledged

بخش دوم Dreamweaver یک ویرایشگر کد کامل است. که مجهز به تمام توابع استاندارد است، از جمله:

Syntax highlighting – به این معنا است که Dreamweaver از عناصر مختلف (مانند اپراتورها، متغیرها، و غیره) در رنگ های مختلف برجسته می شود تا کد را برای خواندن و اصلاح آسان تر کند.

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

Code collapsing – یکی دیگر از ویژگی ها برای ایجاد کد ساده تر برای خواندن است. که اجازه می دهد تا شما به صورت بصری، جزئی از کد خود را زمانی که شما به آنها نیاز ندارید، بشکنید. به این ترتیب، شما مجبور نیستید از طریق کل فایل حرکت کنید اما می توانید تنها با قطعاتی که نیاز دارید کار کنید.

Dreamweaver از مهم ترین زبان های طراحی وب (HTML5، CSS، JavaScript، PHP) و بسیاری دیگر پشتیبانی می کند.

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

ویژگی های بسیار بیشتری وجود دارد و شما بسیاری از آنها را در عمل در آموزش Dreamweaver خواهید دید.

بیشتر بخوانید»»» راهنمای گام به گام فریمورک Foundation

راه اندازی Dreamweaver

دانلود و نصب دریم ویور

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

اولین راه اندازی

هنگامی که شما Dreamweaver را شروع می کنید، این صفحه را خواهید دید.

dreamweaver-first-startup
dreamweaver-first-startup

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

آموزش dreamweaver
آموزش dreamweaver

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

آموزش dreamweaver
آموزش dreamweaver

گام نهایی این است که از یک فایل نمونه، پروژه جدید یا موجود یا آموزش ویدیویی، کدام را می خواهید.

آموزش dreamweaver
آموزش dreamweaver

انتخاب کنید تا با یک پوشه جدید یا موجود شروع کنید و فرآیند راه اندازی انجام شود.

حالا شروع کنید به یک پروژه و یاد بگیرید چگونه یک وب سایت با Dreamweaver ایجاد کنید.

بیشتر بخوانید»»» تاریخچه وردپرس از سال 2003 تا 2018

نحوه طراحی وب سایت با استفاده از Dreamweaver

1. یک سایت جدید ایجاد کنید.

اولین قدم این است که یک سایت جدید ایجاد کنید. برای آن، به site -> new site بروید این شما را به این صفحه می برد:

آموزش dreamweaver
آموزش dreamweaver

اولین قدم این است که یک نام برای سایت خود انتخاب کنید. سپس شما باید مکان ذخیره آن را انتخاب کنید. اما معمولا برای سادگی، تمام پروژه ها را در یک مکان ذخیره کنید.

اطلاعات محلی در تنظیمات پیشرفته خیلی مهم است.

آموزش dreamweaver
آموزش dreamweaver

مطمئن شوید که بر روی آیکون پوشه در سمت راست کلیک کنید که در آن پوشه Default Images قرار دارد. سپس به دایرکتوری تازه ایجاد شده خود بروید، آن را باز کنید، یک پوشه جدید به نام تصاویر ایجاد کنید و آن را به عنوان پوشه پیش فرض خود انتخاب کنید. به این ترتیب Dreamweaver تصاویر مرتبط با سایت شما را به طور خودکار در آنجا ذخیره خواهد کرد.

برای این کار، اکنون برای ذخیره کردن مجدد به فضای کاری خود کلیک کنید.

2. ایجاد فایل HomePage

اکنون که شما یک پروژه برای سایت ایجاد کرده اید، ما با صفحه اصلی شروع خواهیم کرد.

اگر Dreamweaver این گزینه را به شما ارائه نمی کند، به File> New بروید. شما می توانید یک فایل کاملا جدید ایجاد کنید یا از یک قالب موجود استفاده کنید.

یک فایل جدید در Dreamweaver ایجاد کنید.

HTML به طور پیش فرض تنظیم شده است و می توانید آن را همانطور که هست مشاهده کنید. برای عنوان سند، ورودی index.html و Create را انتخاب کنید. که به صفحه زیر می روید.

آموزش dreamweaver
آموزش dreamweaver

این همان چیزی است که ما در ابتدا ذکر کردیم: یک نمایش زنده از آنچه سایت شما به نظر می رسد (در حال حاضر خالی است) و کد پشت آن است. شما همچنین متوجه خواهید شد که Dreamweaver به صورت خودکار برخی از آنها را ایجاد کرده است.

Source

دیگر مقالات مفید سایت:

HTML-vs-CSS

تفاوت بین HTML و CSS

تفاوت بین HTML و CSS

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

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

<tag attribute1= “value1” attribute2=”value2”>’’content’’</tag>

html
html
  1. عنصر HTML بخش خاصی از یک صفحه وب را تعریف می کند.
  2. شروع برچسب: <tag attribute1 = “value1” attribute2 = “value2”> (برای تعریف آغاز عنصر استفاده می شود)
  3. محتوا: می تواند متون، لینک ها، تصاویر و سایر اطلاعات موجود در صفحه وب باشد.
  4. پایان تگ: </ tag> (برای اعلام بسته بودن عنصر HTML استفاده می شود)

 

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

{h1 { color: white;  font-style: italic 

CSS
CSS
  1. انتخابگرها: h1 (نشان دهنده عنصر HTML است که باید استایل دهی شود)
  2. خصوصیت: «رنگ و سبک فونت» (عناصری که نیاز به تغییر دارند)
  3. تعیین بلوک: «رنگ: سفید ; font-style: italic »(یک یا چند اعلان را که توسط semicolons جدا شده است را توصیف می کند)
  4. مقادیر: «سفید و italic» (نشانگر پارامترهای از خواص انتخاب شده است)

بیشتر بخوانید»»» مهم ترین تفاوتهای بین Front-End و Back-End 

هم HTML  و هم CSS دارای معایب و مزایایی هستند.

HTML (مزایا):

  • آسان برای یادگیری و کدنویسی
  • برای استفاده رایگان بوده و نیازی به لایسنس ندارد.
  • به درستی توسط مرورگر تفسیر شده است
  • پشتیبانی از چندین زبان
  • سبک وزن و پشتیبانی از چندین سیستم عامل

HTML (معایب):

  • دارای ویژگی های امنیتی محدود شده
  • پیشرفت فنی کم است
  • چون یک زبان استاتیک است، نمی تواند خروجی پویا را تولید کند

CSS (مزایا):

  • دارای محدوده گسترده ای از صفات نسبت به HTML است.
  • سرعت وب سایت را بهبود می بخشد و صفحات زمان کمتری برای بارگذاری مناسب مصرف می کنند.
  • از مرور آفلاین پشتیبانی می کند.
  • سازگار با دستگاه های مختلف است.
  • نگهداری آسان است.
  • فرمت های استایل وب سایت بسیار بهتری، نسبت به  HTML فراهم می کند.

CSS (معایب):

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

 

تفاوت های اصلی بین  HTML و CSS 

HTML و CSS
HTML و CSS

تفاوت کلیدی بین HTML و CSS، در موارد زیر توضیح داده شده است:

  1. HTML اساسا یک زبان نشانه گذاری استاندارد برای توصیف ساختار صفحات وب است در حالی که CSS زبان استایل دهی برای توصیف ارائه و طراحی صفحات وب است.
  2. HTML برای یادگیری آسان است در حالی که CSS گاهی اوقات می تواند عوارضی در کدها ایجاد کنید.
  3. CSS مستقل از HTML است و می تواند با هر زبان نشانه گذاری مبتنی بر XML مورد استفاده قرار گیرد در حالیکه برای HTML اینگونه نیست.
  4. فایل HTML می تواند شامل کدهای CSS باشد، اما از سوی دیگر، CSS هرگز نمی تواند شامل کدهای HTML باشد.
  5. HTML تگ هایی را که محتوای هر عنصر صفحه وب را در بر می گیرد، فراهم می کند، در حالی که CSS شامل انتخابگرهایی است که توسط یک بلوک اعلام احاطه شده اند.
  6. CSS از کد بسیار کمتر استفاده می کند و در نتیجه زمان بارگذاری صفحه وب، بسیار کمتر از HTML است.

بیشتر بخوانید»»» همه چیز درباره سیستم های مدیریت محتوا

نتیجه گیری:

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

Source 

دیگر مقالات مفید سایت:

SEO

فهرست ضروری SEO برای طراحان وب

فهرست ضروری SEO برای طراحان وب

اگر شما می خواهید ترافیک و دید وب سایت خود را افزایش دهید، SEO یک مهارت اساسی برای طراحان وب است.

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

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

ما برخی از شیوه های ضروری SEO را برای کمک به شروع کار، پوشش خواهیم داد.

 

تحقیق کلید واژه

SEO
SEO

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

لیستی از موضوعات مربوطه و عبارات کلیدی که شما دنبال آن هستید، ایجاد کنید. استفاده از ابزارهای زیر کمک می کند تا بیشتر کلمات کلیدی پنهان را، از جمله کلمات کلیدی کوتاه و طولانی را پیدا کنید.

بیشتر بخوانید»»» معایب و مزایای فریمورک بوت استرپ 

بهینه سازی داخل سایت

SEO
SEO

بهینه سازی داخل سایت به عواملی در وب سایت و صفحات وب شما اشاره دارد. که شامل کدهای HTML ، محتوا و چیزهایی که می توانید در وب سایت خود کنترل کنید، است.

  • اطمینان حاصل کنید که کلمات کلیدی شما به URL ها، برچسب های عنوان، متا توضیحات، برچسب های عنوان و متن تصویر آلبوم اضافه می شوند.
  • URL های خوانا ایجاد کنید. مثلا: این www.yourwebsite.com/?p1223 خوانایی بهتری ندارد، بهتر است اینگونه استفاده کنیم: www.yourwebsite.com/human-readable-url
  • اطمینان حاصل کنید که وب سایت شما سریعا بارگیری می شود. برای تست عملکرد وبسایت خود از Google PageSpeed Insights استفاده کنید.
  • گوگل وب سایت هایی را که برای موبایل ها مناسب نیستند، مجازات می کند. بهترین روش، استفاده از طراحی وب ریسپانسیو است. از Google Mobile-Friendly Tool استفاده کنید تا مطمئن شوید که وبسایت شما Mobile Friendly است.

 

متا تگ ها:

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

توضیحات متداول، توضیح مختصری از محتوای یک صفحه وب است. که مفید می باشد زیرا موتورهای جستجو این توضیحات را در صفحه نتایج جستجو نمایش می دهند.

 

<meta name=”description” content=”Daily inspiration for creative people. Fresh thinking, expert tips and tutorials to supercharge your creative muscles.”>

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

 

<meta name=”robots” content=”NOINDEX,NOFOLLOW” />

 

نوشتن محتوای با کیفیت:

محتوا پادشاه است و موتورهای جستجو محتوا را دوست دارند. در کنار تکنیک های فنی که هدفمان این است، وب سایت شما SEO بهتری داشته باشد، در واقع کیفیت محتوای شما است که عامل رتبه بندی واقعی برای موقعیت موتور جستجوگر است.

چگونه محتوای با کیفیت ایجاد کنیم؟

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

 

ساخت لینک های با کیفیت:

لینک بیشتری از وب سایت های مجاز دریافت می کنید، یعنی رای بیشتر برای وب سایت شما. لینک بیشتر به شما کمک می کند و تاثیر زیادی در رتبه بندی موتور جستجوی شما خواهد داشت.

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

 

تجارت محلی

SEO
SEO

به عنوان یک طراح وب، شما به احتمال زیاد در مکان فیزیکی کار می کنید و به دنبال رسیدن به یک مخاطب منطقه ای هستید، نه یک مخاطب جهانی. برای اینکه یک منطقه خاص ایجاد کنید، با Google Business شروع کنید. با اضافه کردن کسب و کار خود به Google Business، امکان نمایش برای افرادی که در منطقه محلی خود جستجو می کنند، بیشتر است.

در وب سایت خود اطمینان حاصل کنید که شهر شما در برچسب عنوان، توضیحات متا، تگ های عنوان، URL، محتوا، متن جایگزین و Google maps که به فهرست Google Local شما اشاره دارد.

 

رسانه های اجتماعی

SEO
SEO

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

رسانه های اجتماعی در بدست آوردن follower ها، ایجاد روابط و گسترش برند، اهمیت بیشتری پیدا می کنند. اطمینان حاصل کنید که از دکمه های به اشتراک گذاری در وب سایت خود مانند فیس بوک، Twitter و Google+، LinkedIn Share و Pinterest Pin استفاده می کنید. فراموش نکنید که از شبکه های اجتماعی استفاده کنید تا به طور صحیح محتوای شما را همرا با تصویر، عنوان، توضیحات و لینک در کانال های رسانه های اجتماعی نمایش دهد.

بیشتر بخوانید»»» بهترین فریمورک های پی اچ پی (PHP) سال 2018

کنسول جستجوی Google Webmaster

SEO
SEO

به تازگی Google Webmaster Tools به Search Console تغییر نام یافته است. کنسول جستجو یک ابزار رایگان ارائه شده توسط Google است تا به شما در درک اینکه چگونه Google وب سایت شما را می بیند، ارائه شده است. هر گونه خطاهای شناخته شده، کلمات کلیدی و پیشنهاد بهبود وب سایت، نظارت و شناسایی می شوند.

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

Source

دیگر مقالات مفید سایت:

فریمورک node js

محبوب ترین فریمورک های NODE JS

محبوب ترین فریمورک های NODE JS

فریمورک Node.js پلتفرمی است که در زمان اجرا جاوا اسکریپت کروم، برای ایجاد سریع برنامه های کاربردی شبکه ای مقیاس پذیر ایجاد شده است. از مدل IO غیر بلوک شده مبتنی بر رویداد استفاده می کند که سبک و کارآمد است. Node.js مناسب برای برنامه های کاربردی در زمان واقعی داده ها است که در سراسر دستگاه های توزیع شده اجرا می شود. برخی از تجزیه و تحلیل ها را انجام داده ایم و لیستی از فریمورک های node js را برای سال 2018 ذکر کردیم.

 

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

الگوی معماری کنترلر-نمایشگر-مدل (MVC)، نرم افزار را به سه قسمت اصلی تقسیم می کند: مدل، نمایشگر، کنترلر. بهترین فریمورک نود ج اس به ساده سازی توسعه برنامه وب کمک می کند. لیستی از فریمورک های node.js که در حال حاضر موجود است در این مقاله آورده شده است.

 

5 تا از مهم ترین فریمورک های node js

EXPRESS.JS

فریمورک Express Node.Js
فریمورک Express Node.Js
  • Node.js در سال 2010 ظاهر شد و به عنوان پایه، لیست بلندی از فریمورک های محبوب نود ج اس را ارائه داد.
  • (Express)اکسپرس آزادی های زیادی را برای توسعه دهندگان ارائه می دهد، زیرا می توانند برای ایجاد برنامه از ماژول های مختلف استفاده کنند.
  • با توجه به ماهیت انعطاف پذیری آن، برای برنامه هایی در مقیاس بزرگ مناسب است، زیرا برای سفارشی سازی، گسترش آن و نیاز به پشتیبانی طولانی مدت، برنامه ریزی شده است.
  • آخرین نسخه Express 4.16.4 است.

HAPI

فریمورک Hapi Node.Js
فریمورک Hapi Node.Js
  • این فریمورک در سال 2011 ظاهر شد و همچنین بر اساس اکسپرس است.
  • از زمان ایجاد به فریمورک جداگانه ای با رویکرد متفاوت تبدیل شده است: برای ارائه موارد مورد استفاده ممکن.
  • برای تیم های بزرگ و پروژه های بزرگ طراحی شده است و برای یک برنامه ساده بسیار پیچیده خواهد بود.
  • آخرین نسخه Hapi 17.6.0 است.

SAILS.JS

فریمورک Sails Node.Js
فریمورک Sails Node.Js
  • فریمورک اکسپرس را به عنوان پایه استفاده می کند، اما یک محصول کامل است که می تواند به عنوان کاربردی در دسترس باشد.
  • برای راه اندازی سریع مناسب است. Sails مخصوصا برای توسعه و تنظیم برنامه های زمان واقعی نیاز به پاسخ سریع دارد و با هر front-end ای سازگار است.
  • آخرین نسخه بادبان 1.0 است.

SOCKET.io

فریمورک Socket.io Node.Js
فریمورک Socket.io Node.Js
  • برای ساخت برنامه های کاربردی وب در زمان واقعی استفاده می شود.
  • یک کتابخانه جاوا اسکریپت است که اجازه می دهد جریان داده دو طرفه بین سرویس گیرنده وب و سرور برقرار شود.
  • همگام سازی داده های ورودی/خروجی، جریان باینری، پیام های فوری برخی از مهم ترین ویژگی های این فریمورک هستند.
  • آخرین نسخه socket.io 2.0 است.

KOA.js

فریمورک Koa Node.Js
فریمورک Koa Node.Js
  • در سال 2013 معرفی شده است، این فریمورک پیشرو برای ایجاد فرایند نوشتن برنامه های کاربردی وب و reset api ها لذت بخش تر است.
  • اساسا میان افزاری برای نود ج اس است که از ژنراتورها استفاده می کند. استفاده محدودی از callbacks باعث می شود ژنراتورها یک روش موثرتر برای کاهش خطا باشند.

 

دسته بندی فریمورک Node.js:

 

بیشتر بخوانید»»» همه چیز درباره سیستم های مدیریت محتوا

لیست فریمورک Node.js:

فریمورک های MVC

strapi

فریمورک Strapi Node JS
فریمورک Strapi Node JS

Strapi فریمورک نود ج اس متن باز برای ساخت برنامه های کاربردی و سرویس ها است.

 

compoundjs

فریمورک CompoundJS Node JS
فریمورک CompoundJS Node JS

CompoundJS یک فریمورک MVC برای NodeJS است. که اجازه می دهد تا شما در عرض چند دقیقه یک برنامه وب ایجاد کنید.

 

tesla.js

فریمورک Tesla-js Node JS
فریمورک Tesla-js Node JS

تسلا یک فریمورک مدرن MVC است. به خاطر سرعت، ساده و آسان بودن برای پیکربندی، با پیش فرض های صحیح و boilerplates انعطاف پذیر که باعث اجرا سریع می شود، ساخته شده است.

 

locomotive

فریمورک Node JS
فریمورک Node JS

فریمورک قدرتمند MVC برای نود ج اس است. لوکوموتیو از الگوهای MVC، مسیرهای RESTful و قرارداد پیش از پیکربندی را پشتیبانی می کند در حالی که با هر پایگاه داده و موتور قالب یکپارچه می شود.

 

فریمورک های full-stack node.js :

Alcountjs

فریمورک Node JS
فریمورک Node JS

Alcountjs فریمورک full-stack node.js متن باز برای توسعه برنامه های سریع است. AllcountJS برای ساخت برنامه های آماده وب و برنامه های کاربردی تلفن همراه در عرض چند دقیقه طراحی شده است.

 

meteor

فریمورک Node JS
فریمورک Node JS

Meteor پلت فرم کامل متن باز برای ساخت برنامه های وب و تلفن همراه در جاوا اسکریپت است. Meteor یک پایگاه داده فوق العاده ساده، داده ها بر روی سیم، فریمورک وب خالص جاوا اسکریپت است.

 

catberry

فریمورک Node JS
فریمورک Node JS

Catberry یک فریمورک با معماری  Flux، اجزای وب متناظر و رندر پیشرفته است.

 

فریمورک های api

actionhero.js

فریمورک Node JS
فریمورک Node JS

acrionhero.js یک سرور api، node.js انتقال چندگانه با ظرفیت های خوشه یکپارچه و کارهای به تاخیر افتاده است.

 

restberry

فریمورک Node JS
فریمورک Node JS

فریمورک برای تنظیم API های RESTful JSON با نود ج اس است. مدل های خود را تعریف کنید و برنامه های CRUD API را بدون نیاز به نوشتن کد (بدون استفاده از برنامه) تنظیم کنید. تمام تماسهای API مسائل را حل و شناسایی کرده و پاسخهای HTTP لازم را ارائه می دهند و پاسخ های خطایابی را آسان می کنند. Restberry همچنین تصدیق احراز هویت و چک های مجوز را بررسی می کند و خطاهای مناسب را پرتاب می کند.

 

restify

فریمورک Node JS
فریمورک Node JS

Restify یک ماجولار node.js است که به طور خاص ساخته شده است تا شما را قادر به ایجاد درست خدمات وب REST کند.

 

strongloop

فریمورک Node JS
فریمورک Node JS

StrongLoop به شما اجازه می دهد تا به صورت بصری API های REST در Node را ایجاد کرده و آنها را به داده های خود متصل کنید. StrongLoop همچنین ویژگی های ساخته شده در mBaaS مانند فشار و همگام سازی آفلاین، به علاوه ابزار های گرافیکی برای خوشه بندی، پروفایل، و نظارت بر برنامه های Node است.

 

فریمورک های سمت سرور node js

we.js

فریمورک Node JS
فریمورک Node JS

We.js فریمورک جاوا اسکریپت سمت سرور برای ساخت برنامه های کاربردی در زمان واقعی، سایت ها یا وبلاگ ها است!

 

fortune.js

فریمورک Node JS
فریمورک Node JS

Fortune یک کتابخانه I / O سطح بالا برای برنامه های وب، در سرور و مرورگر است.

بیشتر بخوانید»»» مهم ترین تفاوتهای بین Front-End و Back-End 

فریمورک های سمت کاربر  node js

axt.js

فریمورک Node JS
فریمورک Node JS

axt.js یک فریمورک جاوا اسکریپت مبتنی بر رویداد است که برای ایجاد برنامه های کاربردی MVC در node.js و سمت سرویس گیرنده است.

 

experimentsjs

فریمورک Node JS
فریمورک Node JS

یادگیری فریمورک سمت کاربر و node.js.

 

فریمورک های testing

mocha

فریمورک Node JS
فریمورک Node JS

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

 

sixpack

فریمورک Node JS
فریمورک Node JS

sixpack یک فریمورک آزمایش زبان آگنوستیک ab است.

 

فریمورک های micro

express.io

فریمورک Node JS
فریمورک Node JS

فریمورک میکرو زمان واقعی برای node js است.

stapes.js

فریمورک Node JS
فریمورک Node JS

میکرو فریمورک mvc جاوا اسکریپت است.

jqnode

فریمورک Node JS
فریمورک Node JS

یک فریمورک میکرو ساده برای node js  است.

picard

فریمورک Node JS
فریمورک Node JS

میکرو فریمورکی برای node js است.

Source

دیگر مقالات مفید سایت:

 

foundation فریمورک

راهنمای گام به گام فریمورک Foundation

راهنمای گام به گام فریمورک Foundation برای توسعه برنامه های وب واکنش گرا

 

Foundation یک فریمورک سمت کاربر متن باز است که به طراحی وب سایت های واکنش گرا، برنامه ها و ایمیل ها کمک می کند. یک گرید واکنش گرا، اجزای رابط کاربری HTML، CSS، قالب ها، فرم ها، دکمه ها، ناوبری، سایر اجزای رابط کاربری و افزونه های اختیاری جاوا اسکریپت را برای ایجاد وب سایت واکنش گرا فراهم می کند.

 

ویژگی های فریمورک Foundation

Foundation برای مرورگرها و ابزارهای مختلف طراحی شده است. اولین فریمورک متن باز برای تلفن همراه است که به توسعه دهندگان بهترین شیوه را برای توسعه سریع می دهد. ویژگی های دیگر Foundation : شامل سیستم گرید 12 ستونه است، که اجزای CSS  و direction RTL (راست به چپ) و سازگاری با چندین مرورگر را پشتیبانی می کند.

 

سیستم گرید 12-ستون

system grid فریمورک foundation
system grid فریمورک foundation

 

سیستم گرید Foundation به 3 قسمت تقسیم شده است: کوچک، متوسط، بزرگ.

Small  هر صفحه نمایش تا 639 پیکسل.

  • فقط برای صفحه نمایش های کوچک.

Medium  هر صفحه نمایشی که از 640 پیکسل شروع می شود.

  • فقط برای صفحه نمایش های متوسط.

Large  هر صفحه نمایشی که از 1024 پیکسل شروع می شود.

  • برای صفحه نمایش های بزرگ و بزرگ تر.
بیشتر بخوانید»»» همه چیز درباره سیستم های مدیریت محتوا 

سازگاری

علاوه بر مرورگرهای آندروید، Foundation از تمام آخرین نسخه های کروم، فایرفاکس، سافاری، اپرا و اینترنت اکسپلورر پشتیبانی می کند.

سازگاری فریمورک foundation
سازگاری فریمورک foundation

ویدجت ها

در زیر برخی از ابزارک ها و ویژگی های جاوا اسکریپت که در Foundation توسعه داده شده، آمده است. اما فریمورک بوت استرپ این ویدجت ها را پشتیبانی نمی کند.

  •  Form validation
  • off canvas menus (منوهای off canvas)
  • pricing tables (جدول های قیمت گذاری)
  • responsive media (رسانه های واکنش گرا)
  • right to left support (پشتیبانی rtl)
  • tour) joyride)
ویدجت های فریمورک foundation
ویدجت های فریمورک foundation

برخی از تفاوت های مابین بوت استرپ و Foundation 

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

 

مقایسه

تفاوت بوت استرپ و foundation
تفاوت بوت استرپ و foundation

 

نکته: بوت استرپ از هر 2 پیش پردازنده LESS و SASS پشتیبانی می کند، اما Foundation فقط SASS را پشتیبانی می کند.

 

شروع کار با فریمورک Foundation:

خوب، راه های زیادی برای نصب Foundation وجود دارد، اما در اینجا در مورد دو روش صحبت خواهیم کرد: ابتدا CSS و دوم با استفاده از ترمینال.

اگر شما با CSS شروع به کار می کنید، می توانید Foundation را دانلود کرده و سفارشی کنید و ویژگی هایی که می خواهید در وب سایت خود داشته باشید را انتخاب کنید.

در هنگام شروع کار، شما انتخاب هایی مانند دانلود کامل Foundation و دانلود سفارشی سازی Foundation را دارید، هر کدام را که نیاز دارید انتخاب کنید.

پس از دانلود Foundation ، ساختار پوشه شما مانند تصویر زیر خواهد بود.

فریمورک foundation
فریمورک foundation

 

 

app.css: فایل CSS سفارشی است که می توانیم بر روی فایل CSS خودمان اضافه کنیم.

foundation.css: فایل css پیش فرض که توسط foundation اجرا شده است.

foundation.min.css : فایل css فشرده شده.

jquery.js: نیاز است که تابع واکنش گرا را برای وب سایت فراهم کند. شما فقط باید نسخه JQuery  1.10 یا بالاتر را قبل از کتابخانه foundation.js داشته باشید.

what-input.js: برای ردیابی روش ورودی جاری استفاده می شود.

foundation.js: برای استفاده از قابلیت های اصلی استفاده می شود.

app.js: فایل JS سفارشی است که ما می توانیم js خود را اضافه کنیم.

شما باید تمام فایل های فوق را در فایل HTML خود مشخص کنید.

 

شما همچنین می توانید foundation CLI را با استفاده از ترمینال نصب کنید.

  • sudo npm install –global foundation-cli 

پس از نصب CLI، از دستور جدید برای شروع یک پروژه جدید استفاده کنید:

foundation new

بیشتر بخوانید»»» مهم ترین تفاوتهای بین Front-End و Back-End

وب سایت هایی که با foundation ایجاد شده اند:

فریمورک foundation
فریمورک foundation

 

برندهای مشهوری که از فریمورک foundation استفاده کرده اند:

  1. PBS: Public Broadcasting Service
  2. National Geographic
  3. Washington Post
  4. Mozilla
  5. Cambridge University Press
  6. Official HTC Store (UK)
  7. National Geographic Education
  8. Burger Revolution

 

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

فریمورک  foundation در کاهش کدهای css و js کمک می کند، بنابراین توصیه می کنیم از این فریمورک در پروژه های خود استفاده کنید.

Source

دیگر مقالات مفید سایت:

تفاوت بین front-end و back-end

مهم ترین تفاوتهای بین Front-End و Back-End

تفاوت بین Front-End و Back-End

همیشه یکسری همهمه های مخصوصا بین افراد تازه کار در زمینه برنامه نویسی درباره دو عبارت front-end و  back-end  وجود دارد. اگرچه این دو مهم ترین اصطلاح اساسی و پایه در دنیای طراحی و توسعه هستند، مردم اغلب نتوانستند تفاوت بین این دو را درک کنند.

اگر شما نیز در این زمینه مبتدی یا مایل به درک تفاوت بین front-end و back-end به یک روش بسیار ساده تر از قبل هستید، در این مقاله ما سعی خواهیم داشت تفاوت بین این 2 را به طور واضح و دقیق بررسی کنیم.

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

شما می توانید آنها را به عنوان دو طرف یک سکه ببینید، یکی همیشه بدون دیگری ناقص است. اگر front-end ظاهر بیرونی بدن انسان باشد، پس در حقیقت، back-end قسمت داخلی است که قابل مشاهده نیست. اکنون ما با توضیح این اصطلاحات برای درک بهتر شما شروع می کنیم و سپس یک مطالعه مقایسه ای بین این دو اصطلاح خواهیم داشت.

بیشتر بخوانید»»» بهترین فریمورک های پی اچ پی (PHP) سال 2018

Front-end چیست؟

تفاوت بین front-end و back-end
تفاوت بین front-end و back-end

Front-end هر چیزی که کاربر وب در هنگام بازدید از هر وب سایت از فونت ها، دکمه ها به dropdown ها، فرم ها، تصاویر و منوها است. همچنین به عنوان سمت سرویس گیرنده شناخته می شود و شامل همه چیزهایی است که کاربر هنگام بازدید از یک وبسایت مشاهده می کند و تجربه می کند. همه چیزهایی که در یک وب سایت می بینید از متون و تصاویر به dropdown و انیمیشن ها شامل HTML، CSS و جاوا اسکریپت است که توسط مرورگرها کنترل و نمایش داده می شوند.

فرض کنید رستورانی دارید، شما می خواهید آگاهی در میان مردم در مورد رستوران خود ایجاد کنید، با طراحی زیبای وب سایت، آپلود عکس، فهرست منوی خود و چیزهایی شبیه این، مردم می توانند با سایت ارتباط برقرار کنند تا اطلاعات مربوط به کسب و کار شما را جمع آوری کنند. اما به یاد داشته باشید که مردم هنوز قادر به ارسال یک نظر / پرس و جو یا سفارش غذا از طریق سایت شما نیست، زیرا هیچ تکنولوژی مورد استفاده برای ذخیره اطلاعات ارائه شده توسط مشتری به عنوان نام، آدرس، اطلاعات کارت اعتباری و غیره وجود ندارد. برای انجام این، از back-end استفاده می کنیم.

سه تکنولوژی پایه اصلی HTML، CSS و جاوا اسکریپت که همه مسئولیت یک رابط کاربر پسند وب سایت را دارند، برای اهداف زیر ساخته شده اند:

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

Css : این همراه با HTML برای ظاهر وب سایت لازم است تا سایت به کاربران آن بسیار زیبا نشان داده شود. چیزهایی مانند فونت، رنگ، گرافیک و غیره با اسکریپت های CSS انجام می شود.

جاوا اسکریپت: این به زیبایی هر وب سایت اضافه می کند و به خوبی برای ارائه windows ها، فرم های کشویی و فرم های تماس شناخته شده است.

بوت استرپ: این فریمورک از هر سه تکنولوژی فوق استفاده می کند تا وب سایت شما را واکنش گرا کند.

 

فرانت اند و طراحی وب

نکته مهم این است که front-end و طراحی سایت یکی نیستند. مردم اغلب این 2 را با هم اشتباه می گیرند، اما اینگونه نیست.

Front-end برای مدیریت جنبه های بصری هر وب سایت که به کاربران نشان داده می شود، شناخته شده است اما همان طراحی وب نیست. فکر می کنید اگر این دو یکی باشند، چرا بازار توسعه دهندگان front-end و طراحان وب را به عنوان دو تخصص جدا نیاز دارد؟

طراح وب کسی است که طرح بندی و ظاهر یک وب سایت را طراحی می کند و تصمیم می گیرد که کاربران آن را تصور کنند. در حالی که توسعه دهنده ی front-end، کسی است که به یک وب سایت تعاملی با کمک تکنولوژی های که در بالا بحث شد، جان می دهد.

 

Back-end چیست؟

تفاوت بین front-end و back-end
تفاوت بین front-end و back-end

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

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

Back-end به عنوان “سمت سرور” نامیده می شود، بخشی از یک سایت تعاملی که برای کاربران یا سمت کاربر قابل مشاهده نیست. بک اند همانطور که در بالا توضیح داده شد، مسئول ذخیره و بازیابی داده ها است و front-end یا سمت سرویس گیرنده را برای عملکرد صحیح پشتیبانی می کند. در یک سایت تعاملی، هنگامی که یک کاربر اطلاعات را ذخیره می کند یا یک فرم را پر می کند، مرورگر درخواستی را برای درخواست اطلاعات مورد نیاز ارسال می کند، در پاسخ اطلاعاتی که از سرور دریافت می شود توسط مرورگر تفسیر شده و به کاربر با کمک فرانت اند نمایش داده می شود. یک وب سایت که در سراسر آن باقی می ماند و فقط برای نشان دادن بعضی از اطلاعات استفاده می شود، به دخالت بک اند نیازی ندارد، از سوی دیگر سایت هایی که تعاملی هستند و محتوا را مطابق با پایگاه داده تغییر می دهند، نیاز به بک اند دارند.

بیشتر بخوانید»»» نرم افزارهای ذخیره سازی ابر برای سیستم عامل آندروید

در جدول زیر یک مقایسه مختصر از تفاوت های back-end و front-end آورده شده است.

تفاوت بین front-end و back-end
تفاوت بین front-end و back-end

Back-end در مقابل  Front-end

Back-End Front-End
به عنوان سمت سرور شناخته شده است. به عنوان سمت کاربر شناخته شده است.
این همه چیزهایی است که در پشت صحنه اتفاق می افتد. این چیزی است که برای کاربران قابل مشاهده است.
بخش داخلی یا مغز وب سایت است. کاربران می توانند محتوا را تجربه و لمس کنند.
برای ذخیره و بازیابی اطلاعات مورد نیاز، مورد استفاده قرار می گیرد. نمی توان برای ذخیره و بازیابی استفاده کرد.
درخواست ها پردازش شده و به مرورگر برای تفسیر توسط پایگاه داده منتقل می شوند توسط مرورگر به تصویر کشیده می شود.
توسعه دهنده Backend برای این کار کافی است. توسعه دهنده ها با طراحان وب برای فراهم کردن نتایج بهتر، کار می کنند.
شامل توسعه و ساخت است. شامل طراحی و آزمایش می شود.
زبان های برنامه نویسی مانند Ruby، Python، Java، .Net، و غیره برای توسعه back-end استفاده می شود. HTML، CSS و جاوا اسکریپت پایه توسعه دهنده front-end است.

 

در این مقاله، هدف بررسی تفاوت بین front-end و back-end بوده است.

Source

دیگر مقالات مفید سایت: