Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.92/429: Рейтинг темы: голосов - 429, средняя оценка - 4.92
Taatshi
Администратор
11713 / 5059 / 257
Регистрация: 05.04.2011
Сообщений: 13,808
Записей в блоге: 2
1

Полезные ресурсы для web - мастера

10.01.2013, 16:04. Просмотров 78040. Ответов 52
Метки нет (Все метки)

В этой теме собираем все, что может понадобиться для работы web мастера. Пишите, все будет выноситься в первый пост по темам. Платные ресурсы - не предлагать!


HTML

www.jsfiddle.net - песочница для веб-разработчиков. HTML, CSS, JavaScipt и результат.
http://csstemplater.com - генератор HTML+CSS шаблонов
http://www.phpform.org/ генератор форм
http://www.w3schools.com/ Справочник с возможностью редактирования кода
Все правильные doctype и запрещенные в них HTML теги
http://imagemap-generator.dariodomi.de/ - map генератор
uncss-online.com - Удаление неиспользуемых стилей + Shorthand

http://css3pie.com/documentation/getting-started/ - для работы некоторых свойств css3 в IE, не поддерживаемых по умолчанию PIE


Программа для генерации кода сложных таблиц. Спасибо за разработку newJS
Вопросы и пожелания по программе - озвучиваем здесь.
Table_Generator_2.0.7z

Линейки для вебмастера
Экранные линейки.zip

http://www.blacksunsoftware.com/colormania.html - color mania - программа для выбора цвета на экране
ColorManiaSetup.zip



Типовые макеты
http://htmlbook.ru/samlayout/tipovye-makety
http://blog.html.it/layoutgala/
http://www.dynamicdrive.com/style/layouts/category/C10/


CSS
http://jigsaw.w3.org/css-validator/#validate_by_upload онлайн валидатор. Не работают стили - вам сюда
http://procssor.com - форматирование CSS кода.
http://css3generator.com - CSS3 генератор
www.spritebox.net - нарезка картинки на CSS спрайты
http://css-tricks.com/examples/ButtonMaker/ сервис для генерации кнопок на css
http://dabuttonfactory.com/ сервис для генерации кнопок на css
http://www.colorzilla.com/gradient-editor/ Сервис для генерации градиентов на css
http://border-image.com/ Сервис для создания рамок для рисунков
http://css-sprit.es/ генератор спрайтов
http://bearcss.com/ генератор css для html
http://www.css3.me/ css3 генератор
http://csscomb.ru/ инструмент для сортировки CSS-свойств в нужном порядке
http://simpreal.org.ua/csssprites онлайн генератор css спрайтов
http://cssmenumaker.com/ онлайн генератор css стилей для меню
http://www.useragentman.com/IETransformsTranslator/ Трансформации для IE
http://css3button.net/ - генератор кнопок
http://css3gen.com/box-shadow/ генератор теней
http://www.cssmatic.com/box-shadow генератор теней
http://flexbox.help/ как будет выглядеть выравнивание и расположение блоков при различных вариантах использования свойства flex

http://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока.
Название: css-arrow-please.png
Просмотров: 13818

Размер: 8.0 Кб

Компрессия кода

CSS

http://www.homepage-performance.de/en/css-compressor-tool.html
http://isnoop.net/tools/css.php
http://www.pagecolumn.com/tool/css_compressor.htm
http://tools.pingates.com/
http://www.lotterypost.com/css-compress.aspx
http://mabblog.com/cssoptimizer/compress.html
http://www.cssoptimiser.com/
http://www.codebeautifier.com/
http://www.askapache.com/online-tools/compress-css/
http://iceyboard.no-ip.org/projects/css_compressor
http://compressor.ebiene.de/
http://tools.arantius.com/css-compressor
http://www.sevenforty.com/tools/csscompressor
http://www.phpinsider.com/compress_css.php
http://www.devtrench.com/css-formatter/css-optimiser.php
http://cssdrive.com
http://www.cleancss.com
http://www.excssive.com/
http://www.csscompressor.com/
http://www.cssportal.com/css-optimize/
http://www.artiss.co.uk/css-compression
http://www.creativyst.com/Prod/3/
http://www.generateit.net/css-optimize/


XHTML, HTML и CSS компрессор
http://www.peterbe.com/plog/blogitem-040406-1/compressor

JavaScript / CSS сжатие
http://www.refresh-sf.com/yui/


Расширение для Photoshop, умеющее конвертировать стили слоя в css3 код: http://css3ps.com

Понимает линейные градиенты, тени, обводки, радиусы фигур, размеры фигур, семейство шрифта и др. Пока воспринимает стили только в режиме Normal, но разработчики обещают над эти поработать.

Онлайн генераторы CSS3 — в обойме инструментов web-разработчика


Типографика, шрифты

fontello.com - Генератор иконочных шрифтов

http://www.fontsquirrel.com/fonts/list/language/cyrillic подборка кириллических шрифтов
www.blindtextgenerator.com - генератор текстов-рыб
http://cufon.shoqolate.com/generate/ Генератор Cufon шрифтов
http://www.typograf.ru/ Web типограф
http://fontstruct.com - создание шрифтов онлайн

http://www.fontsquirrel.com/fontface/generator Font-face Kit Generator - генерация наборов
http://www.font2web.com - конвертация шрифтов под web
http://www.freefontconverter.com/ - шрифт под web
http://everythingfonts.com/font-face - шрифт под web

Google Web Fonts - описание:
Google создал специальный онлайн сервис, где вы можете выбрать красивый шрифт для сайта, который вам больше всего понравится (количество доступных онлайн шрифтов постоянно увеличивается и среди них уже присутствуют кириллические).

На этом же сервисе Google вы можете получить все инструкции по подключению любого приглянувшегося вам красивого онлайн шрифта к сайту (все очень просто до банальности), а так же вы сможете провести полную настройку внешнего вида вашего будущего онлайн шрифта и получить полных набор CSS свойств, которые останется только добавить в файл стилей вашего сайта.
Сссылка:
Google Web Fonts
Пользование:
Getting Started
Красивые шрифты для сайта онлайн — как добавить в Html и CSS web шрифты через Google Font API
Google Web Fonts - нестандартные шрифты
Prosto в Google Web Fonts

Подборка ссылок на статьи о типографике:

Основы типографики
Типографика для веб
Типографика на Вебе
Типографика WEB
Типографика и веб: правила хорошего тона

3 примера сайтов с прекрасной типографикой:
www.yesnurse.co.uk
www.hausofdesign.co.uk
demo.fotosynthes.ru/designpile/


Дизайн

http://framebox.org - прототипирование веб-интерфейсов
http://lea.verou.me/css3patterns/ background паттерны на CSS3
http://subtlepatterns.com - обновляемая коллекция bg паттернов
www.tartanmaker.com - генератор тартан bg паттернов
www.stripemania.com - генератор паттернов из линий.
www.stripegenerator.com - ещё один генератор паттернов из линий
http://bgmaker.ventdaval.com - онлайн редактор для создания собственный фоновых паттернов
www.pixelknete.de/dotter/ - генератор точечных фонов
www.patterncooler.com - генератор/редактор фоновых паттернов. (весьма интересная штуковина)
http://bgpatterns.com - снова bg паттерны.
http://0to255.com подбор цвета.
http://colorschemedesigner.com - подбор цветовой палитры.
http://pictaculous.com - ещё один генератор цветовой палитры из изображения
http://kuler.adobe.com - подбор цветовой палитры
https://coolors.co - подбор цветовой палитры
http://pixlr.com/editor/ - Растровый онлайн редактор
http://favicon.ru - редактор fav-иконки для сайта
http://colorscheme.ru/ Сервис для подборки цветовых схем
http://favigen.com/ Сервис для генерации фавиконок для сайта
http://colllor.com/ подбор цвета тени
http://kraken.io/ онлайн оптимизация изображений
http://3d-pack.com/ - генератор 3D изображений для коробки
http://www.roundpic.com/ скругление углов изображения
http://weavesilk.com - создание красивых обоев на основе одного эффекта
http://lorempixel.com - генератор картинок-рыб (по аналогии с текстом-рыбой)
http://thenounproject.com Бесплатные иконки
http://www.iconsearch.ru/ - Поиск иконок по ключевым словам
http://www.iconfinder.com/ - Поиск иконок по ключевым словам
http://labs.tineye.com/multicolr/ - Поиск фотографий по цветовой гамме
http://www.punypng.com/ - Оптимизация изображений
http://www.colorsontheweb.com/colorwizard.asp Подбор гармоничных цветов
http://patterns.ava7.com/ - паттерны
https://cloudconvert.com/eps-to-svg - конвертация фотошоп файлов eps в svg
SVGO минификация SVG , полезен после для чистки svg после редакторов вроде Illustrator или Inkscape

http://image2base64.wemakesites.net/ сервис перевода картинок в base64 вариант


JavaScript

http://microjs.com - набор минимизированных javascript скриптов. Очень много


Генераторы прелоадеров

http://www.ajaxload.info/
http://preloaders.net/
http://cssload.net/
http://www.chimply.com/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://mentalized.net/activity-indicators/
http://www.sanbaldo.com/wordpress/1/ajax_gif/

Проверка на валидность и совместимость

Вёрстка для мобильных устройств, как сайт будет выглядеть на разных разрешениях экрана
http://www.responsinator.com/

https://chrome.google.com/webstore/d...okffboaccidbal - Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера

Can I use... - в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии.

http://www.quirksmode.org/ - информация о совместимости браузеров с некоторыми вещами CSS и JS. Тестовые страницы по каждому пункту.
В частности:http://loads.in - насколько быстро грузится ваш сайт

Проверяйте свои творения, прежде чем это сделает за вас посетитель вашего сайта .

W3C Markup Validation Service
W3C CSS Validation Service
XML Validation



Разное

http://getcover.ru - генератор "рамок" браузера или телефона. примечателен кнопкой "Забацать"
http://css-tricks.com/downloads/ множество симапатичностей
http://popinbuilder.icoder.com/ Сервис для генерации popup баннеров
http://snippets.su/ сниппеты
http://htaccess.madewithlove.be - htaccess тестер
www.asciiflow.com - создание ASCII таблиц
http://www.maschek.hu/imagemap/imgmap - генератор карт со сложными полигонами
http://word2cleanhtml.com/ - очистка текстов от стилей word перед вставкой в материалы
http://www.comslider.com/ - генератор каруселей
https://www.browserstack.com/responsive - Online mobile tester
http://mobiletest.me/ - Online mobile tester
unicode-table.com - Таблица символов Юникода


Коды от Стью Николса
http://www.cssplay.co.uk/
http://www.stunicholls.com
Внимательно читайте по авторским правам - для использования на коммерческих ресурсах для многих кодов donate обязателен!

http://html5boilerplate.com/ - HTML/CSS/JS шаблон

Обзор онлайн-сервисов для веб-разработки и дизайна

50 ресурсов для веб-разработчиков за 2012 год


Интересные сайты

http://www.dejurka.ru - сайт, посвященный дизайну
http://dribbble.com - в поисках вдохновения. "Твиттер" для дизайнеров
http://designers.mx - вдохновение для дизайнера
http://cvparade.com - вдохновение типографика

Вдохновляжки
http://noteandpoint.com
http://bookcoverarchive.com
http://creattica.com/retouch/latest-designs
http://revision.ru русский
http://www.awwwards.com
http://www.typographyserved.com ещё одна вдохновлялка, на этот раз типографическая


Небольшой CSS респонсивный фрэймворк. (мини версия твиттер бутстрапа и похожих фв).
Kube
44
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.01.2013, 16:04
Ответы с готовыми решениями:

Ресурсы для практики новичкам
Доброго всем времени суток, форумчане. Постараюсь объяснить смысл заголовка...

HTML язык сервера - нужны ресурсы для изучения
я создаю собственное приложение и мне нужно это изучить какие ссылки, ссайты,...

Посоветуйте ресурсы для самостоятельного освоения HTML/CSS
Какие посоветуете курсы для освоения WEB-разработки? Что скажете о Разобрался...

Создание пошагового мастера
Добрый день! Как можно реализовать пошаговый мастер (Wizard) для заполнения...

Мастера, подскажите новичку пожалуйста
Приветствую форумчане. Буквально месяц назад начал изучать html и css абсолютно...

52
Амурский
25 / 25 / 10
Регистрация: 11.11.2014
Сообщений: 252
05.08.2015, 21:40 41
Здравствуйте, ААфигенный сайт с иконками. Все форматы. Бесплатный http://www.flaticon.com
0
tolimadokara
745 / 411 / 91
Регистрация: 24.10.2012
Сообщений: 3,023
15.09.2015, 11:14 42
Цитата Сообщение от Taatshi
В этой теме собираем все...не предлагать!
О цветовой схеме сайта. Здесь ссылки в основном на сервис роботы (если не ошибаюсь) по подбору цветовой схемы сайта. Готовой коллекции сочетающихся цветов не было. Меня вот что впечатлило:

Оптимальные сочетания цветов
В помощь дизайнеру: оптимальные сочетания цветов

Если верно понял, то эти группы-квадраты в которых по шесть разно цветных полос это и есть гармонирующие цвета. Компьютерный алгоритм, программа, имхо не способна на создание не большой базы данных гармонирующих цветов. Здесь только ручная работа человека. Кстати, здесь огромная работа - дизайнер составил 200 блоков с гармонирующими цветами. В каждом блоке представлены по шесть сочетаемых цветов. Может быть это фейк, хз. Но я верю, что это правильная подборка сочетаемых цветов - сразу видно что эти цвета сочетаются. Очень классные сочетание цветов.

Если кто не понял как этим пользоваться. Выбираем любой квадрат с цветами. К примеру вот этот:

Название: 0_a8745_8198d5ac_S.jpg
Просмотров: 372

Размер: 8.3 Кб

Здесь шесть цветов (слева на право)
1.грязно-синий
2.бледно-синий
3.насыщенно-синий
4.ярко-коричневый
5.бледно-серый
6.белый

Вот, используя только эти ^ шесть цветов и составляем цветовую схему вашего сайта. К примеру цвет ссылок на сайте это будет №4 цвет. Фон сайта это №5 цвет. Цвет текста №2 цвет. И так далее.

Кстати, эту коллекцию оптимального сочетания цветов можно использовать не только для создания цветовой схемы сайта, а - везде-везде-везде. Даже для плетения наручных разноцветных браслетов, оформления цветовой схемы вашей кухни.

Может быть другие веб мастера-художники дополнят этот список своими примерами сочетающихся цветов.

[52,56МБ] - ссылку не проверял - обязательно проверяйте архив Вашим антивирусным программным обеспечением
0
Creativeman
26 / 26 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:23 43
Минификация SVG SVGO, полезен после для чистки svg после редакторов вроде Illustrator или Inkscape
1
Htext
95 / 60 / 16
Регистрация: 08.01.2015
Сообщений: 773
Записей в блоге: 1
14.03.2016, 13:18 44
Подбор размера шрифта, междустрочного интервала и ширины контента на основе золотого сечения:
http://www.pearsonified.com/typography/
0
koza4ok
627 / 436 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
19.06.2016, 14:34 45
http://flexbox.help/
2
Александр1970
0 / 0 / 0
Регистрация: 17.11.2015
Сообщений: 1
29.08.2016, 22:29 46
Генератор каруселей. http://www.comslider.com/
0
koza4ok
627 / 436 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
07.10.2016, 13:05 47
online mobile tester

https://www.browserstack.com/responsive

http://mobiletest.me/
1
mrtoxas
Модератор
Эксперт HTML/CSS
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,116
Записей в блоге: 3
04.11.2016, 18:20 48
unicode-table.com - Таблица символов Юникода
uncss-online.com - Удаление неиспользуемых стилей + Shorthand
fontello.com - Генератор иконочных шрифтов
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ - Бесплатные виртуальные машины с Windows для тестирования сайтов на различных версиях IE (v.8-Edge).
rawgit.com - Получение прямой ссылки на файлы с GitHub.
colorme.io - Visualize The CSS Color Function.
html-tree - Генератор HTML-дерева.
document.online-convert.com - Конвертер документов Office в HTML.
3
lex28
0 / 0 / 0
Регистрация: 01.02.2017
Сообщений: 1
01.02.2017, 20:32 49
Спасибо за такое огромное количество полезной инфы
0
Freeze_Breeze
213 / 225 / 87
Регистрация: 12.01.2016
Сообщений: 1,353
20.04.2018, 00:18 50
Cервис с иконками на чистом css http://cssicon.space/#/
0
galawar
99 / 90 / 66
Регистрация: 09.04.2018
Сообщений: 254
02.09.2018, 17:32 51
CSS Grid Layout
https://learncssgrid.com/
http://www.griddy.io/
0
Makylerali
-78 / 1 / 1
Регистрация: 13.09.2018
Сообщений: 25
14.09.2018, 12:20 52
Может здесь есть, может не заметил.
NEONHTML, программа для создания сайтов без знаний html. Скажу честно, что абсолютно без знаний сайт не построить, но она генерирует код, который не надо набирать вручную и экономит время. Например, одним нажатием клавиш Ctrl+B вставляет тег <br> или таблицу стилей. За 5 минут генерирует 1000 и больше строк кода, тогда как вручную это пришлось бы писать пол часа.
http://www.softportal.com/get-7473-neonhtml.html
ссылка на softportal, сайт разработчика закрыли.
0
Вадим Мошев
^
378 / 43 / 16
Регистрация: 23.07.2014
Сообщений: 203
14.09.2018, 19:14 53
Генератор CSS-спрайтов - https://spritegen.website-performance.org/
0
14.09.2018, 19:14
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.09.2018, 19:14

полезные ресурсы
Доброго времени суток. Недавно начал изучать с++ и хочу поинтересоваться у...

Полезные ресурсы
Наткнулся на очень хороший набор ссылок на хабре Я думаю он полезен будет всем...

Примеры и полезные ресурсы регулярных выражений
Полезные ресурсы русский http://regexpres.narod.ru/calculator.html не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
53
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru