همه چیز درباره طراحی وب

*KhatKhati* · 21/9/20

پروتکل FTP چیست؟
FTP یا File Transfer Protocol به پروتکلی اطلاق می شود که برای ارسال و دریافت فایل بین سرور و کلاینت بکار گرفته می شود. در مقابل پروتکل HTTP، پروتکل FTP از قدمت بیشتری برخوردار است و با در نظرگیری تکنولوژی های مورد استفاده در زمانهای قدیم، پروتکل FTP از سرعت پایینتری در مقایسه با پروتکل FTP برخوردار است.

امنیت بکار گرفته شده برای FTP بسیار ضعیف بوده بطوریکه امکان هک شدن داده ها از نظر تئوری برای این پروتکل وجود دارد (برخلاف پروتکل HTTP که از نظر تئوری، امکان هک شدن برای آن وجود ندارد).

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

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

*KhatKhati* · 21/9/20

نرم افزارهای مورد نیاز برای طراحی سایت
نرم افزارهای برای طراحی یک سایت موفق، مثل تمام کارهای روزمره دیگر، نیاز به ابزارهایی می باشد. [a href="طراحی سایت | طراحی وب سایت | بهینه سازی وب">طراحی وب سایت، عمدتا به دو قسمت تقسیم می شود. قسمتی از آن، طراحی فایل های گرافیکی مورد نیاز برای پوسته سایت و دیگر المان مورد نیاز در سایت می باشد و قسمت دیگر طراحی، مربوط به برنامه نویسی و چیدمان کدهای HTML و دیگر کدهای مورد نیاز در طراحی سایت می باشد.

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

نرم افزارهای مورد نیاز طراحی فایلهای گرافیکی
چنانچه شما با طراحی گرافیکی آشنایی مختصری داشته باشید حتما برخی از اسمها نظیر Photoshop، CorelDraw، Adobe Illustrator، PaintShop Pro، FireWorks و غیره، برایتان آشنا می باشند. اینها برخی از نرم افزارها و مهمترین نرم افزارهایی می باشند که در طراحی فایلهای گرافیکی در یک وب سایت، مورد استفاده قرار می گیرند. توجه به این نکته داشته باشید که لزوما دلیلی وجود ندارد تا یک طراح، بر تمامی این نرم افزارها تسلط داشته باشد و یا آنکه تمامی این نرم افزارها در طراحی یک وب سایت، می بایست مورد استفاده قرار گیرند. بلکه استفاده از یکی از آنها، معمولا می تواند کار را به سرانجام برساند.

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

در هرحال، به بحث اصلی باز می گردیم. نرم افزارهای مورد نیاز برای برنامه نویسی کدهای مورد نیاز در یک طراحی وب سایت شامل موارد زیر می باشد:

DreamWeaver
FrontPage
VisualStudio

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

*KhatKhati* · 21/9/20

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

تیم برنرز - لی مخترع HTML و وب
سال 1989 میلادی: تیم برنرز - لی (Tim Berners-Lee) با انتشار زبان برنامه نویسی خود HTML، شبکه جهانی وب را اختراع می کند

شبکه جهانی وب، زندگی خود را از مکانی شروع کرد که کمترین انتظار را برای شنیدن آن دارید: سرن (CERN)، آزمایشگاه قاره اروپا در ژنو برای آزمایش فیزیک ذره ای. جایی که فیزیکدانان سراسر دنیا در آن مکان جمع می شوند و به بیان دیدگاه ها، تفکرات، و یافته های خود می پردازند و آنها را مورد آزمایش قرار می دهند.

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

ابر متن
تیم، مستندات و مقالات علمی و ریاضی را که قرار بود بعنوان صفحه ای به اشتراک دیگر اعضا قرار داده شود را شبکه وب نامید. تیم به این موضوع فکر می کرد که صفحات علمی منتشر شده، باید چیزی فراتر از متن خالص باشند. او نام این مستندات و متون پیشرفته را ابر متن (HyperText) گذاشت بطوریکه صفحات می توانستند به یکدیگر لینک بخورند. تیم قبل از ورودش و کار در سرن، بر روی تولید متون و پردازش محتوا، کار کرده بود و نام سیستم متنی خود را که در سال 1980 برنامه نویسی کرده بود "Enquire" گذاشته بود و تنها برای استفاده های شخصی و خصوصی از آن استفاده می کرد.

نمونه اولیه مرورگر وب، در سال 1990 میلادی و بر روی کامپیوترهای NeXT بوجود آمد.

*KhatKhati* · 21/9/20

ابزارهای نوشتن کدهای HTML
برای نوشتن کدهای HTML می توانید از نرم افزارهای گوناگونی استفاده نمایید. ساده ترین و در دسترس ترین این نرم افزارها، Noetpad می باشد. شما می توانید کدهای خود را در Notepad نوشته و آنها را با پسوندهای .html یا .htm دخیره نمایید. با اینکار صفحات اینترنتی شما ساخته خواهند شد.

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

نرم افزارهای نوشتن کدهای HTML
برای نوشتن کدهای HTML و طراحی صفحات سایت می توانید از نرم افزار که در زیر می آیند استفاده نمایید. این نرم افزارها چیزی فراتر از یک ادیتور ساده بوده (چیزی که تنها در Notepad موجود بود) و امکانات پیشرفته تری را به شما خواهند داد.

دریم ویور Dreamweaver محصول شرکت Adobe
Microsoft Frontpage محصول شرکت نرم افزاری مایکروسافت
Visual Studio محصول شرکت مایکروسافت

*KhatKhati* · 21/9/20

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

اولین نسخه از این نرم افزار در سال 1997 توسط شرکت Macromedia روانه بازار شد. شرکت Adobe در سال 2005 امتیاز این محصول را خریداری می کند و پس از آن، این محصول با نام 3.0 Adobe Dreamweaver CS روانه بازار گردید.

این محصول هم اکنون که این متن در حال نوشته شدن است، با نسخه Adobe Dreamweaver CS 5.0 در بازار موجود می باشد.

محاسن و معایب دریم ویور
از محاسن این نرم افزار می توان به امکانات وسیعی اشاره کرد که این محصول در اختیار طراحان قرار خواهد داد. همچنین با استفاده از این محصول، شما بسادگی می توانید از هماهنگی موجود بین این محصول و دیگر محصولات شرکت Adobe نظیر Adobe Photoshop، Adobe Fireworks، Adobe Illustrator، و Adobe Flash استفاده نمایید. از محاسن دیگر این نرم افزار می توان به امکان برنامه نویسی برای سرور و کلاینت اشاره کرد. برخلاف Frontpage که این امکان در آن لحاظ نشده است. دریم ویور، بسادگی این امان را به کاربران می دهد تا براحتی کدهای CSS و جاوا اسکریپت مورد نیاز خود را با دید طراحی، تولید کنند. همچنین امکان خلاصه سازی و کم کردن حجم فایل ها نیز در این نرم افزار گنجانده شده است.

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

*KhatKhati* · 21/9/20

فرونت پیج
این محصول، محصول قدیمی می باشد که توسط شرکت نرم افزاری مایکروسافت در سال 1997 روانه بازار گردید. تولید این نرم افزار هم اکنون متوقف شده است. آخرین نسخه ازاین محصول، در سال 2003 تحت نام Frontpage 2003 روانه بازار شد. مایکروسافت بر طبق سـ*ـیاست های همسان سازی خود که سعی در واحدتر کردن هرچه بیشتر نرم افزارها و کتابخانه های خود داشت، نرم افزار جامع دیگری را تولید می کند که نه تنها جایگزینی برای فرونت پیج بود بلکه چیزی فراتر از آن بود. نام این محصول Microsoft Visual Studio نام داشت.

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

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

*KhatKhati* · 21/9/20

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

مایکروسافت همچنین برای این منظور، مجبور بود تا کلیه کتابخانه های خود را تحت یک سیستم یکپارچه در آورد و اینکار نیز مطابق با همان سـ*ـیاست های یکپارچه سازی مایکروسافت بود که زمزمه های آن، از قبل به گوش می رسید. نام این کتابخانه، Microsoft .Net Frameworks گذاشته شد و طبق آن، کلیه کتابخانه های شرکت، سوای آنکه از چه زبانی برای برنامه نویسی آنها استفاده شده است، به کتابخانه ای کامپایل شدند که زبان مشترک تمام زبان های برنامه نویسی مورد استفاده در شرکت مایکروسافت بود.

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

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

*KhatKhati* · 21/9/20

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

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

اکنون که دید کلی را به ساختار کدهای HTML پیدا کردید اجازه دهید تا ساده ترین ساختار یک صفحه HTML را مورد بررسی قرار دهیم:

<html>
<head>
</head>
<body>
This is a text.
</body>
</html>

یک فایل نوت پد را باز کرده و اطلاعات فوق را درون آن قرار دهید و آن را با پسوند html. یا htm. ذخیره نمایید. سپس با دابل کلیک کردن بر روی فایل ساخته شده در My Computer خود فایل را باز نمایید. چیزی که مشاهده می کنید ساده ترین فرمتی می باشد که برای یک صفحه اینترنتی در نظر گرفته شده است.

تگ html: در مثال فوق، بیان می کند که کل این فایل، حاوی کدهای html می باشد.

تگ head: برای بیان مشخصات و خصوصیات این صفحه اینترنتی مورد استفاده قرار می گیرد. محتویات درون این تگ، برای بازدیدگنندگان قابل مشاهده نخواهد بود.

تگ body: اطلاعات درون این بخش، برای بازدید کنندگان، قابل مشاهده خواهد بود.

*KhatKhati* · 21/9/20

CSS و تاریخچه آن

CSS زبانی می باشد که برای چگونگی نشان دادن (ظاهر و فرمت) اجزای تشکیل دهنده یک متن، صفحه یا سند استفاده می شود. این زبان، زبانی است که از آن برای آرایش صفحات سایت هایی که بر پایه HTML و XHTML هستند، استفاده می شود و همچنین از آن می توان برای آراستن مستندات دیگری که در قالب XML هستند استفاده کرد نظیر XML، SVG، XUL.

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

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

مشخصه های CSS توسط کنسرسیوم شبکه جهانی وب (W3C) حفاظت و نگهداری می شود.

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

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

*KhatKhati* · 21/9/20

Favicon چیست؟
فایوایکون مخفف favorites icon می باشد به معنی شکل کوچک و آیکنی مورد دلخواه شما.

فایویکون اصطلاحا به شکل کوچکی گفته میشود که هنگام یافته شدن آدرس اینترنتی مورد نظر، در ابتدای آدرس دامنه در باکس آدرس بار مرورگرهای اینترنتی ظاهر می شود. این شکل معمولا لوگو یا آرم آن وب سایت است که توسط برنامه های تولید فایو آیکون (یا favicon generator)، تولید شده اند و با کمک یکی از تگهای html در صفحه ایندکس آن وب سایت قرار گرفته اند.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

این لینک در میان شروع و خاتمه تگ head قرار داده می شود .

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

سایزهای متداول فایوایکون ها معمولا 12 در 12 یا 16 در 16 یا 32 در 32 پیکسل می باشد. این سه سایز از معمولترین سایزهای فایوآیکونها می باشند و تصاویر آن ها معمولا برداری و با کیفیت بالا اما حجم پایین، تولید می شوند. پسوند فایلهای تولید شده توسط favicon generator ها .ico است و تنها با همین پسوند شناخته می شوند.

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

خوش آمدید به رمان ۹۸ | بهترین انجمن رمان نویسی

ما را در شبکه‌های اجتماعی دنبال کنید

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

مدیر بازنشسته رمان ۹۸

ما را در شبکه‌های اجتماعی دنبال کنید

درباره ما

لینک‌های پیشنهادی رمان ۹۸

آمار آنلاین