خواندن ۶ دقیقه·۴ سال پیش

آموزش طراحی سایت-آموزش HTML5

من معتقدم HTML5 دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند.). این برنامه ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد، اما مطمئنا روش توسعه ی برنامه های وب و طراحی صفحات وب را در 10 سال آینده تغییر خواهد داد. به هرحال این صفحه آموزش HTML نمی باشد. HTML5 چیز کاملا جدیدی نمی باشد. بسیاری از ویژگی های HTML5 از HTML4 یا HTML1.0 گرفته شده اند. با زمان و انرژی محدودم می توانم فقط آنچه را در HTML5 جدید است و تمرینات قدیمی که دیگر مورد استفاده نیستند را پوشش دهم.

این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.

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

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

برتراند راسل (1872 –1970)

با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

چرا HTML5 مهم است؟

آموزش کن وس Canvas

آموزش طراحی سایت :احتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد.
علاوه بر این ممکن است در مورد ایجاد انیمیشن بدون پلاگین، کنترل ورودی غنی مانند دیت پیکر، کالرپیکر، اسلایدر بدون جاوااسکریپت و در انتها ذخیره ی داده ی برون خطی (آفلاین) نیز شنیده باشید. به هرحال این هم فقط بخشی از HTML5 می باشد.
چه وقت؟
WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود.
زمان را فراموش کنید:
واقعیت این است که جدول زمانی پیشنهادی از طرف WHATWG واقعا اتفاق نیفتاد. توسعه ی وب در دستان دو گروه از مردم واقع شده است.
اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند.
امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند.

هیچ دلیلی وجود ندارد که طراحان تحت تاثیر HTML5 قرار نگیرند، زیرا که زندگی را از همیشه برای ما آسانتر کرده است.

https://www.aparat.com/v/QhIdb

آموزش طراحی سایت : DocType

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

‎<!DOCTYPE html>

و ‎بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:

<!DOCTYPE html PUBLIC &quot-//W3C//DTD HTML 4.01//EN&quot &quothttp://www.w3.org/TR/html4/strict.dtd&quot>‎
‎<!DOCTYPE html PUBLIC &quot-//W3C//DTD HTML 4.01 Transitional//EN&quot ‎‎&quotHTTP>
/www.w3.org/TR/html4/loose.dtd&quot>‎
‎<!DOCTYPE html PUBLIC &quot-//W3C//DTD HTML 4.01 Frameset//EN&quot ‎‎&quotHTTP>
/www.w3.org/TR/html4/frameset.dtd&quot>‎
‎<!DOCTYPE html PUBLIC &quot-//W3C//DTD XHTML 1.0 Strict//EN&quot ‎‎&quotHTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot>‎
‎<!DOCTYPE html PUBLIC &quot-//W3C//DTD XHTML 1.0 Transitional//EN&quot ‎‎&quotHTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot>‎

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

<!DOCTYPE html>‎
<html>‎
<head> ‎
                    <title>HTML5 is rocks!</title> ‎
</head>‎
<body>
   ‎  <h1>HTML5 Rocks!</h1>   ‎
</body>‎
</html>‎

https://www.aparat.com/v/f7yzU

آموزش کن وس Canvas

آموزش طراحی سایت : یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟ canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.
شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.
البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.
اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است.
برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.

‎<canvas width=&quot200&quot height=&quot200&quot></canvas>‎

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

‎<canvas id=&quotCanvas1&quot width=&quot200&quot height=&quot200&quot style=&quotborder:solid 1px #000000&quot</canvas>‎

https://www.aparat.com/v/SimkW

کن وس Rectangle در آموزش طراحی سایت

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

https://www.aparat.com/v/WoF9H

<canvas id=&quotc1&quot width=&quot200&quot height=&quot200&quot style=&quotborder:solid 1px #000000;&quot></canvas>
‎<button =&quotdraw_square();return true;&quot>Red Square</button>
    function draw_square() {
    ‎  var c1 = document.getElementById(&quotc1&quot);
    ‎  var c1_context = c1.getContext(&quot2d&quot);
    ‎  c1_context.fillStyle = &quot#f00"
    ‎  c1_context.fillRect(50, 50, 100, 100);
‎}

‎‎

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از <canvas>
قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.
قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

var c1 = document.getElementById(&quotc1&quot); 
   var c1_context = c1.getContext(&quot2d&quot);‎

ز لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.

c1_context.fillStyle = &quot#f00" 
c1_context.fillRect(50, 50, 100, 100);‎

جدول زیر روش های کشیدن مستطیل را نشان می دهد.

<div>
                    <canvas id=&quotCanvas2&quot width=&quot200&quot height=&quot200&quot style=&quotborder:solid 1px #000000;&quot></canvas>
   ‎  <div>
       ‎    <button =&quotblue_square_2();return true;&quot>Blue Square</button>
       ‎    <button =&quotred_stroke_2();return true;&quot>Red Square</button>
       ‎    <button =&quotclear_rect_2();return true;&quot>Erase Everything</button>
   </div>
</div>
‎  var c2 = document.getElementById(&quotc2&quot);
‎  var c2_context = c2.getContext(&quot2d&quot);
‎  function blue_square_2() { //Blue color square
‎    c2_context.fillStyle = &quot#00f"
‎    c2_context.fillRect(50, 50, 100, 100);
‎  }
‎  function red_stroke_2() { //Red color edges
‎    c2_context.strokeStyle = &quot#f00"
‎    c2_context.strokeRect(45, 45, 110, 110);
}
‎  function clear_rect_2() { //Clear all
‎    c2_context.clearRect(40, 40, 120, 120);
‎  }
‎‎

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش html آموزش تصویری طراحی سایت آموزش طراحی وب

برلیانس

شاید از این پست‌ها خوشتان بیاید