در سالهای اخیر، گرایش به سمت طراحی سایت استاندارد و استفاده از تکنولوژی های روز در بین طراحان سایت افزایش پیدا کرده است و طراحان وب سایت ایرانی نیز گرایش بسیاری به سمت استفاده از دانش روز دارند. در این بین، HTML5 و CSS3 تحولی عظیم را در طراحی وب سایت به وجود آوردند. این تکنولوژی های طراحی سایت، طراحی سایت را بسیار آسان کرده اند و اکنون میتوانید بهتر از دهر زمان دیگری، سایت ای طراحی کنید که سبک، کارآمد و انعطاف پذیر باشد. همچنین ساخت برنامه های تحت وب و اپلیکیشن های موبایل نیز به مدد این تکنولوژی ها بسیار آسان شده است. اکنون با ابزارهایی همچون PhoneGap میتوان با استفاده از CSS3، HTML5 و جاوا اسکریپت ، برنامه های پیشرفته و پیچیده برای پلتفرم های مختلف ایجاد کرد و برخی از برنامه هایی که هم اکنون بر روی گوشی تلفن همراه شما نصب شده است، ممکن است با استفاده از همین تکنولوژی ها ساخته شده باشد. حتی در ویندوز 8 یا Windows 8 تمهیداتی اندیشیده شده است که میتوانید در این سیستم عامل مایکروسافت با استفاده از CSS3، HTML5 و JavaScript برنامه هایی بنویسید که بر روی ویندوز اجرا شوند و عملا به نظر خواهد رسید که این برنامه ها هیچ تفاوتی با برنامه های نوشته شده با زبان C یا Java ندارند. به عبارت دیگر، یادگیری طراحی سایت با تکنولوژی های HTML5 + CSS3 + JavaScript+PHP در آینده نزدیک برای هر طراح وب سایتی ، جزء ملزومات خواهد بود.

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

نکته متمایز کننده این آموزش طراحی سایت ePayBank.ir پشتیبانی دانشجویان بسته آموزشی طراحی سایت PHP می باشد که توسط مدرس طراحی سایت بصورت انلاین انجام می پذیرد و دانشجویان می توانند در هر زمان سوالات طراحی سایت و برنامه نویسی PHP خود را با پشتیبانی آنلاین درمیان بگذارند و پاسخ و راه حل مناسب را دریافت نمایند.

تیم گروه طراحان آریاکدرز بمدیریت آقای مهندس مرتضی صاحب از سال 1387 کار خود را در زمینه طراحی وب سایت، آموزش طراحی وب سایت و ترجمه کتابها و مقالات مرتبط با طراحی سایت، آغاز کرد. هدف این تیم ارائه سرویس طراحی واسط کاربری وب، براساس آخرین استانداردهای روز، برگزاری کلاسهای آموزشی و ترجمه کتابهای جدید و کاربردی طراحی وب سایت می باشد.

برای خرید بسته آموزشی طراحی سایت PHP می توانید به آدرس webdesign.epaybank.ir  مراجعه نمایید. فهرست برخی از سرفصل های اموزشی DVD طراحی سایت درگاه پرداخت در ادامه آورده می شود.

معرفی HTML5 و CSS3

قبل از اینکه به مطالب کاربردی پرداخته شود، مقداری از تاریخچه زبان نشانه گذاری یا Markup Language برایتان تعریف می شود و همچنین دلایل قانع کننده ای ذکر می شود تا از همین امروز از HTML5 و CSS3 استفاده نمایید. سپس به وضعیت پشتیبانی مرورگرها از این زبان ها می پردازیم و توضیح می دهیم که اغلب این فناوری های جدید، امروزه قابل استفاده اند – البته به شرطی که بدرستی به کار گرفته شوند.

نشانه گذاری ، سبک های HTML5

در این بخش به شما برخی از عناصر معنایی و ساختاری جدید را که به HTML5 اضافه شده است را معرفی می کنیم. فکر می کنید برچسب های DIV خسته کننده شده اند؟ ما هم همینطور فکر می کنیم. گزینه های خوبی که HTML5 در حال حاضر در اختیارمان قرار می دهد، متعددند برچسب هایی همچون aside,footer,nav,article,section,header

برچسب های معناگرای بیشتری از HTML5

در این بخش توجهمان را به راه جدیدی معطوف می کنیم که HTML5 از طریق آن رئوس مطالب را منظم می کند. سپس به بررسی عناصر متعدد و معناگرای دیگری می پردازیم که به شما اجازه می دهند تا کدی معنادار بنویسید.

فرم های HTML5

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

صوت و تصویر در HTML5

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

معرفی CSS3

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

توالی رنگ و استفاده از چند تصویر پس زمینه در CSS3

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

جلوه های تغییر شکل و جلوه های انتقالی در CSS3

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

پیوست کردن فونت و طرح های چند ستونه

فونت Arial را ترجیح می دهید یا فونت Verdana را؟ Georgia یا Time؟ شاید هم هیچکدامشان؟ در این بخش نگاهی می اندازیم به شیوه هایی که از طریق آنها میتوان از فونت های امن و رایج وب فراتر رفته و هر فونتی را که مایلیم به صفحه پیوست کرده تا در زمان بارگزاری تصاویر و برگه سبکتان، فونت مورد نظرتان هم بر روی سیستم کاربر بارگزاری شود. سپس به ویژگی جدیدی از CSS نگاهی می اندازیم که با استفاده از آن میتوانیم محتوای صفحاتمان را به شکل چند ستونه نمایش دهیم. بدون اینکه لازم باشد برچسبی به صفحه اضافه کرده و یا از دستور float استفاده کنیم.

موقعیت مکانی، برنامه های خارج از شبکه و ذخیره سازی تحت وب

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

SVG،Canvas و Drag and Drop

این دو فناوری برای رسم و نمایش تصاویر ایجاد شده اند و البته این دو فناوری رقیب یکدیگر محسوب می شوند. Canvas به تازگی HTML5 اضافه شده است و سطح پیکسلی را فراهم می کند و دارای API جاوااسکریپت خاص خود است که به شما اجازه می دهد تا با استفاده از ان، تصاویر مورد نظرتان را رسم کنید. از سوی دیگر SVG سالهاست که وجود دارد ولی به تازگی پشتیبانی خوبی از آن در مرورگرها صورت گرفته است. از این رو جایگزینی مناسب برای مورد قبلی محسوب می شود

در مورد ریز داده ها یا MicroData نیز در این بسته آموزشی صحبت به میان می آید به گونه ای که ریز داده ها بخشی از مستندات HTML5 محسوب می شوند که مربوط به اضافه کردن یک سری label به برخی از برچسب های HTML است. این label ها تنها برای ماشین قابل خواندن هستند. البته فعالیت بر روی مستندات ریزداده ها بسیار زیاد است و اطلاعات مربوط به آن به سرعت تغییر می کند اما مثالهایی در این مورد نیز بحث می شوند و در ویدیوی اموزشی بسته PHP گنجانده شده اند.

به جرات میتوان گفت با تهیه بسته آموزشی PHP درگاه پرداخت ePayBank.ir میتوانید وارد صنعت طراحی سایت شوید و برای خود کسب و کار و تجارتی را در دنیای اینترنت راه اندازی نمایید.

برای اطلاعات بیشتر میتوانید به آدرس اینترنتی Webdesign.epaybank.ir مراجعه نمایید.

• portal ab net/Refahi (25)