آشنایی، بحث و نحوه ی استفاده: data:urls و موارد مرتبط به آن ?!~!؟

[DaRiOuShJh]

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

یه سرچی زدم کدش رو به ه نتایجی رسیدم
البته هنوز خودم نخوندم و نمیدونم ه خبره ولی به نظر چیز ساده و در عین حال جالبی میاد

اگر از دوستان هم کسی اطلاعاتی داره بیاد بزاره دوره هم استفاده کنیم

اینم لینک های گلیپینی که پیدا کردم در این مورد:


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در مورد کاربردش هم در این حد بگم که با این کد میتونید بدونه کار اضافه برای تصاویر صفحتون حالت آینه ای شکل همراه با FADE ایجاد کنید:46:

[eAmin]

سلام
به به، به به! اینقدر خوشم میاد از اینجور بحثهای پربار و علمی:دی

البته هنوز خودم نخوندم و نمیدونم ه خبره ولی به نظر چیز ساده و در عین حال جالبی میاد
کار خوبی نکردی ادامه ش رو نخوندی نتیجه اش این میشه:دی ::

در مورد کاربردش هم در این حد بگم که با این کد میتونید بدونه کار اضافه برای تصاویر صفحتون حالت آینه ای شکل همراه با FADE ایجاد کنید
---

کاربردش یک چیزی فراتر از اینها است. البته همه مواردی که لازم هست بدونید در لینکهای بالا هست فقط من چند مورد کوچیک رو هم اضافه کنم اونوقت جالب تر هم میشه!
این Data URI تقریبا میشه اینطور گفت که شما توی صفحات وب خودتون می تونید از طریق کدهای ------ انوع resource های مورد نظرتون رو ایجاد/لود کنید. مثلا یک عکس رو به کدهای ------ که در آموزشهای بالا موزش داده شده تبدیل میکنید و فقط کافیه بجای آدرس عکس، عکسهایی که به کد تبدیل شدن قرار بدید. نتنها عکس بلکه هر نوع فایلی میخواد باشه، و برای نمایش لازمه اش اینه که مرورگر فوق از اون نوع پشتیبانی کنه.
یک قابلیت جالب دیگه ای که این data uri در اختیار ما قرار میده اینه که ما میتونیم خودمون با استفاده از JavaScript انوع فایلها رو ایجاد کنیم و به مرورگر برای نمایش در صورت ساپورت شدن توسط مرورگر و دانلود اگر مرورگر از اون نوع پشتیبانی نکنه! یعنی اگر شما بخواید میتونید توسط JavaScript فایلها و فرمتهای مختلف رو ایجاد کنید، مثلن فایل های فشرده شده مثل zip و tar ایجاد کنید و یا یک فایل pdf ایجاد کنید با محتوای دلخواه و تمامی اینها بصورت رانتایم ایجاد میشه و میتونید توسط تلفیقی از data uri و JavaScript اینکارها رو انجام بدید!

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

[DaRiOuShJh]

ممنون امین
رونق دادی به تاپیکه ما:31: مدتهاست بچه ها رو ندیدم دیگه
دیدن یه چهره آشنا باعثه تلطیف فضاس

امین من یه کانورتر آنلاین هم به ------ پیدا کردم
منتها اینا چه کاربردی دارن؟ چون کدی که میده نیم متر هست بدتر حجیم میکنه که

یعنی باید همون معمولی عکس رو آپلود کنیم یه جا و بعد آدرسش رو به ------ بدیم؟

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


یک قابلیت جالب دیگه ای که این data uri در اختیار ما قرار میده اینه که ما میتونیم خودمون با استفاده از JavaScript انوع فایلها رو ایجاد کنیم و به مرورگر برای نمایش در صورت ساپورت شدن توسط مرورگر و دانلود اگر مرورگر از اون نوع پشتیبانی نکنه! یعنی اگر شما بخواید میتونید توسط JavaScript فایلها و فرمتهای مختلف رو ایجاد کنید، مثلن فایل های فشرده شده مثل zip و tar ایجاد کنید و یا یک فایل pdf ایجاد کنید با محتوای دلخواه و تمامی اینها بصورت رانتایم ایجاد میشه و میتونید توسط تلفیقی از data uri و JavaScript اینکارها رو انجام بدید!

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


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

آره اتفاقا حرفه منم همینه
جز اون اضافه کردن قابلیت فید این کد چه مزیتی میتونه داشته باشه؟
من خودم کاربردش رو دنباله موتولی جات بودم اینجا دیدم:


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

خیلی با برنامه نویسی سایتش حال میکنم پروژه ی عظیم و جالبیه

[eAmin]

مرسی، معمولا این موقع از سال شروع امتحانای میان ترم و پایان ترم پیرمون میکنه! همین الان 4-5 تا تار موی سفید رو سرم سبز شده:دی

ببین اون کانورتره می یاد خود عکس یعنی محتواش ( یعنی تر: بایت به بایت ) به کدهای ------ تبدیل میکنه، بعدا این محتوا رو باید با نوع فرمت مشخصش برای مرورگر قرار بدی تا بتونه اونو بخونه و نمایش بده. مرورگرها هم با یک الگوریتم مشخص این کدها رو دیکد میکنن و نمایش میدن. اگر برای ذخیره ی آدرس بود که دیگه بدرد نمی خورد. در مورد unique هم اگر برای آدرس در نظر نگیریمش، آره کوچیک ترین تغییری در عکس باعث تغییر در کدهای ------ میشه. حتی اگر 1 پیکسل از عکس رو به رنگ قرمز در بیاری!

برای ایجاد کردن باید همه چیز رو از پایه بنویسی. مثلا برای ایجاد کردن pdf ادوبی چه استانداردی رو قرار داده تو باید بیای همون استاندارد رو پیاده سازی کنی و بعدا برای نمایش به ------ تبدیل میکنی. بعنوان مثال این یک نمونه: jsPDF ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])

این یک عکسو ببین:

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

[DaRiOuShJh]

من چرا اینا رو ندیده بودم:31:
مرسی امین
والا به نظرم که پیچیده میاد همچین شدم مقادیری --> [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
چه کاریه خوب مگه آدم آزار داره
مثله بچه آدم آپلود میکنه لینک میده دیگه
بعد src ای چیزی ساپورت نمیکنه؟ اینطوری که باید آدم مستقیم تو خوده فایل ویرایش کنه همش

[eAmin]

خب آره یه خرده پیچیده است، بیشتر برای کارهای خاصی ازش استفاده میشه. مثلا چند وقت پیش یک بنده خدایی دقیق یادم نیست، یک سرویسی برنامه ای نوشته بود که با استفاده از این تکنیک، میتونستی تمامی محتویات (کدها) یک صفحه وب ساده رو با استفاده از data uri تبدیل و اونو توی آدرس بار کپی کنی و نتیجه رو ببینی. البته محدودیتی هم از لحاظ کاراکتر وجود داشت، چون آدرس بارهای مرورگر تا یک تعداد کاراکتر خاصی رو قبول میکنن و بیشتر از اون امکانش وجود نداره.
یا یک کارایی دیگه ای که داره، وقتی اشکالی رو با استفاده از HTML5 در Canvas ایجاد کرده باشی میتونی از data uri اشکال رو به عکس تبدیل و ذخیره کنی.
من همیشه به یک اصل در برنامه نویسی پایبندم و اونم اینه که همیشه از تکنولوژیهایی که میاد/هست در جای خودش استفاده کنیم و در استفاده از اونها نه افراط کنیم و نه تفریط:دی

درمورد src هم فعلن فکر نمیکنم چنین امکانی رو براش ایجاد کرده باشن.

[DaRiOuShJh]

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

بعد اون صفحه ای که دادم رو اگه تونستی ببین
اون افکت رو چی ریختی ایجاد کرده؟

[eAmin]

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

[DaRiOuShJh]

مرسی
والا عکسش گرفتنی نیست
سورسش رو دیدم چیزه خاصی نداره
این سایت چون کدنویسیسش طوریه که مستقیم اطلاعات رو از ftp لود میکنه مثلا برای یه آلبوم به ترتیب اطلاعات ترک ها رو از ie3tag های mp3 میگیره و نشون میده تو قسمته لیست فایل هاش
بغلش هم اگر folder.jpg تو اون فولدر باشه نشون میده
منتها اینا یه افکت دادن که پایین این folder.jpg اندازه نصفه تصویر اصلی عکس حالته انعکاسی داره
حالا کدهاش احتمالا همونایی هست که توش هست
فقط نمیدونم این کد فقط برای فایل های به نام folder.jpg جواب میده یا ...
راستی پسونده فایلی هم که نشون میده png هست

[eAmin]

اگر منظورت فقط انعکاس تصویر باشه که خب میتونی خیلی راحت از canvas و یا svg استفاده کنی! به احتمال زیاد این سایتی هم که گفتی یکی از همین روش ها رو استفاده کرده، چون نمیشه به تنهایی بشه با data uri ، همونطور که قبلا هم گفتم بشه اینکار رو انجام داد. مثلن این یک نمونه ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])که با RaphaelJS ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) ایجاد شده.

اگر میخوای به عکسهات انعکاس بدی میتونی با ProccesingJS ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) توسط Canvas و RaphaelJS ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) توسط SVG اینکار رو انجام بدی، ولی نکته ای که هست این کتابخونه ها معمولا حجم وبسایت رو بالا میبرن، بجاش میتونی از این اسکریپت ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) استفاده کنی که با استفاده از Canvas برای عکسها انعکاس ایجاد میکنه.

[DaRiOuShJh]

آهان
دستت درد نکنه امین
مثله همیشه یه دونه ای حرفم نداری:31:
فعلا که حسه طراحی و ... دیگه نمیاد اصلا اینا رو همینطوری من بابه اطلاعات عمومی پرسیدم

**************************************

پی نوشت: اینم تا اونجا که دیدم برای فونت قیمت هاش از data:url استفاده کرده:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[eAmin]

خواهش میشه.
دست بالا دست، زیاد است برادر!

*************************

این سایته هم که گفتی ایندفعه هم از Data URI استفاده نکرده! از کتابخونه Cufon ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])استفاده کرده که از Canvas و VML برای رندر کردن فونتها استفاده میکنه. کلن دنیای Canvas خیلی گسترده است فعلن نمیشه براش حدی قائل شد:دی

[DaRiOuShJh]

بهه
اینا از کجا میان؟:31: اینهمه کتاب خونه ما حالا کتاب خون نباشیم ی رو ببینیم؟:19:
بابا نامردی داره میشه طراحی وب
چیه اینا آخه
فخر میفروشن به ما
خوب امین اینا کتابخونشون رو با data:url لود میکنن دیگه
مگه اینطور نیست؟ چون آدرسه عکساشون رو میدیدم اینطوری استفاده شده بود
بعد این فونته برای فونت های فارسی هم ساپورت میشه؟

[eAmin]

:دی

نه دیگه این کتابخونه اول فونتها رو به مسیرهای svg در قالب JSON تبدیل میکنه و بعد اونها رو از طریق canvas رندر میکنه.
اگر میخوای بدونی این کتابخونه هه چجوری کار میکنه این لینک ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])رو ببین.

در ضمن از پارسی/عربی هم ساپورت نمیکنه.

[DaRiOuShJh]

ای بابا
همیشه در اقلیت به سر میبریم ما :دی
من جدای همه ی اینا در کفم که این لینک ها و جاها رو از کجا میاری شما:27:
یه نگاه میندازم ولی کلا فکر نکنم دیگه در این لایف تایم از این چیزا سر در بیارم:31:همون pohotoshop و flash و png رو که خدا ازمون نگرفته:5: