Интерфейсы пользователя: различия между версиями

Материал из Artem Aleksashkin's Wiki
Перейти к навигации Перейти к поиску
 
(не показано 69 промежуточных версий этого же участника)
Строка 2: Строка 2:


[[Файл:Interface.jpg|400px]]
[[Файл:Interface.jpg|400px]]
= Design =
== Colors ==
* [https://www.youtube.com/watch?v=oAAacfCfRaA Как Создать Свою Цветовую Палитру? ОСНОВЫ СОЧЕТАНИЯ ЦВЕТОВ]
* [https://www.youtube.com/watch?v=uRR5V-6-HTM ТЕОРИЯ ЦВЕТА В ВЕБ-ДИЗАЙНЕ | ЦВЕТОВОЙ КРУГ]
* [https://www.youtube.com/watch?v=s5EnCKIDg80 ЦВЕТОВЫЕ СХЕМЫ: КАК СОЧЕТАТЬ ЦВЕТА]
== Fonts ==
* [https://www.youtube.com/watch?v=1dSjHlQTzw8 КАК ВЫБРАТЬ ПРАВИЛЬНЫЙ ШРИФТ? правила хорошей типографики]
== Logos ==
* https://logo.com/
* https://www.brandcrowd.com/logo-maker
* https://www.designhill.com/tools/logo-maker
== Icons ==
== Spacings ==
== Workflows ==
* Web as
** Documents (wiki)
** Spreadsheets (tables, numbers..)
** Presentations (landings)
* Selectors
* Tabs
* Wizard
* Split screen (Norton Commander)
* Windowed
* Dashboards
* Check engine
* Tree (comments, folders)
* Files (Icons, List, Table)
* Side panels (menu, top, right, bottom, left)
* Panel
* Start menu
* Notifications
* Header / Footer
* Unlimited Scroll
* Pinterest images


= Learn & Docs =
= Learn & Docs =
Строка 9: Строка 54:
* http://www.pcre.ru/
* http://www.pcre.ru/
* http://www.typescriptlang.org/
* http://www.typescriptlang.org/
<embedvideo service="youtube" dimensions="800x450">https://www.youtube.com/watch?v=6qLq7xkodA8&list=PLtS8Ubq2bIlUWixdH_1Q2yzZh8QJSBVmT</embedvideo>


= Browser tests =
= Browser tests =
Строка 16: Строка 63:
* https://chromium.github.io/octane/
* https://chromium.github.io/octane/
* https://webkit.org/perf/sunspider/sunspider.html
* https://webkit.org/perf/sunspider/sunspider.html
* https://webglsamples.org/aquarium/aquarium.html


= Node.js =
= Node.js =
<pre>
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.20.2
</pre>
<pre>
<pre>
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
Строка 23: Строка 75:
</pre>
</pre>
* https://github.com/nodesource/distributions/blob/master/README.md
* https://github.com/nodesource/distributions/blob/master/README.md
<pre>
sudo npm install npm@latest -g
npm config set registry http://registry.npmjs.org/
npm cache clear --force
npm config set strict-ssl false
npm config set legacy-peer-deps true
echo '{}' > ./package-lock.json
npm i
</pre>


= jQuery =
= jQuery =
Строка 34: Строка 96:
</pre>
</pre>
* https://angular.io/
* https://angular.io/
* (!!!) https://angular.io/resources?category=development
* https://ng-bootstrap.github.io/
* https://ng-bootstrap.github.io/
* https://github.com/ngx-rocket/generator-ngx-rocket
* https://github.com/ngx-rocket/generator-ngx-rocket
Строка 42: Строка 105:
* https://angularjs.org/ - устарел
* https://angularjs.org/ - устарел
* Angular 9 - What's New? What changed? - https://www.youtube.com/watch?v=TcdhAxDWWxM
* Angular 9 - What's New? What changed? - https://www.youtube.com/watch?v=TcdhAxDWWxM
* [https://www.youtube.com/watch?v=Byttv3YpjQk I only ever use *these* RxJS operators to code reactively]
* [https://www.youtube.com/watch?v=ydZK53Vmzf0 The easy way to handle ASYNC PIPE errors reactively]
* [https://buddy.works/tutorials/building-web-components-with-angular Web Standalone Components]
* [https://mokkapps.de/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments How To Build An Angular App Once And Deploy It To Multiple Environments]
<pre>
ng new angular-17
ng generate environments
ng add @angular/pwa
ng add @angular/localize
ng add @angular/animations
ng add @angular/platform-browser
ng add bootstrap
ng add bootstrap-icons
ng add @ng-bootstrap/ng-bootstrap
ng add @fortawesome/fontawesome-free
ng add @ng-select/ng-select
</pre>
== Libs ==
* https://ng-select.github.io/ng-select#/data-sources
* https://github.com/ObaidUrRehman/ng-drag-drop#demo


= Vue.js =
= Vue.js =
Строка 58: Строка 143:
* https://aurelia.io/
* https://aurelia.io/
* https://tochoromero.github.io/aurelia-bootstrap/
* https://tochoromero.github.io/aurelia-bootstrap/
= WebPack =
* https://www.youtube.com/watch?v=GNEyY70Zl30
= Typography Grid =
* https://loremipsum.io/
* https://generator.lorem-ipsum.info/
* http://gridcalculator.dk/
* http://gridinator.com
* http://grid.mindplay.dk
* https://www.gridlover.net/try
= CSS tricks =
* https://cssgradient.io/
* https://animate.style/
* https://animista.net/
* https://css-tricks.com/almanac/properties/f/filter/
* [https://www.youtube.com/watch?v=ezP4kbOvs_E Learn CSS Border Animations in 6 Minutes]


= CSS processors =
= CSS processors =
Строка 67: Строка 173:
= Design Systems =
= Design Systems =
* https://getbootstrap.com/
* https://getbootstrap.com/
** https://themes.getbootstrap.com/
** https://bootswatch.com/
** https://bootstrapmade.com/
** https://themeforest.net/search/bootstrap
** https://wrapbootstrap.com/
** https://www.creative-tim.com/bootstrap-themes/free
** https://themewagon.com/theme-price/free/
* https://bulma.io/
* https://get.foundation/
* https://ant.design/
* https://ant.design/
* https://material.io/design/
* https://material.io/design/
Строка 77: Строка 192:
* https://bootswatch.com/
* https://bootswatch.com/
* http://www.csszengarden.com/
* http://www.csszengarden.com/
* https://get.foundation/
* https://html5boilerplate.com/
* https://mdbootstrap.com/
* https://jdan.github.io/98.css/
= favicon =
* https://realfavicongenerator.net/


= Icons =
= Icons =
Строка 87: Строка 209:
* https://thenounproject.com/
* https://thenounproject.com/
* https://useiconic.com/
* https://useiconic.com/
* https://feathericons.com/
* https://primer.style/foundations/icons/
* https://github.com/danklammer/bytesize-icons
* https://coreui.io/icons/
* https://fonts.google.com/icons
* http://demo.amitjakhu.com/dripicons/
* https://ikons.piotrkwiatkowski.co.uk/
* https://icons8.com/
* https://icofont.com/
* https://tabler.io/icons


= Fonts =
= Fonts =
Строка 93: Строка 225:
** sudo npm install -g goog-webfont-dl
** sudo npm install -g goog-webfont-dl
** goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
** goog-webfont-dl -o src/assets/fonts/FiraSans/font.css -p /assets/fonts/FiraSans -d src/assets/fonts/FiraSans -a "Fira Sans"
** goog-webfont-dl -f "Roboto Slab" -d ./src/assets/fonts/RobotoSlab -o ./src/assets/fonts/RobotoSlab/font.css -p /assets/fonts/RobotoSlab -a -y 100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,700italic,800italic,900italic -u latin,latin-ext,vietnamese,greek,greek-ext,cyrillic,cyrillic-ext
* https://fonts.adobe.com/fonts
* https://www.1001freefonts.com/
* https://www.1001freefonts.com/
* https://www.myfonts.com/
* https://www.myfonts.com/
Строка 104: Строка 238:


* https://www.tiny.cloud/
* https://www.tiny.cloud/
** [https://www.tiny.cloud/blog/introducing-real-time-coediting-tinymce-codox/ Real-time co-editing in TinyMCE with Codox Wave]
* https://www.froala.com/wysiwyg-editor/v2.0
* https://www.froala.com/wysiwyg-editor/v2.0
* https://ckeditor.com/ckeditor-5/
* https://ckeditor.com/ckeditor-5/
* https://www.axsoft.co/?ref=producthunt
* https://www.axsoft.co/?ref=producthunt
* https://jaredreich.com/pell/?ref=producthunt
* https://jaredreich.com/pell/?ref=producthunt
* https://quilljs.com/


= Landing page editors =
= Landing page editors =
Строка 177: Строка 313:
* http://deepliquid.com/content/Jcrop.html
* http://deepliquid.com/content/Jcrop.html


= Charts =
= Charts & Graphs =
* https://www.chartjs.org/
* https://www.chartjs.org/
* http://www.flotcharts.org/
* http://www.flotcharts.org/
Строка 186: Строка 322:
* https://apexcharts.com/
* https://apexcharts.com/
* https://visjs.org/
* https://visjs.org/
* Finance
** https://d3fc.io/
** https://techanjs.org/
** https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html
** https://colineberhardt.github.io/yahoo-finance-d3fc/


= Maps =
= Maps =
Строка 193: Строка 334:
* http://kartograph.org/
* http://kartograph.org/
* http://planetaryjs.com/
* http://planetaryjs.com/
* https://openlayers.org/
** Google example - https://github.com/mapgears/ol3-google-maps
** https://openlayers.org/en/latest/examples/


= Image Viewers & Sliders =
= Image Viewers & Sliders =
Строка 239: Строка 383:
= Visual Effects =
= Visual Effects =


Parallax, dots, etc..
Parallax, dots, globes, etc..


* https://matthew.wagerfield.com/parallax/
* https://matthew.wagerfield.com/parallax/
Строка 247: Строка 391:
* https://codepen.io/aecend
* https://codepen.io/aecend
* https://geargenerator.com/
* https://geargenerator.com/
* https://www.sliderrevolution.com/resources/css-animated-background/
* https://beltoforion.de/en/spiral_galaxy_renderer/spiral-galaxy-renderer.html
* https://threejs.org/examples/
= Glass Effect =
* https://wpdean.com/css-glassmorphism/
* https://hype4.academy/tools/glassmorphism-generator
* https://webdesign.tutsplus.com/how-to-create-a-frosted-glass-effect-in-css--cms-32535t
* https://css.glass/
= Globe =
* https://github.com/vasturiano/three-globe
* https://codepen.io/qkevinto/pen/EVGrGq
* https://github.com/turban/webgl-earth
* https://stripe.com/blog/globe
* https://miniature.earth/
* https://github.com/earthjs/earthjs


= 3D & WebGL =
= 3D & WebGL =
Строка 284: Строка 446:
* http://canvimation.github.io/
* http://canvimation.github.io/
* http://paperjs.org/examples/division-raster/
* http://paperjs.org/examples/division-raster/
= ASCII =
* https://manytools.org/hacker-tools/ascii-banner/
* https://ozh.github.io/ascii-tables/
* https://asciiflow.com/
* http://marklodato.github.io/js-boxdrawing/
* https://patorjk.com/software/taag/

Текущая версия от 02:45, 18 ноября 2024

Прежде всего, конечно, речь пойдет о веб интерфейсах, т.к. веб очень популярен и браузер уже давно стал универсальным инструментом доступа к информации. В подборке будут указаны ссылки на свободные или бесплатные компоненты.

Interface.jpg

Design

Colors

Fonts

Logos

Icons

Spacings

Workflows

  • Web as
    • Documents (wiki)
    • Spreadsheets (tables, numbers..)
    • Presentations (landings)
  • Selectors
  • Tabs
  • Wizard
  • Split screen (Norton Commander)
  • Windowed
  • Dashboards
  • Check engine
  • Tree (comments, folders)
  • Files (Icons, List, Table)
  • Side panels (menu, top, right, bottom, left)
  • Panel
  • Start menu
  • Notifications
  • Header / Footer
  • Unlimited Scroll
  • Pinterest images

Learn & Docs

Загрузить видео
YouTube

Browser tests

Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 18.20.2

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo npm install npm@latest -g
npm config set registry http://registry.npmjs.org/
npm cache clear --force
npm config set strict-ssl false
npm config set legacy-peer-deps true
echo '{}' > ./package-lock.json
npm i

jQuery

Angular

sudo npm install -g @angular/cli

ng new angular-17
ng generate environments
ng add @angular/pwa
ng add @angular/localize
ng add @angular/animations
ng add @angular/platform-browser
ng add bootstrap
ng add bootstrap-icons
ng add @ng-bootstrap/ng-bootstrap
ng add @fortawesome/fontawesome-free
ng add @ng-select/ng-select

Libs

Vue.js

ReactJS

Aurelia

WebPack

Typography Grid

CSS tricks

CSS processors

Design Systems

favicon

Icons

Fonts

WYSIWYG editors

What You See Is What You Get

Landing page editors

Tables & Spreadsheets

Music Notes & ABC notaton

Math & formulas

Grids & Blocks

Croppers

Charts & Graphs

Maps

Image Viewers & Sliders

Players

См. также: Видео и аудио кодирование

Pinterest blocks

Super Select

Visual Effects

Parallax, dots, globes, etc..

Glass Effect

Globe

3D & WebGL

Custom Scrollbars

Date & Time pickers

Emoji

Drawers

ASCII

Источник — http://wiki.aleksashkin.net/index.php?title=Интерфейсы_пользователя&oldid=3279