نوشتههای برچسبخورده با طراحی وب
اندازه های استاندارد تبلیغات اینترنتی
اگر شما ادمین وب سایت یا وبلاگی هستید حتما براتون این سئوال پیش آمده که برای پلن های مختلف تبلیغاتی سایتتات چه اندازه هایی را باید ارائه بدهدیو البته بسته به نوع و اندازه های طراحی سایتتان انتخابهای زیادی دارید اما نکته مهم این است که بتوایند کادر های استانداردی را به کار ببرید. این کار مزیتهای بسیار زیادی دارد. اما در این پست قصد دارم که اندازه های استاندارد رو در یک جدول به همراه نام انگلیسی آنها برای شما بیان کنم. تمیدوارم که از آنها استفاده کنید:
البته تبلیغات اینترنتی در اندازه های دیگری هم استفاده میشمند، که استاندارد نیستند اما بسیار معمول میباشند و شما در وب سایتهای زیادی این اندازه ها را مشاهده مینمایید:
منبع |
آشنایی با وب معنایی (Semantic web)وب معنایی چیست؟
وب معنایی چیست؟
وب معنایی (معانیگرا و معانینگر نیز نامیده شده (Semantic web)) را میشود فضایی جهانی از جنس محاسبات هوشمند ماشینی تصوّر کرد که در آن تمامی کتابها، کتابخانهها دانشها، دانشنامهها و دانشگانها (پایگاههای دانش – Knowledge bases) به صورتی معنیگرا و با توانایی درک مفهومی همدیگر در کنار هم قرار خواهند گرفت. آقای Tim Berners-Lee، که معروف به پدر وب است، آینده وب را بصورتی بیان کرده که بر خلاف وب کنونی فقط توسط انسانها قابل فهم نباشد بلکه توسط ماشین ها نیز قابل درک و پردازش است. ایده وب معنایی نیز از همین نکته منشا می گیرد. در زیر سه تعریف مختلف از وب معنایی ارائه شده است:
پروژه ای با هدف ایجاد رسانه ای جهانی برای رد و بدل کردن اطلاعات بصورتی که برای کامپیوتر قابل فهم و پردازش باشد.
وب معنایی، شبکه ای از اطلاعات در مقیاس جهانی است به نحوی است که پردازش آنها توسط ماشین ها به سادگی امکان پذیر است.
وب معنایی شامل داده های هوشمند وب است که توسط ماشین ها قابل پردازش است.
هر چند نزدیکی به تحقّقّ ایجاد چنان فضایی محتاج پیشرفتهایی جدید و کلّینگرانه در بسیاری از زمینههای مهندسی، ریاضی، هوش مصنوعی، و به ویژه در زبانشناسی، فلسفه، و بسیاری از معارف دیگر انسانی خواهد بود، گامهای اوّلیّه در این سمت برداشته شده است.مؤلّفههای وب معنایی
مولّفههای وب معنایی (Components of the Semantic Web): بسیاری از استانداردها و ابزارهای وابسته به فنّاوری اکسامال (XML) را میتوان به اینترنت آینده و وب معانینگر نیز مربوط دانست. از آن جمله باید شمای اکسامال (XML Schema)، چارچوب شرح منابع
((Resource Descrption Framework (RDF)، شمای آر دی اف (RDF schema)، و زبان هستیشناسی وب ((Web Ontology LANGUAGE (OWL) را برشمرد.
مولّفههای مختلف وب معنایی، در تصویر سمت چپ آمده است. RDF که زبان پایه استفاده شده در وب معنایی است بر پایه XML بنا نهاده شده اند.
XML نیز خود بر اساس Unicode و URI بنا نهاده شده است بنابراین از زبانهای مختلف پشتیبانی می کند. از URI نیز برای مشخص کردن مفاهیم در وب معنایی استفاده می شود، برای مثال URL نوعی URI است که برای مشخص کردن منابع در وب استفاده می شود. قسمت اصلی وب معنایی آنتولوژی ها هستند که ارتباط بین برچسب های اسناد وب معنایی و اشیا واقعی که اسناد مذکور آنها را تشریح می کنند، برقرار می کند. در بالای آنتولوژی قواعد قرار دارد که با استفاده از آنها می توان دانش جدیدی را از دانش موجود نتیجه گرفت. در صورتی که یک چهارچوب استاندارد برای قواعد موجود بوجود آوریم، می توانیم به اثبات برسیم و اثبات های بدست آمده را در کاربرد های مختلف به اشتراک بگذاریم. یکی از اهداف وب معنایی رسیدن به اطمینان است که در بالاترین لایه قرار دارد. در این جهت استانداردهای گوناگونی در حال شکلگیری و استفادهاند. از این میان میتوان FOAF که استانداردی برای ایجاد شبکه اجتماعی است، را نام برد.
زبان تشریح منابع Resource Description Languageزبان HTML که در وب کنونی استفاده می شود توانایی بیان اشیا و روابط بین آنها در وب را ندارد. بنابراین زبان دیگری جهت استفاده در وب معنایی بوجود آمده که RDF نام دارد. RDF زبانی است بر اساس XML که جهت تشریح مفاهیم و ایجاد اسناد در وب معنایی بوجود آمده است. اسناد RDF در واقع حاوی توضیحاتی در مورد اطلاعات در وب
معنایی هستند به نحوی که آنها را قابل درک برای ماشین ها می کند. همان طور که در شکل روبرو نشان داده شده است، هر عبارت در RDF بصورت سه قسمت فاعل، گزاره و مفعول بیان می شود. گزاره و فاعل خود از نوع منبع هستند و مفعول نیز می تواند از نوع منبع (Resource) یا رشته ای ثابت (Literal) باشد. برای مثال به جملات زیر توجه کنید:
Buddy Belden owns a business
The business has a Web site accessible at http://www.c2i2.com/~budstv
Buddy is the father of Lynne
این جملات ممکن است در اسناد یا نامه های یک شرکت موجود باشد و در صورت بیان آنها بصورتی استاندارد می توان از آنها به عنوان دانش در شرکت استفاده کرد. جملات بالا را می توان به صورت سه تایی های زیر مطرح کرد:
<#Buddy><#owns><#business>
<#business><#has-website><http://www.c2i2.com/~budstv>
<#Buddy><#father-of><#Lynne>
سه تایی های بالا به زبان N3 مطرح شده اند و علامت # نشان می هد که URI مفهوم مربوطه، سند جاری می باشد. همچنین ابزارهایی جهت نمایش اسناد RDF بصورت گرافی وجود دارد. شکل روبرو نمونه ای از نمایش جملات قبل بصورت گرافی است که توسط ابزار IsaViz ارائه شده توسط W3C، ایجاد شده است.
برنامه نویسی و ایجاد
به منظور ساخت و ایجاد نرمافزارهای کاربردی برروی وب معانینگر برنامهنویسان باید سه عامل گوناگون را با یکدیگر جمع و هماهنگ نمایند:
زبان اصلی برنامهنویسی مثل جاوا یا سیشارپ
زبان وب معانینگر مثل RDF و OWL
پروتکلهای وب نظیر HTTP و SOAP
ابزار ایجاد وب معانیگرا
آلتووا سمانتیک ورکس عبارت است از یک ویرایشگر بصری برای ساخت و ایجاد RDF و OWL برای وب معانینگر. صورت رایگان این نرمافزار را میتوان به صورت آزمایشی از محل سایت آن فراهم کرده و برای مدت ۳۰ روز مورد بررسی قرار داد.
سیستمهای استدلالگر
از آنجا که هدف وب معانینگر فراهمسازی منابع اینترنتی قابل فهم مستقیم و بدون واسطه توسط ماشین است، توانایی بر پردازش زبان هستیشناسی وب یکی از ویژگیهای عمده در سامانههاییست که در آینده به بهرهبرداری از این گونه منابع نیاز دارند.
منبع: http://fa.wikipedia.or
اصول طراحی بر اساس استاندارد های وب 2.0 – قسمت دوم
در مقاله قبل در مورد یکی از موارد مهم در طراحی وب 2.0 بحث کردیم. در مقاله قبلی در مورد سادگی در طرح های وب 2.0 توضیح دادم. در این بخش درباره موارد دیگری همچون در مرکز قرار گرفتن طرح و تعداد ستون های کمتر بحث خواهیم کرد.
2- در مرکز قرار گرفتن طرح
در حال حاضر اکثر طراحی های وب 2.0 ای در مرکز صفحه مرورگر شما قرار می گیرند و تعداد کمی از طرح ها نیز ، سایز خود را به نسبت سایز پنجره مرورگر شما تنظیم می کنند ولی بخش اعظم سایت ها در حال حاضر از طرح هایی با عرض ثابت استفاده می کنند که در مرکز صفحه قرار می گیرد.
چرا در مرکز صفحه قرار گرفتن یک طرح خوب است
طرح های وب 2.0 ساده، متمایز و بی و غل و غش هستند. طرج هایی که در مرکز صفحه قرار بگیرند، احساس سادگی را به شکل بهتری به استفاده کننده انتقال می دهند.
همچنین از آنجایی که ما در استفاده از تصاویر و محتوا در طرح های وب 2.0 صرفه جویی می کنیم، احتیاجی نیست که همه حجم صفحه را با تصویر و متن پر کنیم، ما سعی می کنیم که با کمترین متن و تصویر ، بیشترین منظور را برسانیم و در عوض بین عناصر صفحه از فضای سفید و خالی استفاده کنیم. این فضای خالی به خوانده شدن بهتر متن ها کمک می کند و به چشم کاربر استراحت می دهد.
کجا و چه وقت طرح ها را در مرکز صفحه قرار دهیم
قبلا هم توضیح دادم، طرح را در مرکز صفحه قرار دهید مگر اینکه دلیل کاملا قانع کننده ای داشته باشید که این کار را انجام ندهید. به عنوان مثال اگر بخواهید از فضا به شکل خلاقانه تری استفاده کنید و قصد دارید اطلاعات زیادی را در صفحه نمایش دهید (مثلا در یک اپلیکیشن وب). برای مثال نیز می توان طرح سایت تویتر را مثال زد که بخش اصلی طرح در مرکز صفحه قرار گرفته است.
اصول طراحی بر اساس استاندارد های وب 2.0 – قسمت اول
وب 2.0 محدود به اشتراک کاربران در تهیه محتوای سایت نمی شود. سایت های وب 2.0 مجموعا در طراحی نیز از یک الگوی خاص پیروی می کنند. مقالات مختلفی در این مورد موجود است ولی مقاله بن هانت در این بین به نظرم کامل ترین مقاله آمد. تصاویری داخل مقاله بعضا قابل استفاده نبود و تصاویر جدید جایگزین تصاویر قدیمی شده است. بخش هایی از مقاله نیز تغییراتی دارد. در اینجا بخش اول مقاله را می خوانید.
مطالب این مقاله صرفا اطلاعاتی در مورد شکل و ظاهر سایت های وب 2.0 ارائه کرده است و وارد جزئیات دیگر سایت های وب 2.0 نمی شود.
عزیزانی که دوست دارند در طراحی های خود از ظاهر سایت های wrb 2.0 پیروی کنند، می توانند به بخش وب 2.0 سایت template monster مراجعه کنند. سایت go2web20.net نیز گزینه مناسبی برای دیدن سایت های وب 2.0 است.
CSS Sprite چیست ؟
اشاره : نوشته ای رو تو وبلاگ چهار گوشه دیدیم مقاله خوبی بود امیدوارم شما هم لذت ببرید با تشکر از امیر عباس نویسنده این نوشته
صمیم داشتم در مورد CSS Sprite بنویسم. مقالات زیادی در این مورد در وب موجود بود ولی مقاله chris coyier برای این کار مناسب بود. بر اساس نوشته کریس این مقاله را نوشتم و فایل ها رو برای زبان فارسی آماده کردم که در پایان مقاله برای دانلود قرار گرفته است.
شاید از CSS Sprite را شنیده باشید. آیا تا به حال از آن استفاده کرده اید ؟ شاید نامی که برای این تکنیک انتخاب شده مناسب نباشد. آیا تا به حال جلو های CSS rollover را دیده اید ؟ در این تکنیک معمولا دو وضعیت یک دکمه را داخل یک تصویر قرار می دهند و با استفاده از CSS زمانی که ماوس روی دکمه قرار می گیرد، تصویر پس زمینه رو جا به جا می کنند تا جلوه مورد نظر ساخته شود. CSS Sprite نیز در اصل توسعه یافته همین تکنیک هست. تفاوت این شیوه با CSS rollover در این است که در اینجا ما محدود به دو یا سه تصویر نیستیم و می توانیم تعداد بسیار زیادی از تصاویر را داخل یک تصویر جای دهیم.
چرا باید تصاویر را با هم ادغام کنیم ؟ اگر هر تصویر به طور مجزا دانلود شود ، سریعتر و بهتر نیست ؟
خیر، نیست. در طراحی های قدیمی ، طراحان، تصاویر بزرگ را slice می کردند و هر کدام را در پس زمینه یکی از خانه های یک table قرار می دادند تا load شدن صفحه سریعتر شود. ولی این شیوه فقط چشم را فریب می دهد و عملا تاثیری در زمان لود شدن صفحه ندارد. تنها این توهم ایجاد می شود که با استفاده از این شیوه ، صفحه سریعتر load می شود. در اصل در زمان لود شدن هر یک از این تصاویر یک HTTP-Request به server ارسال می شود و هر چقدر تعداد این درخواست ها بیشتر باشد، سرعت لود صفحه شما پایینتر می آید !!
در این مقاله در وبلاگ yahoo user interface به طور مفصل در این مورد بحث شده است. در بخشی از این مقاله آمده است.
به این تصویر دقت کنید. در این جدول در ستون سمت چپ زمان دانلود فایل HTML و در ستون سمت راست زمان دانلود باقی اجزای صفحه به شکل درصدی نمایش داده شده است: ادامهٔ این ورودی را بخوانید »
5 شیوه جایگزینی متن با تصویر با استفاده از CSS
شیوه های رایج جایگزینی متن با تصویر با استفاده از CSS یکی از مواردی است که در طراحی وب اهمیت دارد. استفاده از این شیوه ها به بهینه بودن طراحی برای موتور های جستجو کمک می کند. بسیاری از طراحان مایلند که به جای متن عنوان بخش های مختلف سایت از یک تصویر استفاده کنند. این مورد برای طراحان ایرانی اهمیت بیشتری دارد چون متاسفانه برای زبان فارسی محدودیت فونت وجود دارد و تنها می توان از دو فونت استفاده کرد. با استفاده از تکنیک های جایگزینی متن با CSS می توانیم تصویری را به جای متن بخش عنوان خود قرار دهیم. به این شکل هیچ تغییری داخل کد صفحه نداده ایم و از طرفی حضور تگ های h1 تا h6 داخل صفحه باعث بالا رفتن ارزش صفحات برای موتور های جستجو خواهد شد.
هر کدام از این شیوه ها مزایا و معایبی دارند که سعی میکنیم هر یک را به طور مجزا بررسی کنیم. در ضمن فقط شیوه هایی را توضیح می دهیم که با زبان فارسی مشکلی نداشته باشد.
تکنیک 1
<h1 id="one">4goosh.com</h1>
h1#one {
width: 150px; height: 50px;
background: url('4goosh.png') no-repeat;
text-indent: -9999px;
overflow: hidden
} ادامهٔ این ورودی را بخوانید »
سمینار تخصصی CSS (رایگان)
هفته پیش با یکی از دوستان، مجتبی دشتی نژاد صحبت کردم. قرار شد که دوره جدید کلاس های CSS فانتازیو را من تدریس کنم. به احتمال زیاد کلاس های CSS در ماه آبان تشکیل می شود . در اولین دوره ، CSS در سطح مبتدی و متوسطه برگزار خواهد شد. برای تدریس در کلاس ها هم کتاب CSS the missing manual را انتخاب کردم که یکی از کامل ترین کتاب ها در زمینه آموزش CSS است.
در ضمن به جز این کتاب ها، 26 مهر، سمینار CSS هم برگزار می شود که در این سمینار من فصل اول کتاب bulletproof web desgin نوشته آقای دن سدرهولم را آموزش می دهم. این کتاب برای افرادی نوشته شده که با CSS آشنایی دارند و مایلند که شیوه های مناسب طراحی وب با CSS را بیاموزند. در این سمینار به شما آموزش خواهم داد که سایز متن صفحه را به شکلی تنظیم کنید که در تمامی مرورگر ها قابل تنظیم باشد. در خلال آموزش این تکنیک ها، برخی از باگ های مرورگر IE نیز توضیح داده می شود و هک های مورد استفاده نیز توضیح داده خواهد شد.
برای این سمینار، حدود 70 دقیقه فیلم آموزش با فرمت AVI و با کیفیت بسیار بالا و سایز 1024 در 768 نیز آماده شده که بعد از پایان سمینار به شرکت کنندگان اهدا خواهد شد. سعی می کنیم این فیلم ها رو با codec H.264 نیز فشرده کنیم تا کم حجم شود و آن را بر روی وب نیز قرار دهیم تا عزیزانی که نمی توانند در سمینار شرکت کنند نیز از این فیلم ها استفاده کنند.
این سمینار کاملا رایگان بوده و شرکت در آن برای عموم آزاد است.
برای درخواست ثبت نام در سمینار تنها کافیست که در بخش کامنت های مطلب مربوط به سمینار CSS در وبلاگ آقای دشتی نژاد ، کامنت بگزارید و ایمیل خود را قرار دهید.
اگر تعداد دوستانی که ثبت نام کرده اند زیاد باشد، احتمالا این سمینار در چند جلسه برگزار می شود. هر سوالی که در مورد این سمینار باشد را می توانید در بخش کامنت های همین مطلب عنوان کنید.
مقدمه ای بر PHP
نوشتهشده به وسیلهٔ سیاوش در برنامه نویسی, طراحی وب در اکتبر 6, 2008
تا حالا براتون سوال پیش اومده این همه سایت های رنگارنگ با این همه قابلیت های متفاوت چطوری درست می شن؟
خیلی از شماها جواب میدید آره با html که جواب کاملا درستیه! حتی خیلی از شما با html وبسایت شخصی خودتون رو ساختید ولی هر چی سعی کردید نتونستید برای سایتتون یه Search یا صفحه ی Login بسازید.
خوب این آموزش مربوط به افرادیه که html رو تا حدودی بلد هستند و البته php بلد نیستند.
اول از همه باید ببینیم این php اصلا چی هست؟
php یه زبان برنامه نویسی server-side هست که قابلیت ساختن صفحات پویا رو داره.
server-side یعنه چی؟
» سوال خوبیه! ببین مثلا html رو در نظر بگیر، وقتی یه صفحه ی html رو باز می کنی browser کد html رو می خونه و تبدیلش می کنه به اون چیزی که تو توی صفحه ی browser می بینی! پس html یه زبان client-side هست چون کل کد رو browser تبدیل به صفحه ی نهایی کرد.
اما توی php یه مقدار فرق می کنه. این تیکرو با مثال توضیح میدم. سایت سیاوش . کام با php نوشته شده، خوب حالا شما وقتی وارد www.syavash.com می شید چه اتفاقاتی میفته؟ اول مرورگر (browser) شما یه درخواست میفرسته که من فایل index.php رو می خوام! تا اینجا شبیه وقتیه که یه سایت ساخته شده با html رو باز می کنید، اما از اینجا به بعدش فرق داره. بعد سروری که www.syavash.com روش هست می بینه این فایلی که درخواست شده یه فایل php هست پس اول اون رو میفرسته برای کمپایلر php و کمپایلر php اون رو طبق کد توش اجرا میکنه و در نهایت یه صفحه ی html می سازه و اون صفحرو برای کاربر میفرسته و مرور گر شما صفحه ی html ساخته شدرو نشونتون میده! «گفتید اگه صفحه html بود فرق میکرد. اون موقع چجوری می شد؟
» اگر صفحه html بود بعد از اینکه مرورگر شما اون صفحرو درخواست میکرد سرور بلا فاصله کد اون صفحرو برای مرورگر میفرستاد و اون صفحرو شما می دیدید! «
پس یعنی اگه من بخوام کد php سایت syavash.com رو ببینم نمی تونم چون اصلا اون فایل برای مرورگر من فرستاده نمیشه، درسته؟
» آفرین! کاملا درسته!!! یکی از خوبی های زبان های server-side اینه که کد اصلی اون صفحرو نمی تونه کسی ببینه! «
اما من تو صفحه ی syavash.com وقتی راست کلیک می کنم و View page source رو میزنم بهم کد اون صفحرو نشون میده که!
» همونطوری که گفتم اون کد، کد php نیست و کد تولید شده ی htmlای هست که توسط سرور از اون فایل php تولید شده! «
خوب حالا که server-side رو گفتید چیه، میشه صفحات پویا رو هم بگید؟
اشتراک پارسیا آی تی
