Карысныя спасылкі

WAI – Web Accessibility Initiative.

Альфабэт вэб-распрацоўцы – сьпіс спасылак на асноўныя тэмы, якія тычацца вэб-распрацоўцы.

Даведнікі

The UX Bookmark – сьпіс спасылак на даведнікі, якія тычацца дызайну і інтэрфэйсу.

Блогі

ShopTalkShow – штотыднёвы дайджэст, прысьвечаны розным аспэктам вэб-распрацоўцы і дызайну.

snook.ca – Tips, Tricks & Bookmarks on Web Development

Web Design blog at codrops.

Development blog at codrops.

Tutorials at codrops.

Перапрацаваць наступныя артыкулы з codrops:

Галерэі

Галерэя вэб-дызайну: cssheaven.com

Marketing & Management

Privacy Policy generator

Mobile

Mobile Web Best Practices

A Simple Device Diagram for Responsive Design Planning

Flexible, Mobile-First Layouts with CSS3

Mobile web optimization guide

Design & UI

Startups, this is how design works.

convert-a-warm-cheerful-web-design-to-html-and-css

Design a Beautiful Website From Scratch

Design and Code a Slick Website from Scratch – Part I

10 UI Design Patterns You Should Be Paying Attention To

Designing For The Future Web

Create a Sleek, Corporate Web Design (HD Video Series: Day 1)

http://www.uxapprentice.com/

Transitional Interfaces

goodui.org

useyourinterface.com

Прыклад унутранага стайл-гайду

Design Patterns

Redesigning The Country Selector

html5up.net

OpenShare.social – інтэграцыя з сацыяльнымі лінкамі.

Frameworks

Front-end frameworks

Front-end frameworks

Font Awesome – The iconic font designed for Bootstrap framework

One% CSS Grid

Iceberg

Semantic UI

Bootstrap

Learn & Master Bootstrap in a Week

Bootstrap themes and templates (AKVEO BlurAdmin Dashboard)

Free themes for Bootstrap

Foundation

HTML KickStart

Pure CSS

Blueprint

A Closer Look At the Blueprint CSS Framework

960.gs

Prototyping With The Grid 960 CSS Framework

Скрыпт, які падключае розныя грыд-стылі, у залежнасьці ад разрозьненьня экрану: http://adapt.960.gs/

YUI Grids

Golden Grid System

Coming Soon pages

Building An Effective ‘Coming Soon’ Page For Your Product

Designing “Coming Soon” Pages

Pricing tables

Inspiration for Pricing Tables

pricingpages.xyz

Comparison tables

Create beautiful HTML & CSS comparison tables with Compare Ninja.

Emails

20 Email Design Best Practices and Resources for Beginners

Guide to CSS support in email

Boilerplate for emails

Табліцы

Top 10 CSS Table Designs

Countdowns

Flipping countdown

Вёрстка

Вертыкальна плаваючы бокс у межах бацькоўскага элемэнту.

Responsive Web Design: A list apart, SitePoint. Examples: stephencaver.com, hicksdesign.co.uk. Рэалізацыя на cssgrid.com

Responsive Design Test Tool: http://designmodo.com/responsive-test/.

Overflow Image with vertical centering for Responsive Web Design

Liquid layout: maxdesign.com.au, www.dynamicdrive.com

Responsive Patterns

Responsive Grids With Susy

Тыпы вёрстак

Screen sizes

Foundation – responsive front-end framework

froont.com – responsive interactive site

Masonry

Сярод шэрагу розных падыходаў да вёрсткі старонкі сайту ці праграмы існуе мэтад, які часьцей за ўсё называецца па скрыпту, які ўвёў яго ва ўжываньне – Masonry. Сутнасьць гэтага мэтаду заключаецца ў тым, што зьмест старонкі аўтаматычна разьмяркоўваецца па сетцы (grid) старонкі. Гэта газетна-часопісны падыход, калі важна не пасьлядоўнасьць ці ўзаемнае разьмеркаваньне элемэнтаў старонкі, але аўтаматычнасьць гэтага разьмеркаваньня. Адным з папулярных сэрвісаў, які выкарыстоўвае такі падыход, зьяўляецца Pinterest. Магчымыя рэалізацыі:

• Па-першае, гэта сам jQuery-скрыпт Masonry.
• Па-другое, гэта альтэрнатыўны скрыпт Vanilla Masonry на чыстым JavaScript.
• І напрыканцы гэта рэалізацыя праз CSS: Masonry in CSS.

Колеры

Ultimate CSS Gradient Generator

Turn one color into an array of alternative ones

Палітры

Textures & Pattern

Тыпаграфіка

Кніга «Элемэнты друкарскага стылю ў сеціве»

An Analysis of Typography on the Web

6 Ways To Improve Your Web Typography

How to Choose a Typeface

Technical Web Typography: Guidelines and Techniques

Web Typography: Educational Resources, Tools and Techniques

Блогі

Тэорыя

Найбольш агульная рэкамэндацыя для ўжываньня шрыфтоў у сеціве — ужываць ня больш за 2 шрыфта і спалучаць сэрыфны і несэрыфны шрыфт для загалоўкаў і асноўнага тэксту.

Шрыфты serif

Сэрыфнымі зьяўляюцца тыя шрыфты, на канцах знакаў каторых зьмяшчаюцца маленькія засечкі (штрыхі). Засечкі бываюць аднабаковымі і двухбаковымі, іх форма можа быць трохкутнай, прастакутнай, закругленай і г.д. Прыкладамі такіх шрыфтоў зьяўляюцца Times New Roman і Georgia. Іх стыль звычайна клясычны, афіцыйны. Добра падыходзяць для доўгіх блёкаў тэксту, таму звычайна ўжываюцца пры друку кніг і часопісаў.

Шрыфты sans serif

Несэрыфнымі зьяўляюцца шрыфты, на канцах знакаў каторых, адпаведна, адсутнічаюць тыя засечкі, каторыя прысутнічаюць у сэрыфных (sans перакладаецца з францускай як «без»). Прыкладамі такіх шрыфтоў зьяўляюцца Arial і Verdana. Яны выглядаюць сучасна, добра падыходзяць для загалоўкаў і інструкцыяў, вельмі часта выкарыстоўваюцца ў сеціве.

Сыстэмныя шрыфты

Нягледзячы на тое, што выбар убудаваных шрыфтоў даволі абмежаваны, трэба старацца ўжываць менавіта іх. Хаця ў розных сыстэмах (Windows, Linux, Mac OS) убудаванымі зьяўляюцца розныя шрыфты і гэта, здавалася б, звужвае кола выбару яшчэ больш. Але сярод розных шрыфтоў на розных сыстэмах можна знайсьці амаль цалкам супадаючыя па характарыстакам ці вельмі падобныя адзін на другі. Улічваючы гэтыя асаблівасьці, адмыслоўцамі былі састаўлены так званыя стэкі шрыфтоў — пералічэньні блізкіх па характарыстыках шрыфтоў розных сыстэмаў. Такім чынам, калі старонка адкрываецца ў браўзэры, ён (браўзэр) спрабуе знайсьці сярод сыстэмных першы ў пералічэньні шрыфт, калі яго няма сярод сыстэмных, браўзэр бярэ наступны і гэтак далей да канца сьпісу. У канцы пералічэньня звычайна пазначаны шрыфт, каторы абавязкова існуе ўва ўсіх сыстэмах — гэта serif і sans-serif адпаведна, ў залежнасьці ад сямейства шрыфта.

Стэкі шрыфтоў

Тлом блакітнага і жоўтага колеру ў табліцах, прыведзеных ніжэй, згрупаваныя падобныя стэкі. Майце таксама на ўвазе, што адлюстраваньне шрыфтоў у апошняй калонцы гэтых табліцаў будзе трохі залежыць ад вашай сыстэмы і браўзэра.

Шрыфты serif

Шрыфты sans serif

Роўнашырынны (monospace) шрыфт

Рукапісны шрыфт

Спалучэньне шрыфтоў

Несыстэмныя шрыфты

Пры дапамозе дырэктывы CSS @font-face можна ўбудоўваць фактычна любы шрыфт, прыўносячы дызайнэрскую разнастайнасьць у сайты і сеціўныя праграмы. Хаця выкарыстоўваць дадатковыя, несыстэмныя шрыфты трэба з асьцярогаю, таму што іх трэба запампаваць на кампутар карыстальніка, што, натуральна, робіць сайты і праграмы больш «цяжкімі».

Фарматы шрыфтоў

Перш за ўсё разгледзім існыя фарматы сеціўных шрыфтоў. На самай справе іх існуе вялікая колькасьць, таму спынімся толькі на асноўных зь іх.

TrueType (TTF)

Гэты фармат быў распрацаваны ў канцы 80-х як альтэрнатыва Type 1 шрыфтам ад Adobe, якія выкарыстоўваліся ў PostScript. Як вэктарны шрыфт, які можа зьмяняць маштаб, ён выціснуў растравыя шрыфты, каторыя выкарыстоўваліся на той час у кампутэрнай тэхніцы. Пасьля Microsoft абрала гэты фармат для сваіх сыстэмных шрыфтоў.

OpenType (OTF)

Пры распрацоўцы гэтага фармату Microsoft і Adobe аб'ядналі свае высілкі. Грунтуючыся на фармаце TrueType у яго былі дададзены дадатковыя друкарскія ўласьцівасьці, хаця іх падтрымка ў браўзэрах дагэтуль незадавальняючая. У залежнасьці ад тэхналёгіі фармаваньня абрысу шрыфту існуе дзьве вэрсіі гэтага фармату:

• OpenType шрыфты з контурнай тэхналёгіяй TrueType і
• OpenType шрыфты з контурнай тэхналёгіяй PostScript.

Шрыфты з контурнай тэхналёгіяй PostScript адлюстроўваюцца на Windows-плятформах без subpixel rendering, што значна ўплывае на якасьць адлюстраваньня. Таму, нягледзячы на тое, што Microsoft абяцае вырашыць гэтую праблему ў будучым, лепш выкарыстоўваць шрыфты з контурнай тэхналёгіяй TrueType.

EOT

Internet Explorer з канца 90-х ужывае нявольны стандарт Embedded OpenType. Гэта варыяцыя ад фарматаў TrueType і OpenType, каторая мае наступныя дадатковыя ўласьцівасьці:

• EOT шрыфты зьяўляюцца кампактнай формай OpenType, якая аптымізаваная для хуткай дастаўкі праз сьцісканьне даных.
• Пры дапамозе мэханізму URL-зьвязкі шрыфты EOT могуць быць абмежаваны пэўнымі дамэнамі — ўжывацца толькі ў іх межах, што вырашае праблему незаконнага ўжываньня нявольных шрыфтоў.

Нягледзячы на тое, што гэты фармат хутчэй за ўсё ня мае патэнцыялу заняць месца стандарту для сеціўных шрыфтоў, яго нельга скідваць з рахунку на цяперашні дзень, таму што вэрсіі IE<9 не падтрымліваюць больш ніякіх фарматаў.

WOFF

У адрозьненьні ад EOT, Web Open Font Format (WOFF) разглядаецца W3C у якасьці магчымага стандарту для сеціўных шрыфтоў. На самай справе гэта нават не самастойны фармат, але абгортка для шрыфтоў OpenType і TrueType. Гэты фармат выкарыстоўвае інтэграваны альгарытм сьцісканьня zlib, што дазваляе сьціскаць шрыфты TrueType на больш, чым 40%. Фармат падтрымліваецца браўзэрамі Firefox пачынаючы з вэрсіі 3.6 і Chrome пачынаючы з вэрсіі 5.0.

SVG

Даволі экзатычны фармат, каторы таксама ня мае пэрспэктыў, з-за некаторых сваіх недахопаў, напрыклад, немагчымасьці сьцісканьня. Аднак, у апэрацыйных сыстэмах iOS (для прыладаў iPhone і iPad) да вэрсіі 4.2 (восень 2010) выкарыстоўваўся толькі гэты фармат. Пры дапамозе генэратара Fontsquirrel можна перавесьці любы шрыфт ў гэты фармат.

Выкарыстаньне

Як на практыцы ўжываць несыстэмныя шрыфты глядзіце дапаможнік па CSS.

Каталёгі і крамы шрыфтоў

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

Ligature Symbols

Несыстэмныя шрыфты можна вольна спампаваць ці набыць нявольныя на наступных рэсурсах:

Google's WebFonts

Асобнай групай стаяць каталёгі шрыфтоў, якія не даюць магчымасьці спампаваць сам шрыфт, але толькі спаслацца адмысловай HTML-інструкцыяй да гэтага шрыфту, які фізычна захоўваецца на магутнасьцях правайдэра. Адным з такіх правайдэраў зьяўляецца Google, праз яго сэрвіс WebFonts. Прыклад выкарыстаньня:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  <style>
    body {
      font-family: 'Tangerine', serif;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <h1>Making the Web Beautiful!</h1>
</body>
</html>

Adobe Edge Web Fonts

Яшчэ адзін сэрвіс падобны да WebFonts ад Google – гэта Adobe Edge Web Fonts. Прыклад выкарыстаньня:

<html>
<head>
  <script src="http://use.edgefonts.net/bree-serif.js"></script>
  <style>
    body {
      font-family: bree-serif, serif;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <h1>Making the Web Beautiful!</h1>
</body>
</html>

Абраныя несыстэмныя шрыфты

Shket multilingual free font

Прылады

WhatFont – прылада для імгненнага вызначэньня шрыфту любога тэксту на старонцы. Існуе ў выглядзе дадатку да Chrome.

TypeWonder – прылада для аўтаматычнай падстаноўкі іншага шрыфту на любую старонку ў інтэрнэце..

Выявы

Генэратар анімацыйных малюнкаў AJAX-загрузкі

Pixel Art: Create a Better Favicon For Your Website

Quick Tip: Add Favicons Quickly and Easily to Your HTML

Сьцісканьне

Sprites

Icon System with SVG Sprites

Icons

Каталёгі

Выдаленьне тла

Loading Spinner

http://pathgather.github.io/please-wait/

https://boguz.github.io/Spinners

Эфэкты

See the Pen caFxz on CodePen.

Мэню

Header Effects

Google Nexus Website Menu

Multi-Level Push Menu

Sidebar Menu Transitions

Animated Border Menus

mMenu – mobile multilevel menu

CSS3 menu generator

Off-Canvas Menu Effects

Гарызантальныя

Спадаючае мэню з дапамогаю HTML5, CSS3 і jQuery

Спадаючае Mega-мэню з дапамогаю CSS3

Мэню ў стылі Lava-Lamp

Fliped-эфэкт

Формы

An Extensive Guide To Web Form Usability.

How to Build Cross-Browser HTML5 Forms

Rethinking Forms in HTML5

Design a Prettier Web Form with CSS 3

Build a Neat HTML5 Powered Contact Form

Web Form Design: Modern Solutions and Creative Ideas

Form Elements: 40+ CSS/JS Styling and Functionality Techniques

Прыклады формаў

FORM elements design using CSS and list (ul and dl)

Beautiful Forms – Design, Style, AND make it work with PHP & Ajax

47+ Excellent Ajax CSS Forms

Form field hints with CSS and JavaScript

Fresh baked forms for your websites!

uni-form

How to Submit a Form with Control + Enter

Animated Checkboxes and Radio Buttons with SVG

FORMOID - EASIEST FORM GENERATOR

Генэратар коду вэб-формаў: http://www.phpform.org

Form Validation Techniques

Credit Card Checkout Form

See the Pen OMdPpW on CodePen.

Рэгістрацыя і лагін

Тэхнікі і рэкамэндацыі для спрашчэньня працэдур рэгістрацыі і лагіна.

New Approaches To Designing Log-In Forms

Auth0

Single Sign On provider for web and mobile apps

Intro video

Табліцы

Нерухомы загаловак

Pure CSS Fixed Header Variable Width Table

Table fixed header

CSS Scrolling Tables with Fixed Headings

Табы

SVG Tabs (Using an SVG Shape as Template)

Кнопкі

CSS3 Button Maker

Hamburgers

See the Pen VaQEME by Dzmitry Yurtsevich (@yurtsevich) on CodePen.

DC MORPH BTNS

See the Pen LEryJK on CodePen.

Local Storage

Quick tip about Local Storage

Плаваючыя нататкі з дапамогай Local Storage

Real-World Off-Line Data Storage

Аптымізацыя

Асноўныя рэкамэндацыі па аптымізацыі сайтаў і сеціўных праграмаў, то бок як зрабіць, каб сеціўная старонка хутчэй загружалася на кліенцкім баку:

• Мінімізаваць колькасьць запытаў да сэрвэру і памер рэсурсаў, якія пры гэтым загружаюцца. Напрыклад, калі старонка загружае некалькі скрыптоў альбо файлаў са стылямі, варта аб'яднаць іх у адзін файл скрыптоў і ў адзін файл стыляў адпаведна. Што тычыцца выяваў, ня варта карыстацца вялікімі, якія на старонцы ўціскаюцца да меншага памеру, але варта карыстацца таго памеру выявамі, які потым і ўжываецца на старонцы.
• Стылі павінны падключацца ў загалоўку старонкі перад скрыптамі.
• Элемэнты падключэньня скрыптоў павінны суправаджацца атрыбутам async для таго, каб агент не чакаў загрузкі скрыптоў, але адлюстраваў старонку адразу, як толькі загружаны HTML і CSS. Выключэньнем можа быць сытуацыя, калі нейкі скрыпт патрэбны не для ўзаемадзеяньня з карыстальнікам, але для адлюстраваньня нейкага(-іх) элемэнту(-аў) пэўным чынам (што ня вельмі пажадана рабіць).

Праект ад Google Make the Web Faster.

Tips for authoring fast-loading HTML pages ад developer.mozilla.org

Let’s Do Simple Stuff to Make Our Websites Faster ад css-tricks.com

BOOK OF SPEED

A web performance tool aimed to help developers find critical performance issues.

Incapsula.com – Maximum Security & Performance For Any Website.

Introduction to robots.txt

Apache

Найбольш ужываным HTTP-сэрвэрам зьяўляецца Apache. Яго наладкі зьмяшчаюцца ў файле .htaccess (месьціцца на баку сэрвэру) у выглядзе сьпісу дырэктываў. Ён можа месьціцца як у каранёвым дырэкторыі праграмы/сайту, гэтак і ў любым яго даччыным дырэкторыі, але ўжывацца ён будзе толькі для той дырэкторыі, у якой месьціцца, і для ўсіх яго даччыных пад-дырэкторыяў. Усе дырэктывы з файлу .htaccess адрасуюцца да пэўнага модулю Apache. Разгледзім больш падрабязна некаторыя з дырэктываў.

Змоўчная старонка

Дырэктыва DirectoryIndex прызначана для таго, каб пазначыць старонку для адлюстраваньня, калі ў адрасным радку не пазначана аніякая (толькі дамэн і магчыма дырэкторыі):

DirectoryIndex welcome.html welcome.php

Старонкі памылак

Пры дапамозе дырэктывы ErrorDocument у выпадку памылкі можна перанакіраваць карыстальніка да пэўнай старонкі, якая гэтую памылку апісвае:

ErrorDocument 404 error.html

Лік пасьля дырэктывы пазначае код памылкі HTTP, а пасьля – сама старонка.

Часавая зона, кадоўка і мова

Пры неабходнасьці ўсталяваць змоўчны часавы пас, кадоўку ці мову для HTTP-загалоўкаў можна скарыстацца наступнымі дырэктывамі:

SetEnv TZ Europe/London
AddDefaultCharset UTF-8
DefaultLanguage en-GB

Кантроль доступу

Наступным чынам можна забараніць ці дазволіць праглядаць зьмест дырэкторыяў:

# забарона прагляду зьместу дырэкторыяў
Options All -Indexes
# дазвол прагляду зьместу дырэкторыяў
Options All +Indexes

Забараніць доступ да файлаў пэўнага дырэкторыю, можна зьмясьціўшы наступную дырэктыву ў .htaccess-файле у гэтай дырэкторыі:

Deny from all

Можна таксама забараніць усім, акрамя пэўнага/-ых IP:

Order Deny,Allow
Deny from all
Allow from XXX.XXX.XXX.XXX

...ці дамэну:

Order Deny,Allow
Deny from all
Allow from apache.org

...альбо дазволіць усім, акрамя пэўнага/-ых IP:

Order Allow,Deny
Allow from all
Deny from 145.186.14.122
Deny from 124.15

no-www

Па змоўчаньні сайт можа быць даступны і як www.domain.com, і як domain.com. Але, улічваючы што Google не ўхваляе гэтага па прычыне дубляваньня зьместу, неабходна прадухіляць доступ альбо да www.domain.com, альбо да domain.com. Робіцца гэта праз перанакіраваньне звычайна з www.domain.com да domain.com:

RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

Іншы варыянт:

RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

Альбо, калі патрэбнае зваротнае перанакіраваньне:

RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}$1 [R=301,L]

Іншы варыянт:

RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Тэставаньне

Тэставаньне карыстальніцкага вопыту

Review Of Usability And User Experience Testing Tools

Roundup of Usability Testing Tools for Web Designers and Developers

Choosing the Right Website User Testing Tools for the Job

ghostrec.com

inspectlet.com

userfeedbackhq.com

Прылады

Ant

Automate Your Projects With Apache Ant

ElasticSearch

Хуткі, поўнатэкставы пошукавы рухавік.

Сэрвісы і API

Feedback

Элемэнт Feedback для Langaroo.com ад GetSatisfaction.com: home, widgets.

Dropbox Chooser

The Dropbox Chooser is the fastest way to integrate Dropbox into your web apps. The Dropbox Chooser is a small JavaScript component that enables your apps to get files from Dropbox without having to worry about the complexities of implementing a file browser, OAuth, or managing upload and storage.

Amazon

Using AWS S3 to Power Your Digital World

CAPTCHA

Forecast API

https://developer.forecast.io/docs/v2

59+ Amazing (and jaw-dropping) web design-related lists with titles that will rip your face off, blow your mama's mind, and make you cry under the crushing pain of their inspiration

Manual of Dragon Labs' Rainbow

Bringing Interactivity To Your Website With Web Standards

Useful Web Services, Tools and Resources For Web Designers

Five Useful Interactive CSS/jQuery Techniques Deconstructed

Разьдзел «Web Development» на MSDN