Вернуться   Таки Одесский Форум > Hi-Tech форумы > Программирование

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 06.05.2009, 14:00 Вверх   #41
Coder_ak
Эксперт
по интернет-рекламе

 
Аватар для Coder_ak
 
Одесса
Сообщения: 215
Репутация: 71
Пол: Мужской
По умолчанию

Шо, до сих пор мучаешь?! %)
Coder_ak вне форума   Ответить с цитированием
Старый 19.05.2009, 10:09 Вверх   #42
jay_dee
Близкий(ая) родственник(ца)
 
Аватар для jay_dee
 
Одесса
Сообщения: 125
Репутация: 58
Пол: Мужской
По умолчанию

ну не то чтобы, но всегда рад получить новые знания ) так что актуально )
jay_dee вне форума   Ответить с цитированием
Старый 20.03.2014, 20:17 Вверх   #43
Аятолла
Наимудрейший
Джентельмен Форума 2014
 
Аватар для Аятолла
 
Киев(Могадишо)
Сообщения: 691
Репутация: 2673
Пол: Мужской
По умолчанию

Мир Вам!
Хорошая веточка, подпишусь...
Жаль, что сюда давненько не заглядывают...думается мне, было бы неплохо обсуждать front-end в целом(HTML, CSS, JavaScript, PHP)...
Аятолла вне форума   Ответить с цитированием
Старый 20.01.2015, 16:10 Вверх   #44
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

подскажите, кто ваяет мобильные версии, какие типовые решения - фреймворки используете ?
погрузиться сразу в jquery mobile или что-то еще ?
st@s вне форума   Ответить с цитированием
Старый 07.03.2015, 12:42 Вверх   #45
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

В общем рекомендую адаптивный zurb foundation + SASS
Круть!
А jqeury mobile - сугубо для мобильной верстки и можно использовать совместно с foundation
st@s вне форума   Ответить с цитированием
Старый 15.03.2015, 06:12 Вверх   #46
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Шикарный калькулятор CSS-анимации
http://matthewlein.com/ceaser/

Расчет cubic-bezier для transition-timing-function
Можно выбрать из кучи популярных и нарисовать собственную кривую )

В большинстве случаев позволяет обойтись без скриптового твинмакса
http://greensock.com/ease-visualizer
st@s вне форума   Ответить с цитированием
Старый 15.03.2015, 08:40 Вверх   #47
Аятолла
Наимудрейший
Джентельмен Форума 2014
 
Аватар для Аятолла
 
Киев(Могадишо)
Сообщения: 691
Репутация: 2673
Пол: Мужской
По умолчанию

Мир Вам!
Цитата:
Шикарный калькулятор CSS-анимации...
Просветите, ради Аллаха, неумытого Аятоллу, всезнающий st@s...а для чего сии штукенции могут понадобиться?
Ща попробую самостоятельно разобраться...да оченно сумлеваюсь в своих способностях...
Сам сейчас вот раскуриваю Bootstrap...и вижу, что иногда лучше ручками кодить, нежели фреймворки странные использовать...
Аятолла вне форума   Ответить с цитированием
Старый 15.03.2015, 08:50 Вверх   #48
Black_Shef

Водяной

 
Одесса, Центр
Сообщения: 16,238
Репутация: 8314
Пол: Мужской
По умолчанию

CSS анимация - элемент WEB программирования - баннеры, изображения...

http://ruseller.com/lessons.php?id=1689&rub=2
Black_Shef вне форума   Ответить с цитированием
Старый 15.03.2015, 20:16 Вверх   #49
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Цитата:
Сообщение от Аятолла Посмотреть сообщение
Мир Вам!

Просветите, ради Аллаха, неумытого Аятоллу, всезнающий st@s...а для чего сии штукенции могут понадобиться?
Ща попробую самостоятельно разобраться...да оченно сумлеваюсь в своих способностях...
Сам сейчас вот раскуриваю Bootstrap...и вижу, что иногда лучше ручками кодить, нежели фреймворки странные использовать...
1

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

типичные свойства для анимации - ширина, высота, прозрачность, топ, лефт, трансформ и т.п.

в этом случае
1. присваимваем элементу класс со стилем по умолчанию, в котором прописываем его CSS свойства которые нужно анимировать, а также модель анимации transition, http://htmlbook.ru/css/transition
среди которых функция изменения свойств.
http://htmlbook.ru/css/transition-timing-function
У нее весьма ограниченный вариант заготовок - ease-in, ease-out, ease-in-out, linear
Но можно задать свою функцию - cubic-bezier
Для нее и нужен калькулятор.

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

Также для анимации CSS хорошо подходит transform
http://htmlbook.ru/css/transform

-----

2.
Для более же сложной анимации как во Flash, когда есть лента (timeline), т.е анимируется одновременно множество элементов, они связаны друг с другом в определенной последовательности, нужно использовать GSAP: библиотеки TweenMax, TimelineMax или их облегченные варианты TweenLite, TimelineMax.
http://greensock.com/

Очень крутое средство - можно действительно делать все, что угодно без флеша, который доживает последние дни)
http://mintdesigncompany.com/work


-------
3

По поводу фронтенд фреймворков (CSS+джаваскрипт) - тут два варианта
- а) использовать готовый
- б) придумать свой

Когда почти все мониторы были 1024 x 768 и не было мобильников-планшетов. То фреймворк был не нужен - можно тупо прописать пиксели во всех свойствах и табличка стилей очень короткая )

Сейчас же, чтобы сайт корректно отображался на любом устройстве пиксели не следует указывать вообще (только %, em, rem), в зависимости от разрешения одни и те же элементы меняют размер и положение на странице, исчезают и появляются.
Таблица стилей вырастает до грандиозных размеров, нужны заготовки-библиотеки стилей и работать по старинке с CSS напрямую уже не получается - мозг встает раком.

Поэтому категорически нужен SASS
http://sass-lang.com/documentation/

А еще значительно лучше компилятор-фреймворк SASS Compass
http://compass-style.org
Там мега-набор миксинов под CSS3, и многое другое на все случаи жизни
http://compass-style.org/reference/compass/

Но SASS сам по себе решает только часть проблемы - это средство структуризации и генерации CSS. Т.е. примерно как с помощь PHP генерите HTML страницы, так SASS генерит CSS с помощь переменных, функций, циклов и т.п. Только компиляция/генерация CSS выполняется сразу, на этапе создания сайта.

-----

4
Нужна еще модель разметки сайта, с типовыми стилями, элементами, решениями на тот или иной случай.

И тут есть 2 варианта Bootstrap, на котором работает твиттер и Foundation. Причем бутстрап, если не ошибаюсь это ответвление ранней версии Foundation. Он не сильно впечатлил - но это дело вкуса.

Foundation написан на SASS и испольует Compass
Поэтому вся прелесть в том, что родные его стили переопределять не нужно - просто редактируешь SASS-файл с настройками, который есть список переменных каждого модуля, примерно как настраиваешь Apache или php.ini )))
https://github.com/zurb/foundation/b..._settings.scss
После компиляции получаешь собственный Foundation, который нужен

Дальше просто присваиваешь стандартные стили htlm-элементам. И изобретать велосипеды нет необходимости )

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

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

----

5
Еще одна вещь которую категорически рекомендую, - это организация джаваскрипта. Такой же маст-хэв как jquery

Backbone + Underscore + RequireJS (андерскор - часть бэкбона)
http://backbonejs.ru/
http://underscorejs.ru/
http://requirejs.org/

Открывает новые горизонты, javasript становится модульным как php.
Очень внятные курсы по бэкбону, где все по полочкам:
http://rutracker.org/forum/viewtopic.php?t=4176003
http://rutracker.org/forum/viewtopic.php?t=4663482
Практический пример построения слайдера
http://rutracker.org/forum/viewtopic.php?t=4391811

Остальные различные JS фреймворки и библиотеки интегрируются в модули бэкбона и подгружаются с помощью RequireJS синхронно или асинхронно.

--
6

Лучший инструмент, в котором можно со всем этим делом работать
https://netbeans.org/

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

--

7
Все это вместе превращает написание клиентской части в приятное развлечение )

Последний раз редактировалось st@s; 15.03.2015 в 20:19..
st@s вне форума   Ответить с цитированием
Старый 15.03.2015, 20:31 Вверх   #50
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Калькулятор пересчета пикселей в ремы/емы

http://pxtoem.com/

В фаундейшене для этого же есть SASS функция rem-calc()
st@s вне форума   Ответить с цитированием
Старый 15.03.2015, 21:09 Вверх   #51
Аятолла
Наимудрейший
Джентельмен Форума 2014
 
Аватар для Аятолла
 
Киев(Могадишо)
Сообщения: 691
Репутация: 2673
Пол: Мужской
По умолчанию

Благодарю Вас, богоравный st@s, за столь объемное руководство к действию(я, с Вашего позволения, сей пост сохраню себе для более детального осмысления)...
И все-таки...назойливый Аятолла хотел бы ещё прояснить кое-какие нюансы...
Цитата:
Для более же сложной анимации как во Flash...
Взрослые дяденьки мне втолковывали, что flash - зло, что же касаемо сложной анимации, то суть я уловил(правда, не совсем понятно, где это применять..."нетрадиционный" заказчик?), реализовать же "в лоб" пока не получилось, ну да какие мои годы...разберусь.
Цитата:
...пиксели не следует указывать вообще...
"Резиновая" верстка и "липкий футер"? Стараюсь именно так и поступать...
Цитата:
Он не сильно впечатлил - но это дело вкуса.
Bootstraps же пока ковыряю ленивенько...так, для общего развития(index.php - как пример странички)
Скрытый текст:

Цитата:
Еще одна вещь которую категорически рекомендую, - это организация джаваскрипта.
(чувствуя себя ущербным и бестолковым, ушел подметать тротуар)

JS - только на начальном этапе ознакомления...правда, я ещё параллельно 3D-моделированием заинтересовалсО...
Скрытый текст:

Ага, знаю..."Не по Хуану сомбреро"(с), слишком много всего нахватал...
Ладно...
Аятолла вне форума   Ответить с цитированием
Старый 15.03.2015, 22:24 Вверх   #52
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Цитата:
Сообщение от Аятолла Посмотреть сообщение
Взрослые дяденьки мне втолковывали, что flash - зло, что же касаемо сложной анимации, то суть я уловил(правда, не совсем понятно, где это применять..."нетрадиционный" заказчик?), реализовать же "в лоб" пока не получилось, ну да какие мои годы...разберусь.
flash - зло однозначно )
что касается Твинмакса, то самый рутинный вариант применения - вывод элементов при открытии страницы.

1. При загрузке страницы перед </body> выполняем скрипт.
Код HTML:
<script>
// Прячем страницу, цвет фона при этом можно задать стилем в <html>
// Или изначально присваиваем боди какой-нибудь класс прозрачности 
// <body class='transparent'>

$('body').css({opacity: 0});  

// Прячем или задаем исходные свойства элементов , которые нужно анимировать.

$('p, h1, .my-element-1, .my-element-2').css({opacity: 0}); 

// Запускаем твинмакс анимацию, где к примеру 
// - сначала боди плавно делаем непрозрачным
// - параллельно анимируем вывод менюшек, блоков текста, заголовков

myAnimation();
</script>
Пример: TweenMax усиленный скроллорамой
http://johnpolacek.github.io/superscrollorama/

Необязательно картинки на весь экран, это может быть самые обычные элементы страницы

Пример обычного сайта:
http://redol.ru/about/dnp.html
st@s вне форума   Ответить с цитированием
Старый 16.03.2015, 02:44 Вверх   #53
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Цитата:
Сообщение от Аятолла Посмотреть сообщение
Ага, знаю..."Не по Хуану сомбреро"(с), слишком много всего нахватал...
Ладно...
Так не все сразу )

сначала базовое - css и html верстка,
потом основы php (программирование сервера) и js (программирование клиента-браузера)

В целом все пляшет от php+html+css+js

1. php на сервере генерит html страницы и отправляет браузеру все вместе - html страницы, файлы CSS и JS.
2. браузер выводит html, применяя к нему CSS и выполняет JS-скрипты.
3. JS скрипт может менять html и CSS в браузере как угодно.

Все остальное - производные от этого, позволяющие делать сложное быстрее:

1. SASS - что-то вроде языка программирования для CSS.
Т.е. генерит CSS примерно, как PHP на сервере генерит html.
Если знаешь CSS и имеешь минимальный опыт в PHP и JS, на освоение SASS нужно от силы час.
На самом деле синтаксис SASS это тот же CSS, в котором помимо прочего можно использовать переменные и функции.

2. jqeury - это библиотека функций JS и написанная на JS, используется практически везде. Упрощает и ускоряет работу с JS.

3. backbone - и requirejs тоже библиотеки написанные на JS, с использованием jqeury.
Используя их можно организовать модульный код, как в PHP, что делает JS-программы намного осмысленней, особенно в последствии, когда приходится что-то доделывать и переделывать.

альтернатива от гугл, делающая нечто похожее - AngularJS.

4. Фреймворки bootstrap и foundation используют уже все перечисленное.
Это
- библиотеки стилей, написанных на SASS или LESS (альтернатива SASS)
- библиотеки JS кода, с использованием jqeury и других библиотек.

Причем с фреймворками можно работать в режиме новичка, когда вставляешь куски кода или классы в элементы - и все работает как надо. Остается только раскрасить )


Теоретический мануал по JS
http://professorweb.ru/my/javascript...ript_index.php
Мануал по CSS-HTML - полный справочник тэгов и селекторов.
http://htmlbook.ru/
st@s вне форума   Ответить с цитированием
Старый 16.03.2015, 03:10 Вверх   #54
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

3D занятнейшая вешь, но ИМХО сложнее чем с веб-дизайном, тут года 3 минимум нужно разбираться, сутками смотреть обучалки. И комп нужен серьезный
Волшебство начинается, когда начинаешь работать с анимацией, мографом, динамикой, делать персонажей )

Библия Cinema4d от вертекс пушера
vol 1 - 3, мастер-класс 1,2
http://rutracker.org/forum/viewtopic.php?t=3686778
vol 4
http://rutracker.org/forum/viewtopic.php?t=4037956
vol 5
http://rutracker.org/forum/viewtopic.php?t=4037900
также еще где-то есть vol 7 - по XPresso и vol 6 по скульптингу

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

зы.
Фишки от грейскейлгориллы
http://greyscalegorilla.com/blog/tutorials/

Последний раз редактировалось st@s; 16.03.2015 в 03:20..
st@s вне форума   Ответить с цитированием
Старый 16.03.2015, 05:54 Вверх   #55
Аятолла
Наимудрейший
Джентельмен Форума 2014
 
Аватар для Аятолла
 
Киев(Могадишо)
Сообщения: 691
Репутация: 2673
Пол: Мужской
По умолчанию

Цитата:
...сутками смотреть обучалки
О. А жена тогда зачем нужна???
У мине благоверная - гуру в сием деле, а уж что касаемо фотошопа - так и вааще...Вы ж, многомудрый, в World of Tanks играете? А она танчики сии моделит/мапит/текстурит/рендерит...а до этого рисовала The Witcher...
Да у мине и так в знакомцах много "акадЭмиков" из Wargaming'а, есть кому растолковать нюансы...
Кстати, "персонажка" ещё не самое сложное...а вот живую природу создавать в 3D - это, конечно, уровень...
Аятолла вне форума   Ответить с цитированием
Старый 16.03.2015, 08:14 Вверх   #56
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Цитата:
Сообщение от Аятолла Посмотреть сообщение
О. А жена тогда зачем нужна???
У мине благоверная - гуру в сием деле, а уж что касаемо фотошопа - так и вааще...Вы ж, многомудрый, в World of Tanks играете? А она танчики сии моделит/мапит/текстурит/рендерит...а до этого рисовала The Witcher...
Да у мине и так в знакомцах много "акадЭмиков" из Wargaming'а, есть кому растолковать нюансы...
Кстати, "персонажка" ещё не самое сложное...а вот живую природу создавать в 3D - это, конечно, уровень...
Doom 2 - форева )) Про танчики только слышал

С природой все не так сложно - нужно освоить физрендер Thea, Maxwell или Indigo и генератор растений SpeedTree
И до кучи можно Vue
И компов под такой рендер нужно несколько )

Твое жена - золото!
Риггинг персонажей показался мне довольно сложным - посадить на модель на кости и привязать динамику.

st@s вне форума   Ответить с цитированием
Старый 16.03.2015, 09:43 Вверх   #57
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Zen-кодинг
В нетбинсе тоже есть

st@s вне форума   Ответить с цитированием
Старый 16.03.2015, 18:15 Вверх   #58
Аятолла
Наимудрейший
Джентельмен Форума 2014
 
Аватар для Аятолла
 
Киев(Могадишо)
Сообщения: 691
Репутация: 2673
Пол: Мужской
По умолчанию

Мир Вам!
Цитата:
С природой все не так сложно - нужно освоить физрендер...
При всем моем безграничном уважении, богоравный, осмелюсь предположить, что Вы не художник, верно?
Никакие механические средства не могут равноценно заменить то, что делается ручками...это не мое мнение, если откровенно...
Ныне появилась технология, суть которой в том, что моделирование осуществляется поверх видео. Снимаются же в этом видео профессиональные паркурщики, каскадеры и иной неблагополучный народ.
Т.о., этот метод можно считать самым реалистическим(при оценке созданных моделей), но:
- это касается только персонажки
- надобно наличие значительных средств и аппаратуры с хитроумными датчиками
Что же касаемо живой природы...ну...Ваш покорный слуга ведь так же - не художник...но уж если Вам интересны логически обоснованные доводы моих слов(о сложности моделирования живой природы), то постараюсь разузнать и озвучить тезисно в ближайшее время...
Аятолла вне форума   Ответить с цитированием
Старый 16.03.2015, 21:21 Вверх   #59
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Все относительно!
Качество живой природы проблема ИМХО скорее аппаратная,
для фотореалистичного статичного кадра один долбанный кустик - несколько сот тысяч полигонов) В более крупных и сложных растениях счет идет на миллионы. Рендерить сцену с таким садом имеет смысл только в физрендере, обычные биасд и рил-тайм рендеры, в том числе игровые, рассчитаны на возможности видоекарт и таки модели не способны. Точнее могут, но один кадр будет рендериться сутками, если пямяти хватит ). Все отлично, пока вы в помещении с примитивными низкополигональными объектами.



А лесу уже не так фотореалистично, ибо растения тоже низкополигональные и реалистичный рендер это не тянет




Все физрендеры, (кроме Индиго разве что), используют только процессоры, которых нужно много. Но когда есть кластер на ксеонах или оптеронах, с помощью моделек спидтри гипотетически живую природу можно получить и в рил-тайме )



зы. Вот такого рода рил-тайм в динамике пока в теории

https://www.thearender.com/site/inde...Rain_is_coming


зызы. Прям действительно как фото

https://www.thearender.com/site/imag...0-1000-100.jpg

Последний раз редактировалось st@s; 16.03.2015 в 21:40..
st@s вне форума   Ответить с цитированием
Старый 16.03.2015, 21:59 Вверх   #60
st@s
Таки да одессит(ка)
 
Москва-Мариуполь
Сообщения: 6,828
Репутация: 3072
Пол: Мужской
По умолчанию

Цитата:
Сообщение от Аятолла Посмотреть сообщение
.
Ныне появилась технология, суть которой в том, что моделирование осуществляется поверх видео. Снимаются же в этом видео профессиональные паркурщики, каскадеры и иной неблагополучный народ.
Т.о., этот метод можно считать самым реалистическим(при оценке созданных моделей), но:
- это касается только персонажки
- надобно наличие значительных средств и аппаратуры с хитроумными датчиками
Наверно об этом об этом речь ? В 16 синьке добавили )

st@s вне форума   Ответить с цитированием
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Не флудить!] Вопросы и жалобы по модерированию gross Вопросы и жалобы 404 10.09.2018 18:22
УЗИ, Доплер и пр. вопросы... УмНиЧкА Беременность 24 28.09.2013 21:16
Вопросы по управлению автомобилем BORIS.M Авто-мото-форум 33 08.06.2009 14:21


Часовой пояс GMT +3, время: 09:57.