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

Материал из Artem Aleksashkin's Wiki
Перейти к навигации Перейти к поиску
 
(не показано 112 промежуточных версий этого же участника)
Строка 1: Строка 1:
Прежде всего, конечно, речь пойдет о веб интерфейсах, т.к. веб очень популярен и браузер уже давно стал универсальным инструментом доступа к информации. В подборке будут указаны ссылки на свободные или бесплатные компоненты.
[[Файл: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 =
* http://htmlbook.ru/
* https://javascript.ru/
* http://www.pcre.ru/
* http://www.typescriptlang.org/
<embedvideo service="youtube" dimensions="800x450">https://www.youtube.com/watch?v=6qLq7xkodA8&list=PLtS8Ubq2bIlUWixdH_1Q2yzZh8QJSBVmT</embedvideo>
= Browser tests =
* https://www.acidtests.org/
* https://html5test.com/
* https://browserbench.org/
* https://chromium.github.io/octane/
* 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 -
Строка 7: Строка 76:
* https://github.com/nodesource/distributions/blob/master/README.md
* https://github.com/nodesource/distributions/blob/master/README.md


= Design Systems =
<pre>
* https://getbootstrap.com/
sudo npm install npm@latest -g
* https://material.io/design/
npm config set registry http://registry.npmjs.org/
* https://semantic-ui.com/
npm cache clear --force
* https://www.muicss.com/
npm config set strict-ssl false
* https://material-ui.com/
npm config set legacy-peer-deps true
* https://material.angular.io/
echo '{}' > ./package-lock.json
* https://truly-ui.com/
npm i
* https://wrapbootstrap.com/
</pre>
* https://bootswatch.com/
* http://www.csszengarden.com/
 
= Icons =
* https://fontawesome.com/
* https://github.com/lothat/weather-icons
* https://ionicons.com/
* http://fontello.com/
* http://fontastic.me/
* https://ionicons.com/
* https://www.flaticon.com/
* https://thenounproject.com/


= jQuery =
= jQuery =
* https://jquery.com/
* https://jquery.com/
* https://jqueryui.com/
* https://jqueryui.com/
Строка 36: Строка 92:


= Angular =
= Angular =
 
<pre>
sudo npm install -g @angular/cli
</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
Строка 43: Строка 102:
* https://bertrandg.github.io/angular-split/#/
* https://bertrandg.github.io/angular-split/#/
* https://github.com/ManifestWebDesign/angular-gridster
* https://github.com/ManifestWebDesign/angular-gridster
* https://robferguson.org/blog/2019/06/22/dashboards-and-dashboard-widgets-part-1/
* https://angularjs.org/ - устарел
* https://angularjs.org/ - устарел
* 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>
<pre>
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
</pre>
</pre>
== Libs ==
* https://ng-select.github.io/ng-select#/data-sources
* https://github.com/ObaidUrRehman/ng-drag-drop#demo


= Vue.js =
= Vue.js =
* https://vuejs.org/
* https://vuejs.org/
* https://bootstrap-vue.js.org/
* https://bootstrap-vue.js.org/
* https://vuematerial.io/


= ReactJS =
= ReactJS =
Строка 57: Строка 137:
* https://reactjs.org/
* https://reactjs.org/
* https://react-bootstrap.github.io/
* https://react-bootstrap.github.io/
* https://material-ui.com/
= Aurelia =
* https://aurelia.io/
* 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 =
* http://lesscss.org/
* https://sass-lang.com/
* https://postcss.org/
= Design Systems =
* 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://material.io/design/
* https://semantic-ui.com/
* https://www.muicss.com/
* https://material-ui.com/
* https://material.angular.io/
* https://truly-ui.com/
* https://wrapbootstrap.com/
* https://bootswatch.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 =
* https://fontawesome.com/
* https://github.com/lothat/weather-icons
* https://ionicons.com/
* http://fontello.com/
* http://fontastic.me/
* https://www.flaticon.com/
* https://thenounproject.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 =
* http://patorjk.com/software/taag/
* https://fonts.google.com/ (https://golb.hplar.ch/2019/06/google-fonts-download.html)
** 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 -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.myfonts.com/
* https://www.artlebedev.ru/type/
* https://www.fonts-online.ru/
* https://www.dafont.com/
* https://www.urbanfonts.com/free-fonts.htm


= WYSIWYG editors =
= WYSIWYG editors =
Строка 62: Строка 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/
* https://habr.com/ru/companies/oleg-bunin/articles/350252/


= Landing page editors =
= Landing page editors =
Строка 120: Строка 299:
* http://reactdatagrid.com
* http://reactdatagrid.com


= ABC notaton =
= Music Notes & ABC notaton =
* http://abcnotation.com/
* http://abcnotation.com/
* https://www.alphatab.net/


= Math & formulas =
= Math & formulas =
Строка 134: Строка 314:
* 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/
Строка 143: Строка 323:
* 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 =
Строка 150: Строка 335:
* 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/


= Sliders =
= Image Viewers & Sliders =
* http://www.highslide.com/
* https://fotorama.io/
* https://fotorama.io/
* https://glidejs.com/
* https://glidejs.com/
Строка 193: Строка 382:
* https://github.com/Mobius1/Selectr
* https://github.com/Mobius1/Selectr


= Visual Effects (parallax, dots, etc) =
= Visual Effects =
 
Parallax, dots, globes, etc..


* https://matthew.wagerfield.com/parallax/
* https://matthew.wagerfield.com/parallax/
* https://vincentgarreau.com/particles.js/
* https://www.jotform.com/blog/particles-animation-codepen-97659/
* https://codepen.io/ImagineProgramming
* https://codepen.io/aecend
* 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 =


= Fonts =
* https://wpdean.com/css-glassmorphism/
* https://fonts.google.com/ (https://golb.hplar.ch/2019/06/google-fonts-download.html)
* https://hype4.academy/tools/glassmorphism-generator
* https://www.1001freefonts.com/
* https://webdesign.tutsplus.com/how-to-create-a-frosted-glass-effect-in-css--cms-32535t
* https://www.myfonts.com/
* https://css.glass/
* https://www.artlebedev.ru/type/
 
* https://www.fonts-online.ru/
= Globe =
* https://www.dafont.com/
* https://github.com/vasturiano/three-globe
* https://www.urbanfonts.com/free-fonts.htm
* 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 =
 
* https://threejs.org/
* https://freshdesignweb.com/html5-css3-3d-examples-demo/
 
= Custom Scrollbars =
 
* https://github.com/Grsmto/simplebar
* https://github.com/mdbootstrap/perfect-scrollbar
* http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
* https://github.com/gromo/jquery.scrollbar
* https://github.com/inuyaksa/jquery.nicescroll
* https://github.com/Diokuz/baron
* https://github.com/malte-wessel/react-custom-scrollbars
 
= Date & Time pickers =
 
* https://raw.githack.com/mymth/vanillajs-datepicker/v1.0.3/demo/
 
= Emoji =
 
* https://www.webfx.com/tools/emoji-cheat-sheet/
* https://unicode.org/emoji/charts/full-emoji-list.html
* https://github.com/iamcal/js-emoji
* https://github.com/joypixels/emojify.js
* https://www.kirupa.com/html5/emoji.htm
* https://www.jqueryscript.net/tags.php?/emoji/
 
= Drawers =
 
* https://jspaint.app/
* https://github.com/nhn/tui.image-editor
* https://www.youidraw.com/apps/painter/
* https://carstenschaefer.github.io/DrawerJs/examples/standalone/
* http://canvimation.github.io/
* http://paperjs.org/examples/division-raster/
 
= ASCII =


= Ссылки =
* https://manytools.org/hacker-tools/ascii-banner/
* https://robferguson.org/blog/2019/06/22/dashboards-and-dashboard-widgets-part-1/
* https://ozh.github.io/ascii-tables/
* https://github.com/ManifestWebDesign/angular-gridster
* https://asciiflow.com/
* http://marklodato.github.io/js-boxdrawing/
* https://patorjk.com/software/taag/

Текущая версия от 15:19, 24 ноября 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=3319