طراحی در مرورگر

محتوا

• مزایای طراحی با کد
• اول داده ها
• خوبی موبایل به صورت رایگان
• پیدا کردن یک زبان مشترک
• سریعتر یاد بگیرید
• تکرار سریع
• زمان سریعتر برای راه اندازی
• چرا HTML5؟
• ویژگی جادویی - داده
• CSS3 - این فتوشاپ جدید است
• Sass + Compass: به طرز جادویی خوشمزه است
• jQuery: اوه ، بله می توانید
• چارچوب ها
• افکار نهایی

این مقاله برای اولین بار در شماره 235 مجله .net منتشر شد - پرفروش ترین مجله جهان برای طراحان و توسعه دهندگان وب.

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

در طول سال ها ، من روند طراحی و ابزارهای خود را تنظیم کرده ام. تصور می کنم که این کار را ادامه دهم. این ماهیت طراحی برای فناوری و وب است. این صنعت دائماً در حال پیشرفت است. روند و ابزارهای ما نیز باید پیشرفت کنند.

HTML5 و CSS3 انتقال بیشتر فرآیند طراحی در بالادست را آسان می کند - به دور از فتوشاپ و بیشتر به سمت طراحی زنده و تنفس. ابزارهایی مانند Foundation ، Bootstrap و jQuery باعث می شوند روند طراحی شما بیشتر شود تا کدها بیشتر قابل دسترسی باشند.

مزایای طراحی با کد

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

اول داده ها

چیزی که من همیشه در طراحی با HTML دوست داشتم این است که تفکر را از دیدگاه داده اول تشویق می کند. در مقابل ، با استفاده از برنامه های رسم مانند Illustrator ، OmniGraffle یا Balsamiq ، شما با یک جعبه شروع می کنید و آن را با داده پر می کنید.

در HTML شما DOM (مدل شی document سند) را می سازید ، مانند ساختن جدول مطالب. این بازگشت به طراحی اطلاعات واقعی با سلسله مراتب معنی دار است. HTML5 با افزودن عناصر معنایی جدید ، یک قدم جلوتر می رود: مقاله ، بخش ، سرصفحه ، کنار ، پاورقی و غیره. این رویکرد داده اول با طراحی اول و همراه با پاسخگویی به راحتی ترکیب می شود.

خوبی موبایل به صورت رایگان

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

input type = "email"> input type = "tel"> input type = "url"> input type = "date"> type input = "date-time">

آنچه در مورد این نوع ورودی های اضافی و منحصر به فرد بسیار جالب است ، این است که مرورگرهای تلفن همراه در iOS و Android آنها را تشخیص می دهند و به طور خودکار صفحه کلید آگاه از زمینه را مبادله می کنند - بدون نیاز به پلاگین یا هک ویژه jQuery. اوه ، و اگر مرورگر شما نمی داند چیست input type = "email"> است ، پس از آن فقط به طور پیش فرض یک ورودی متن است.

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

"بسیار جالب است که طراحان و توسعه دهندگان ما چگونه می توانند به یک زبان کار کنند" - جان دراگو ، توسعه دهنده برنامه در Inflection.

ببینید آیا این آشنا به نظر می رسد. من در یک اتاق کنفرانس با نیم ده برنامه کاربردی سمت سرور هستم که می توانند حلقه های اطراف من را در Ruby ، ​​Python ، Java یا .NET کدگذاری کنند. من تنها طراح هستم در ابتدا چند پیشنهاد من به دلیل پیچیده بودن در اجرا رد می شوند. من تا صفحه سفید می روم و شروع به نوشتن برخی از HTML و CSS روی صفحه می کنم که چگونه می توان طرح را پیاده سازی کرد. ناگهان لحن مکالمه تغییر می کند و یکی از توسعه دهندگان با اکراه می گوید ، "خوب ، بله - اگر این کار را بکنیم ، می تواند م workثر باشد."

انتقال بیشتر مراحل طراحی من به کد باعث بهبود مکالمات با توسعه دهندگان شده است. با دانستن اینکه چگونه می توانید طرح های خود را به صورت کد تهیه کنید ، یک لایه احترام بیشتری کسب می شود. برای کسب این احترام نیازی نیست که متخصص باشید. در حالی که مهارتهای HTML و CSS من کاملاً خوب است ، مهارتهای JavaScript من در بهترین حالت متوسط ​​هستند. و من از پذیرفتن آن خجالتی ندارم. هنوز هم ، هنگام کار با frontend یا توسعه دهندگان سمت سرور ، این واقعیت که ما می توانیم به زبان مشترک صحبت کنیم یا در نیمه راه ملاقات کنیم ، یک مزیت بزرگ است.

سریعتر یاد بگیرید

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

تکرار سریع

آخرین بار کی آخرین طراحی نهایی ارسال شده دقیقاً با فتوشاپ شما مطابقت داشت؟ تقریباً هرگز. با طراحی محصول دیجیتال ، تغییر به طور مداوم اتفاق می افتد. علاوه بر این ، تغییراتی از جمله افزایش اندازه عنوان های شما از 22pt به 24pt در چند صفحه نمایش ممکن است ساعت ها در فتوشاپ طول بکشد. اشیا Smart هوشمند به شما سطحی از طراحی شی گرا را در فتوشاپ ارائه می دهند. متأسفانه ، اکثر طراحان بصری که می شناسم از اشیاject هوشمند به اندازه کافی استفاده نمی کنند. با CSS ، از آنجا که رویکردی منظم تر در طراحی را ترغیب می کند ، تغییرات تایپی به جای ساعت ها ، چند دقیقه طول می کشد.

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

زمان سریعتر برای راه اندازی

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

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

چرا HTML5؟

HTML5 آسان تر از نسخه های قبلی HTML است. به عنوان مثال اعلامیه نوع سند را در نظر بگیرید. در نسخه های قبلی HTML ، دوبله چیزی شبیه به این بود:

! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

و شش نسخه مختلف وجود داشت. خوشبختانه HTML5 دوبله به نظر می رسد مانند این:

! DOCTYPE HTML>

به طور جدی. خودشه. تکان دهنده ساده است.

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

div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" نوار کناری "> / div> / div> div id =" پاورقی "> / div>

هیچ چیز غیر عادی وجود دارد. اما پس از پر شدن از محتوا ، این الگو به سوپ div تبدیل می شود. در مقابل ، با عناصر معنایی جدید HTML5 ، اسکن چیزی بسیار ساده تر و آسان تر خواهید داشت ، مانند این:

header> nav> / nav> / header> مقاله> کنار> / کنار> / مقاله> پاورقی> / پاورقی>

نگاه کن چیزی که منطقی است.

ویژگی جادویی - داده

HTML5 با یک قلاب عالی دیگر ارائه می شود که به شما امکان می دهد معنای معنایی خود را بسازید: داده ها-. قبلاً ، اگر می خواستید به یک عنصر DOM معناداری اختصاص دهید ، محدود به شناسه ، کلاس و نقش بودید.

متأسفانه شناسه ها باید منحصر به فرد باشند. کلاس ها جهانی هستند (yippee!) ، اما استفاده از آنها می تواند به سرعت به یک آشفتگی تبدیل شود. نقش ها دارایی کم استفاده شده ای هستند که معنای قابل توجهی برای ARIA فراهم می کنند. اخیراً ، من از داده ها برای یک پلت فرم تجزیه و تحلیل ردیابی رویداد که در Inflection در حال توسعه هستیم استفاده می کنم.ما طرفداران زیادی برای آزمایش طرح های خود هستیم. هنگام کار روی برنامه ها یا صفحاتی که تعامل زیادی دارند ، ما می خواهیم اطلاعات دقیق تری در مورد تعامل مشتری در این صفحه داشته باشیم.

را وارد کنید داده ها-. با استفاده از آن می توانید یک مدل معنای «خودتان را تعیین کنید» اختصاص دهید ، عبور دهید و قلاب کنید. بنابراین ، به عنوان مثال ، می توانید این کار را انجام دهید:

نوع ورودی = "دکمه" data-id = "facebook" dataregion = "اصلی" data-event = "ثبت نام"> نوع ورودی = "دکمه" data-id = "توییتر" dataregion = "اصلی" data-event = "ثبت نام "> نوع ورودی =" دکمه "data-id =" linkedin "dataregion =" اصلی "data-event =" ثبت ">

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

تصور کنید این مورد را به سایتی مانند Pinterest یا طراحی جدید Myspace گسترش دهید که مشتریان کاشی های آن را می کشند و رها می کنند و براساس علاقه آنها مرتب می شوند. یا احتمالاً کاشی هایی را که به آن علاقه ندارند پنهان کنید داده ها- ویژگی شما را قادر می سازد یک لایه معنایی معنایی دیگر به مواردی که می توانید تعریف کنید پیوست یا اختصاص دهید. برای سایت ها و برنامه هایی که وابستگی زیادی به Ajax دارند ، فرصت های بی حد و حصلی را ایجاد می کند.

CSS3 - این فتوشاپ جدید است

CSS3 سطح کاملاً جدیدی از طراحی ظاهر و احساس را به وجود آورد که قبلاً به تصاویر پس زمینه ، برش ها و روش معروف "درهای کشویی" نیاز داشت. خوشبختانه ، این همه مربوط به گذشته است.

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

ابتدا ، بیایید چند تنظیم به طور پیش فرض انجام دهیم دکمه> و نوع ورودی = "ارسال"> عناصر. با فرض اینکه از یکی از بازنشانی های استاندارد CSS استفاده می کنید ، ما فقط کمی فضای اندازه گیری و تنفس اضافه خواهیم کرد.

/ * دکمه های دکمه ها ، که دکمه های آنها را دارد. ======================================== دکمه * * / ، ورودی [type = "submit"] {height: 2.7em؛ بالشتک: .4em .7em؛ ارتفاع خط: 1.9؛ }

Protip: دکمه ها و ورودی هایی که ارسال می شوند می توانند برای فرم دهی مجدد مشکل باشند. من با تنظیم ارتفاع خط به 1.6 یا بیشتر متوجه شدم که می توانید از هک شدن نیاز به یک تقسیم اضافی یا یک بازه داخلی در داخل جلوگیری کنید دکمه> برچسب

اکنون ما مشکل دکمه خود را "رفع" کرده ایم ، می توانیم یک ایجاد کنیم .btn کلاس به ما یک دکمه تمیز و زیبا با گوشه های گرد ، یک شیب خطی ، رئوس مطالب و شکل ظاهری حروف چاپی را می دهد.

.btn {display: inline-block؛ حاشیه: 1px solid # d4d4cc؛ -moz-border-radius: 4px؛ شعاع -webkit-border: 4px؛ شعاع مرز: 4px؛ بالشتک: .4em .7em؛ پس زمینه: # edeff2؛ background: -webkit-gradient (linear، 0٪ 0٪، 0٪ 100٪، from (#fefefe)، color stop (0.55، # edeff2)، to (# e4e6e9))؛ background: -moz-linear-gradient (top center، #fefefe، # edeff2 55٪، # e4e6e9)؛ -moz-box-shadow: rgba (160،172،187، .7) 0 0 .2em 0؛ -webkit-box-shadow: rgba (160،172،187، .7) 0 0 .2em 0؛ box-shadow: rgba (160،172،187، .7) 0 0 .2em 0؛ رنگ: # 6c7786؛ اندازه قلم: 1.1 em؛ text-shadow: #fefefe 1px 0 1px؛ ارتفاع خط: 1.375em؛ مکان نما: اشاره گر؛ }

و سپس یک اثر شناور خوب با درخشش ظریف با استفاده از جعبه سایه روش:

.btn: شناور ، .btn: تمرکز {-moz-box-shadow: # 129ceb 0px 0px 2px؛ -webkit-box-shadow: # 129ceb 0 0 2px؛ box-shadow: # 129ceb 0 0 2px؛ پس زمینه: # e6e9eb؛ background: -webkit-gradient (linear، 0٪ 0٪، 0٪ 100٪، from (# f7f7f7)، stop-color (0.55، # f6f6f7)، to (# e6e9eb))؛ background: -moz-lineargradient (بالای مرکز ، # f7f7f7 ، # f6f6f7 55٪ ، # e6e9eb)؛ رنگ: # 45484b؛ text-shadow: rgb (255،255،255) 1px 1px 0؛ حاشیه رنگ: # c9c9c0؛ }

اکنون ، من علاقه زیادی به نوشتن کد شیب خطی ندارم. طولانی و گیج کننده است. همانطور که می بینید ، من فقط نسخه را برای آن قرار داده ام -موز, -وبکیت، و مدل استاندارد اگر می خواهید نسخه های -o و -ms را وارد کنید ، باید کد را دو برابر کنید.

دو گزینه دیگر نیز وجود دارد. یکی مولد CSS3 است. چندین مورد از جمله ColorZilla در وب وجود دارد. اما اگر می خواهید بازی خود را کمی بالا ببرید ، غواصی در Sass را در نظر بگیرید: همراه با قطب نما ، این یک هدیه الهی است.

Sass + Compass: به طرز جادویی خوشمزه است

دیگر نمی توانید امیدوار به نسخه تک شاخ CSS4 باشید. اینجاست و Sass + Compass نام دارد. Sass مخفف Syntactically Awesome Stylesheets است: شما تمام مزایای سنتی CSS3 را با لذتهای اضافی متغیرها ، mixins ، Extenders و سایر موارد خوب به ارث می برید.

من اخیراً یک فایل CSS 5000 خطی را که بیش از 30 تغییر در همان سایه آبی داشت ، دوباره اصلاح کردم. با Sass ، هر کدوم را با این کد جایگزین کردم:

رنگ: آبی آبی

با تعریف کردن آبی در من _variables.scss پرونده ، من می توانم یک رنگ پیش فرض ایجاد کنم که هر پرونده CSS یا SCSS بتواند به آن مراجعه کند. هرکسی که CSS می نویسد می تواند استفاده کند آبی و نگران استفاده از قطره چکان ، یافتن کد hex یا رنگ RGB ، RGBA یا HSL نباشید.

آن کد شیب خطی را به خاطر می آورید؟ به جای نوشتن چندین خط کد ، در این مورد چطور:

@ شامل زمینه (شیب خطی (# b1cfdc ، # 7a9cac)) ؛

بگذارید Sass و Compass حرکت سنگین را انجام دهند و نحو صحیحی را برای شما تولید کنند: انجام شد. بگذارید بگوییم شما یک نسخه تیره یا روشن تر از یک رنگ می خواهید. می توانید قطره چکان را در فتوشاپ به اطراف منتقل کنید یا فقط از دستورات روشن / تیره در Sass استفاده کنید:

@ include background (gradient-gradient (darken ($ litegray، 2٪)، darker ($ off-white، 5٪)))؛

این یک شیب خطی با 2٪ تیره ایجاد می کند $ lite-grey و 5٪ تیره شد سفید رنگ. Voil! حتی به کدهای HEX یا RGB نیازی ندارید.

jQuery: اوه ، بله می توانید

من باید اعتراف کنم. جاوا اسکریپت برای ترساندن من استفاده می شد. سپس جی کوئری را پیدا کردم. من ادعا نخواهم کرد که یک معلم مربی JavaScript هستم ، اما کاملاً مطمئن هستم که می توانم هر نوع انتقال یا عملکردی را که برای استفاده از jQuery نیاز دارم ، انجام دهم.

به عنوان مثال ، توانایی نمایش ورودی شماره تلفن دوم روی صفحه را با کلیک کردن روی پیوند افزودن شماره جدید ، در نظر بگیرید. با استفاده از jQuery ، به سادگی این را می نویسید:

// - Progressive zbul - // $ ('. new-number'). کلیک کنید (function () {$ ('. alt-number'). fadeIn ('fast')؛})؛

آیا به دنبال چیزی پیشرفته تر هستید؟ احتمالاً افزونه ای برای آن وجود دارد. رفتارهای اساسی آسان است و رفتارهای پیچیده با jQuery قابل دسترسی است.

چارچوب ها

امروزه دو مورد از قوی ترین چارچوب ها ، Foundation و Bootstrap هستند. حالا ، قبل از اینکه چارچوب های CSS را رد کنید ، بگذارید چیزی از شما بپرسم. آیا از jQuery استفاده می کنید؟ یاقوت در ریل؟ جنگو؟ همه چارچوب ها

درست مثل jQuery و RoR ، بنیاد و Bootstrap از این راه تشخیص داده شده اند که تعداد معدودی از کارها وجود دارد که ما مرتباً انجام می دهیم (مانند بازنشانی ، تایپوگرافی ، شبکه ها ، فرم ها ، دکمه ها ، nav و لیست ها). Foundation و Bootstrap هر دو از طریق استفاده از کلاس های کمکی از طرح های پاسخگو پشتیبانی می کنند. هر دو مستند هستند و از طریق جاده آزمایش شده اند ، بنابراین می توانید با اطمینان از آنها استفاده کنید.

یک تفاوت اساسی بین این دو: بوت استرپ بر اساس سیستم LESS برای پیش پردازش CSS است ، در حالی که Foundation بر اساس Sass است. من Sass را به دلیل قابلیت های اضافی خود به LESS ترجیح می دهم ، اما Sass و LESS CSS سنتی را به قطعات تبدیل می کنند.

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

افکار نهایی

آیا می خواهید کنترل بیشتری بر چگونگی نتیجه نهایی طراحی شما داشته باشید؟ فرایندهای بیشتری را به سمت بالا برای کدگذاری حرکت دهید. HTML5 سرانجام یک حس به DOM می دهد. رهایی خوب از مزخرف دوبلهs و divitis. CSS3 فتوشاپ جدید است: شیب های خطی ، حاشیه مرزی ، و سایه های جعبه ای FTW! و با ابزارهایی مانند Bootstrap ، Foundation ، Sass و jQuery ، انتقال طراحی بالادست به کد هرگز آسان نبوده است.

55 نمونه شگفت انگیز از HTML5 را در Creative Bloq کشف کنید.