صفحه شخصی محبوبه علیزاده

گزارش هفته چهارم

آشنایی با PHP

PHPکه مخفف پیش‌ پردازندهٔفرامتن (Hypertext Preprocessor)‏ می‌باشد، یکی از پر طرفدارترین زبان‌های پردازه نویس متن باز(open source) و رایگان است که بیشتر برای طراحی برنامه‌های سمت سرور در وب‌گاه‌های پویا مورد استفاده قرار می‌گیرد.
php
در حال حاضر در بیش از ۲۴۴میلیون وب سایت و ۲.۱میلیون سرور وب نصب است. PHPنرم‌افزار آزاد منتشر شده تحت مجوزphpاست که بر روی اکثر سیستم عامل‌های معروف مانند: لینوکس، یونیکس، ویندوز، اواس‌ده و با اغلب کارگزارهای وب، قابل اجرا است. همچنین phpامکان استفاده از انواع مختلفی از پایگاه‌های دادهٔبزرگ مانند: mysqlو oracleرا فراهم می‌کند.

وردپرس، مای‌بی‌بی، جوملا، مدیاویکی و فیس‌بوک از مشهورترین نرم‌افزارهای ایجاد شده با پی‌اچ‌پی می‌باشند.

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

 

ایجاد وبسایت های استاتیک با صفحاتی از پیش طراحی شده مدتها است که جای خود را به صفحات داینامیک داده و دیگر کم تر سایتی را می توان یافت که محتوایش خط به خط به شیوه سنتی کدنویسی شده باشد، زبانهایی مثل asp , phpتحولی نوین در وب ایجاد کرده و رفته رفته گوی سبقت را از دیگران ربودند، اما چرا php را انتخاب کنیم؟ پاسخ به این سوال به عوامل زیادی مربوط می شود چرا که هیچ زبانی کامل نیست ولی با توجه به مزیت ها از جمله رایگانی پی اچ پی، امکانات و قدرتمندی، دسترسی به منابع مختلف، سازگاری با انواع سرورها، استفاده گسترده و... توصیه می کنیم اگر علاقمند به فراگیری علم برنامه نویسی وب هستید پس از آموختن کلیاتی از css, html و javascript حتما دانشتان را با php کامل کنید، درست است که برنامه های مدیریت محتوا (CMS) کار را خیلی راحت کرده اند اما همیشه ایده هایی وجود دارند که در قالب آنها نمی گنجند و یا مشکلاتی پیش می آید که به دلیل مبهم بودن کدنویسی دیگران، ممکن است نتوانید آنها را رفع کنید یا دچار مشکل شوید.

 

تاریخچه

phpدر آغاز جایگاه شخصی داشت. در ابتدای سال ۱۹۹۴عموما مانند زبان برنامه‌نویسی سی به صورت باینری توسط برنامه‌نویسان دانمارکی/گرینلندی به نام رسموس لردورف نوشته شد. لردروف در اصل این ابزار را ایجاد کرد تا یک مجموعه کوچکی از پردازه (اسکریپت) را جایگزین کند. او سعی می‌کرد که صفحات شخصی را حفظ کند. این ابزار برای این استفاده می‌شد که وظایفی مانند نمایش دادن خلاصۀ تجربیات و حفظ کردن این‌که چقدر از این صفحه مورد استفاده قرار می‌گیرد را انجام دهد.

او این دو را با مفسرش ترکیب کرد تا‌PHP/FIرا ایجاد کند چون بیشتر کاربرد داشت. PHP/FIشامل پیاده‌سازی برای زبان برنامه نویسی C بود و می‌توانست با پایگاه داده ارتباط یابد. قابلیت ساخت ساده و پویا برای کاربردهای وب. لردروف phpرا در ۱۹۹۵رها کرد تا کد آن‌را بهبود ببخشد و اشکالات آن را برطرف کند. این واگذاری به نسخۀ دوم phpمنجر شد و هم اکنون استفاده می‌شود. phpشامل شبیه‌سازی و دستکاری کردن متغیرها با توانایی جاسازیHTML بود. ترکیب آن مانند پِرل اما محدودتر ٬ساده‌تر و پایدارتر بود. زیو سوراسکی و اندی گاتمنز دو توسعه دهنده در فناوری اطلاعات اسرائیل بودند که پارسر را در سال ۱۹۹۷دوباره نوشتند و اساس php 3را تشکیل دادند با تغییر دادن مجدد نام زبان به PHP: پیش پردازنده مافوق متن.

گروه توسعه یافته رسما PHP/FI 2را در نوامبر ۱۹۹۷بعد از دو ماه تجربه و آزمایش منتشر کرد. پس از آن آزمایش عمومی php 3آغاز شد و زبان رسمی در ژوئن ۱۹۹۸تشکیل شد.سوراسکی و گاتمنز گروهی را برای باز نویسی phpتشکیل دادند و موتور زند(به انگلیسی: Zend Engine)‏ را در ۱۹۹۹تولید کردند. آن‌ها همچنین تکنولوژی آن را در اسرائیل تأسیس کردند.
در۲۲مه ۲۰۰۰, php 4که توسط موتور زند روی کار آمده بود منتشر شد. در ۱۳ژوئیه ۲۰۰۴پی‌اچ‌پی ۵که توسط ماشینZend2 نیرو گرفته بود منتشر شد. php 5 دارای ویژگی‌هایی مانند پشتیبانی از زبان شی‌ٴگرا (برای پایگاه داده) و وسعت بسیار زیاد در کارایی‌اش شده بود. phpکه اخیرا توسط گروه php منتشر شده نسخه ۴آن است. در آگوست ۲۰۰۸این نسخه به ۴٫۴٫۹توسعه یافت. در سال ۲۰۰۸بدنۀ نسخه استوا و ثابت php 5 در دست توسعه بود.php 6نیز در کنارphp 5 در دست توسعه‌است. تغییرات عمده آن شامل از بین بردن متغیرهای رجیستری است.

تا کنون phpکاملاً از یونیکد یا رشته‌های چند بایتی حمایت نکرده است. یونیکد در php 6  پشتیبانی خواهد شد. این نسخه در هر دو محیط ۳۲و ۶۴بیتی اجرا خواهد شد.

 

کاربرد

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

 

phpآموزش

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

 

اجرای کدهای phpدر سیستم عامل

از آنجایی که php یک زبان سمت سرور (server side) است برای اجرای آن در سیستم خود نیاز به برنامه هایی تحت عنوان سرور مجازی دارید که امروزه به صورت رایگان در دسترس هستند، برای نمونه یکی از بهترین ها در آدرس زیر قابل دسترس است:
www.wampserver.com
همچنین:
www.appservnetwork.com
و همچنین:
www.apachefriends.org
پس از نصب هر یک برنامه های WampServer، AppServ یا XAMPP اکنون شما قادر به اجرای فایل های php روی سیستم خودتان خواهید بود، البته فایلتان را باید در ریشه سرور مجازی که معمولا پوشه ای با عنوان www است کپی نمائید؛ سپس در مرورگرتان به فرض عبارت http://localhost/example.php را بنویسید تا فایل example.php از فولدر www فراخوانی شود، اگر هم که به یک سرور آنلاین دسترسی دارید کار خیلی راحت تر است و کافی است فایلتان را به سرور منتقل کنید.

 

ترکیب

یک برنامهٔPHP می‌تواند قسمتی از یک برنامهٔHTML باشد.PHP کد را بدون تعیین حدود کردن تجزیه می‌کند. هر چیزی خارج از این محدوده به طور مستقیم به خروجی فرستاده می‌شود و توسط PHP تعیین نمی‌شوند. حدود رایج و مشترک است که به ترتیب بسته کردن و باز کردن می‌باشد. علائم کوتاه می‌تواند برای شروع کد به کار روند: =?> یا ?> و علامتی که برای پایان کد به کار می‌رود:این علائم به طور رایج استفاده می‌شود. اما علائمی مانند یا%> کمتر مورد استفاده قرا می‌گیرند. به همین خاطر استفاده ازعلائم کوتاه و ASP کم شده‌است. هدف از این‌ها جدا کردن PHP و HTML می‌باشد. متغیر‌هایی که قبل از آن‌ها علامت $ به کار می‌رود لازم نیست مشخص شوند. بر خلاف نامها و توابع کلاس نام متغیرها به کوچک و بزرگ بودن حروف حساس است.PHP در حالت زبان form free با خط جدید و فاصله سرو کار دارد(به جز در رشته‌ها) و جمله‌ها با سمی کالن تمام می‌شوند.PHP دارای سه نوع روش برای توضیحات می‌باشد. از/* */ و // برای توضیحات استفاده می‌شود. همچنین از # برای توضیحات کوتاه استفاده می‌شود. PHP در واژگان مانند زبانهای سطح بالا همچون C است.if شرطی- حلقه‌های while و for و توابع بازگشتی شبیه به زبان C و ++C است.

 

شیوه کار برنامه

یک برنامهٔپی‌اچ‌پی می‌تواند قسمتی از یک برنامهٔاچ‌تی‌ام‌ال(HTML) باشد. مثلاً در برنامهٔزیر تنها

یک صفخه کد در این جا باید باشد

به زبان پی‌اچ‌پی است و بقیهٔبرنامه به زبان HTMLنوشته شده‌است. برای جداسازی برنامهٔپی‌اچ‌پی و برنامهٔاچ‌تی‌ام‌ال باید قسمت پی‌اچ‌پی را بین php?> و است، می‌توان از حالت خلاصه شده آن که به صورت ?> است استفاده نمود، منتها این کار استاندارد نبوده و بستگی به تنظیمات هنگام نصب phpدارد. بنابر این توصیه می‌شود که از همان حالت کامل استفاده شود.


http://ourtech.ir/wp-content/uploads/2013/08/PHP_Hello_World.jpg

با صدا زدن صفحه‌ای با متن بالا از سرور به‌وسیله مرورگر در صفحه ‘!Hello world’ را می‌بینیم.

 



[ 0 نظر ]
گزارش هفته سوم

PHOTOSHOP

آشنایی با نرم افزار فتوشاپ

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

 

تاریخچه فتوشاپ

فتوشاپ یکی از قدیمی ترین نرم افزار های کامپیوتری می باشد . در سال ۱۹۸۸   Thomas Knoll  که در مقطع دکترا مشغول به تحصیل بود ، یک برنامه کامپیوتری برای نمایش تصاویر سیاه سفید بر روی صفحه نمایش تک رنگ نوشت .اسم این برنامه را display  گذاشت .بعد ها به پیشنهاد برادر خود John Knoll تصمیم گرفت که  برنامه خود را به یک برنامه  ویرایش عکس تغییر دهد و نام آن را image pro نامید .بعد از یکسال و تغییرات برنامه ، وی نام برنامه خود را به Photoshop  تغییر داد واین اسم تا به امروز بر روی این نرم افزار قدرتمند مانده است .آن ها با شرکت تولید کننده اسکنر Barneyscan قرار داد بستند که همراه با هر اسکنر تولید آن شرکت یک نسخه برنامه فتوشاپ نیز ارائه شود .سپس john نرم افزار را به شرکت apple و شرکت adobe ارائه داد که هردو شرکت از این نرم افزار استقبال کردند و شرکت adobe تصمیم گرفت حق امتیاز این برنامه را خریداری کند و اینچنین شد که در سال ۱۹۹۰ ورژن adobe Photoshop 1.0برای ماشین های مکینتاش ارائه شد و ارائه ی این نرم افزار تا بحال نیز ادامه دارد .

 

پایه واساس نرم افزارهای گرافیکی

 پایه و اساس نرم افزارهای گرافیکی که  وrestore vector می باشد .

در گرافیک کامپیوتری ما دو نوع گرافیک داریم:

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

گرافیک وکتور: گرافیک vector بر اساس فرمول های ریاضی تصاویر را ذخیره می کند .

در گرافیک رستر  تصاویر بر اساس pixel ذخیره می شوند ، امروزه تمام افراد حتی اگر با مفهوم پیکسل آشنایی نداشته باشند ، اما حداقل نام آن را بارها شنیده اند(مخصوصا در مشخصات موبایل های امروزی!) .پیکسل چیست ؟ پیکسل در تصاویر رستر کوچکترین جزء یک تصویر می باشد ، که در گرافیک رستر تصاویر تشکیل شده از تعداد زیادی پیکسل در کنار هم می باشند .به همین دلیل به گرافیک raster گرافیک شطرنجی نیز می گویند زیرا هرچه عکس را زوم کنید از کیفیت تصویر کاسته شده و پیکسل ها نمایان تر شده و شکل حالت شطرنجی میگیرد .می توانید پیکس را یک نقطه هم در نظر بگیرید !

raster_vs_vector_1

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

499x202xraster_vs_vector.jpg.pagespeed.ic.PVAMZOzrJb

images

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

 

کاربردهای نرم افزار فتوشاپ

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

  • edit تصاویر
  • گذاشتن effect های مختلف بر روی تصاویر 
  • اصلاح و بهبود رنگ بندی تصاویر 
  • ترکیب تصاویر با همدیگر 
  • و ...

 

 

نصب برنامه

این برنامه مانند سایر نرم افزارها دارای مراحلی برای نصب می باشد که به شرح زیر است:
CD
نرم افزار را داخل درایو گذاشته و به داخل CD رفته گزینه Setup  را بعد از گذراندن مراحل ( تعیین محل نصب بر روی دیسک سخت و همچنین مراحل و صفحات بعد) به صفحه ثبت نام می رسید که از آن نمی توان گذر نمود چون از شما کد ورود نرم افزار را طلب می کند در اینجا شما به درایو CD رفته و فایل متن (Text) داخل CD نرم افزار را باز نموده و شماره سریال داخل را بلوکه کرده کپی نمایید به داخل Setup برگشته و در قسمت Serial number  ،Paste  نمایید و مشخصات فردی خود را نیز وارد نمایید به این ترتیب گزینه Next روشن و فعال میگردد.حالا دکمهNext  رازده و منتظر بمانید تا نرم افزار نصب گردد. بعد از نصب برنامه به منوی Start  رفته و از قسمت Programs گزینهAdobe Photoshop را زده تا نرم افزار باز شود.

 

محیط نرم افزار فتوشاپ

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

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


FILE:

522725561177218925213920221156238151168.
در این منو فرمانهای ورود خروج و نیز ذخیره سازی موجود می باشد که دارای زیر منوهایی می باشد از جمله :

New .1 :
 
به کمک این گزینه می توان یک صفحه جدید کاری درصحنه ایجاد نمود و کلید های میان بر این گزینه معادل Ctrl+N می باشد . زمانی که این گزینه را می زنیم یک پنجره جدید بازمی شود که تعیین کننده مشخصات و نوع تنظیمات صحنه ای می باشد که ایجاد می کنیم.دارای آیتم هایی می باشد ازجمله:

Name:
به کمک این گزینه مشخص می شود که نام صحنه ای که ایجاد می نمایید چه باشد.

درقسمت Image size تنظیمات مربوط به اندازه صفحه جدید می باشد که به ترتیب توضیح خواهم داد . قسمت Preset sizes  دراین قسمت اندازه های معیین و استاندارد و از پیش تعیین شده و را در اختیار شما قرار می دهد برای سهولت و سرعت و دقت در کار البته این گزینه به صورت پیش فرض به صورت دستی تنظیم شده است یعنی شما به صورت دلخواه می توانید اندازه صحنه جدید را ایجاد نمایید.

Width:
 
به کمک این گزینه که یک فیلد عددی است می توانید عرض وپنهای صفحه تعیین نمایید.

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

درمقابل سه گزینه بالا یک منوی کرکره ای وجود دارد :

Mode:
 
این قسمت یک منوی کرکره ای می باشد که دراین قسمت می توانید ترکیب بندی رنگ در صفحه جدید که می خواهید ایجاد نمایید تعیین کنید.

Bitmap:

1859583622211025324122325277156163782372


تصویری که پیکسل ها با عوض کردن مقدار بیت ذخیره شده تغییر می کند  ( یک یعنی روشن صفر یعنی خاموش ، در صفحه نمایش رنگی بیتهای بیشتری استفاده می شوند تا سه رنگ قرمز و سبز و آبی را هم کنترل کند)

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

RGB color:
این مدل رنگ متشکل از سه رنگ اصلی قرمز سبز و آبی می باشد و با ترکیب این سه رنگ ، رنگ اصلی به وجود خواهد آمد

Cmyk color:
این مدل رنگ جهت چاپ مورد استفاده قرار می گیرد و دراین مدل رنگها به حسب درصد رنگهای فیروزه ای (Cyanred) سرخابی (Magenta) زرد (Yellow) و سیاه (Black) تعریف میشود.

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


Contents:
در این قسمت شما مشخص می کنید که صفحه جدید در قسمت پس زمینه چه خصوصیاتی را دارا باشد.
به صورت White  سفید یا Back ground color به صورت رنگی که برای رنگ پس زمینه انتخاب می کنید یا به صورت شفاف یا  Trash pareht بعد از زدن دکمهok  صفحه جدید ایجاد می شود.


Open .2:

1641245630318117014221221314923814699187

5471462211462544821612391681131609468.jp
گزینه دوم در منوی File  گزینه Open می باشد که معادل کلیدهای میانبر Ctrl+O می باشد یا با دوبار کلیک کردن در پنجره کاری فتوشاپ می توانید به این پنجره دسترسی داشته باشید. به کمک این گزینه می توانید تصاویر را به فتوشاپ وارد نمایید.


Browse .3:

2271831944589139211341771455323939170531
به کمک این گزینه می توانید شما در داخل نرم افزار فتوشاپ یک Browser  یا یک پنجره مشاهدات داشته باشید.


Open Recent .4:

2021051097749721881170244164255244168219
به کمک این فرمان می توانید آخرین تصاویر باز شده توسط نرم افزار را دوباره بازیابی نمایید.


Close .5:
این فرمان صفحه باز انتخاب شده در نرم افزار را می بندد.


Save .6:

1361367916018589972221631312924919013924
این فرمان فایل موجود در نرم افزار را به فرمت های مختلف بر روی درایو سخت ذخیره سازی می نماید.


Save as .7:
این فرمان از فایل جاری که به کمک فرمانSave ذخیره شده ، ذخیره سازی می کند البته با نام دلخواه.


Save for web .8:
 
این گزینه تصویر جاری را برای استفاده بر روی اینترنت ذخیره سازی می نماید.


Import .9:
به کمک این فرمان می توانید فایل هایی را به داخل برنامه وارد نمایید از جمله فایل های Adobe Acrobat و ...


Export .10:
به کمک این گزینه می توانید تصاویر را خروجی بگیرید.

و...
 

 



[ 0 نظر ]
گزارش هفته دوم

CSSچیست؟

Cascading Style Sheetیا همان CSSیک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. این نرم افزار یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط HTMLو یا XHTMLمی باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVGو XULنیز به خوبی پشتیبانی می نماید.

 

دلیل استفاده وکاربرد CSS

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

CSSهمچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت محتلف Renderingمانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا (برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.

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

مشخصات و قابلیت های CSSتوسط کنسرسیوم تایین استاندارد World Wide Web  (W3C)و همچنین موسسه Internet Media Type (MIME Type)مورد تایید و در استاندارد RFC 2318قرار گرفته است.

نوع دستوری (Syntax)

CSSزبان نحوی ساده ای دارد که از کلمات کلیدی انگلیسی آسانی برای طراحی و تنظیم مشخصات صفحات استفاده می نماید. یک صفحه طراحی (Style Sheet) تشکیل شده از لیستی از قوانین (Rule) می باشد. هر قانون تشکیل شده از یک یا چند انتخاب کننده (Selector) و یا بلوک های اعلان (Declaration block) می باشد که همه آنها درون یک بلوک آکلاد ({}) قرار گرفته اند. هر کدام از بلوک های اعلان تشکیل شده از لیستی از بلوک های اعلان متغیر دیگر می باشد. هر یک از اعلان گر های متغیر شامل یک کلون (:) و یک مقدار می باشد. همچنین در صورتی که قرار باشد چندین متغیر در یک بلوک اعلان شود، هر یک از متغیر های توسط (;) از هم جدا می شوند.

نحوه بکارگیری  CSS

نحوه بکارگیری  CSS

 

برای درجCSSدر یک سندHTMLاز یکی از سه روش زیر می‌توان بهره گرفت:

Inline Style(cssهای  درونی(:

 

 اين نوع استايل در داخل تگهايHTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت.

Embedded or Global Style(cssهای جاسازی درونی):

 

 در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت.

 

Linked or External style sheet(cssهای خارجی)

 

 نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمتCSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

در اين نوع از استايلها بعد از اينکه فايل استايل خود را آماده کرديد آنرا با فرمتCSS ذخيره کرده و آنرا همانند بالا فايل استايل را به قالب لينک مي کنيم. براي راحت بود در کار مي توانيد ابتدا استايلها را به صورتInternal استفاده کرده و بعد از اينکه کارتان تمام شد کدهاي نوشته شده بين دو تگ  را درnotepadکپي کرده و آنرا با فرمتCSS دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد.

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

*اولویت در منابعCSS   در موارد فوق به ترتیب از بالا به پایین است.



[ 0 نظر ]
گزارش هفته اول

HTML:

 

زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان Hyper Text Markup Languageيا همان HTMLمي باشد.

HTMLاصول و مقدمات شروع طراحی وب سایت است .این زبان نیز توسط دنیس ریچی ابداع شد که از سال 1980 تا همین امروز از پا نه ایستاده و روندی رو به رشد داشته که در ورژن های مختلفی مورد استفاده قرار گرفته است. HTMLمبتنی بر متن یاText – basedاست که با پسوند های  .htmیا .htmlشناخته میشود و مرورگرهای وب قادر به درک و تفسیر کد های HTMLهستند ، پس از خواندن کد ها آنها راRenderکرده و برای شما به نمایش در می آورند ، البته HTMLزبان برنامه نویسی محسوب نمیشود و از آن به عنوان نشانه گزاری ابر متن یا دسته بندی اطلاعات و ساخت یافته نمودن اجزای منطقی یک نوشتار از قبیل تصاویر،جدول ها ، عنوان ها ، فهرست ها و ...به کار می‌رود. در سال 1997 فرایندHTML 4تکمیل گشت اما با پیشرفت روز افزون علوم کامپیوتر و نیاز به آپدیت های جدیدHTMlبر این شد تا گروه WHATWGکه مخفف عبارتhyper tent application technology working Groupمی باشد به نمایندگانی ازMicrosoft ,AOL , Google Nokia,Mozilla ،IBM ,OperaوAppleهستند در سال 2004 اقدام به توسعه هر چه بهتر این زبان کنند که در سال 2007 اولین نسخه قابل قبول HTML 5ایجاد شد و پس از یک سال وارد دنیای فناوری گردید و هم اکنون مورد استقبال عموم فعالان برنامه نویس قرار گرفته است.

عناصر تشکیل دهنده HTML:

HTML زبان وب ميباشد که داراي عناصر( elements)  گوناگوني است که بر روي هم تشکيل  يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:

·        ( texts & lists) متنها و ليست ها

·        ( images) عکسها

·        ( ( tables جدولها

·        (  ( forms فرمها

·        (  ( hyperlinks نقطه پيوند

·        ( frames) چارچوبها

·        ( multimedia) چند رسانه ای

·        ( JavaScript) جاوا اسکريپت

·        و...

تگهاي HTML

اولين چيزي که براي برنامه نويسي  htmlبايد دانست، اينست که تگ html  چيست و چه کاري انجام ميدهد. تگهاي html دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده. بطور کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو علامت کد htmlنوشته ميشود.داخل html  از تگ های head>> و body>> استفاده میکنیم.که داخل <head>  از تگ title><title>> استفاده می کنیم. بين اين دو تگ هربارتی نوشته شود در نوار عنوان مرورگرtitle barنمايان خواهد شد.

مطالبی را که میخواهیم در سایت نمایش داده شود باید بین تگ هایbody>> بنویسیم.

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

برای پیاده سازی کدهای htmlمیتوانیم از  notepadویندوز یاهر برنامه ویرایشگر متن دیگری استفاده کنیم. فایلهای ما باید با پسوند  htmlیا htmباشد.

تگهاي متن را ميتوان  به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنهاformattingمي گويند.

تگهاي اولیه:

تگهایی مثل<div></div>  ,  <pre></pre>  ,   <h1></h1>   ,  </br>  , : <marquee></marquee>  

تگهايformatting :

 : <ol> <li> </ol> براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيمتگ<ol>را که مخففordered list ميباشد رامينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ<li>را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده</ol>را می نويسيم.

 : <ul> <li> </ul> اين تگ راunordered listمينامند و مانند تگ بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند

و....

برخی از عناصر پرکاربرد درHTML

تگ جدول(table)

جدولها يکي از بهترين عنصرها در صفحات وب ميباشند، با استفاده از آنها مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصرديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم .تگ مشخصه جدول<table></table>ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ<td></td>استفاده ميکنيم.

میتوان به تگtable با توجه به نیازی که داریم خاصیت های زیادی را نسبت داد از جمله:border , width , height ,cellpadding, bgcolor ,….

لينک(link)

تگ مخصوص لينک<a></a>ميباشد که با خصوصيتhref آدرس دهي ميشود که تعریف میکند آن لينک به کجا وصل خواهد شد تگ لينک خاصیتی دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره  يا در يک پنجره جديد باز شود. اين خصوصيتtargetنام دارد که بايد برابر با يکي از مقادير_blank , _self , _top , _parent  قرار گيرد.

 

مثال:

<a href="http://www.totaldesign.ir/">This is a link</a>

  عکس(image)

 فرمتهاي عکس در وب:

عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از(jpeg , png ,gif) :

   (Joint Photographic Experts Group)

(Portable Network Graphics)

(Graphic Interchange Format)

افزودن عکس به صفحه وب:

 

عنصر عکس هم تگ خاص خودش را دارد که آن تگ  <img/> است که یک تگsingleمیباشد. براي مشخص کردن فايل عکس و آدرس دهي آن بايد از خصوصيتsrc=" " داخل تگ استفاده کنيم .اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طولheight و عرضwidth  ميباشد که توسط آنها اندازه يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب  Pixel  ميباشد، اگر اين خصوصيات را کنترل نکنيم عکس در اندازه اصلي خود ظاهر ميشود.

 

مثال:

<img src="/logo.jpg"  width="104"  height="142"/>



[ 0 نظر ]
1
صفحه اصلی
پست الکترونیک
can't open file