JSFiddle перевод

[Vlad]

Хочу в справочник CSS добавить примеры с JSFiddle. Нужно придумать заголовок, который бы сообщал, что это такое. Либо перевод, либо без перевода, либо просто что-то соответствующее. Вот варианты. Что предлагаете?

 

Пример на JSFiddle

Живой пример

JSFiddle

[raptor-dm]

живой пример

[afdw]

"Пример на JSFiddle" и статья о том, что это такое.

[Vlad]

"Пример на JSFiddle" и статья о том, что это такое.

 

Статьи точно не будет. Должно быть понятно из контекста.

[klierik]

Посмотреть пример на jsfiddle

[psywalker]

Живой пример

[nfsworld]

Перейти по ссылке для просмотра живого примера на JSFIDDLE. 

[klierik]

Так какой же он "живой"? Это просто код ведь. В данном случае это не более чем "пример".

Термин "живой" в данном случае совершено лишний. Пользователю нужен _пимер_ кода в действии и всё.

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

[sigma77]

А может лучше не ссылкой, а айфреймом - http://doc.jsfiddle.net/use/embedding.html ? Тогда без лишней необходимости не нужно будет переходить на другую страницу.

На codepen есть, кстати, аналогичный функционал - http://blog.codepen.io/documentation/features/embedded-pens/

[Vlad]

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

 

Надо придумать заголовок, который будет отделять один пример от другого. 

[nerv]

1. не надо заголовок

2. не надо JSFiddle, т.к. он глючит

[Vlad]

И это JSFiddle глючит? Ты ещё Codepen не видел как глючит!

Ещё раз говорю, заголовок нужен, чтобы отделить один блок от другого и чтобы между блоками не проводили ассоциацию.

[psywalker]

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

 

Надо придумать заголовок, который будет отделять один пример от другого. 

Поэтому я и предложил тупо "Живой пример". Тем самым убиваем сразу нескольких зайцев: убираем название JSFiddle, а значит что примеры могут быть на разных подобных сайтах, и даём понять юзеру, что здесь можно пощупать и поиграться с живым наглядным примером.

[nerv]

И это JSFiddle глючит? Ты ещё Codepen не видел как глючит!

поэтому я пользуюсь learn.javascript.ru/play/ =)

Ещё раз говорю, заголовок нужен, чтобы отделить один блок от другого и чтобы между блоками не проводили ассоциацию.

ну, а мое мнение в том, что не нужен.

Без заголовка https://yadi.sk/i/fk_dAtByeqiPy / http://learn.javascript.ru/number#способы-записи

С заголовком https://yadi.sk/i/80lzrQs3eqid9 / http://mgcrea.github.io/angular-strap/#alerts

Еще примеры

- https://yadi.sk/i/KBOJ64sReqjNh / https://docs.angularjs.org/guide/services#using-a-service

- https://yadi.sk/i/JN-SJiaYeqinQ / http://www.w3schools.com/js/

- https://yadi.sk/i/lVkstptBeqiuR / http://www.learn-js.org/en/Arrays

- https://yadi.sk/i/67iaSZTNeqjEF / http://css-tricks.com/snippets/javascript/function-with-random-timer/

[afdw]

https://yadi.sk/

https://yadi.sk/

https://yadi.sk/

Зачем давать не прямые ссылки? К тому же есть "изображение" для того, чтобы читателю не переходить по ссылке.

[Vlad]

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

 

Вот здесь результат. Что скажете? 

 

http://webref.ru/layout/html5-css3/transition

[raptor-dm]

Нормально)

[psywalker]

 

Вот здесь результат. Что скажете? 

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

[Vlad]

Ага, чтобы кнопка была живая и убегала при наведении, жутко смеясь.

[psywalker]

Ага, чтобы кнопка была живая и убегала при наведении, жутко смеясь.

Тоже вариант

[afdw]

Ужасно, что JSFiddle загружается секунд 10. Лучше было бы iframe'ом.

[psywalker]

Ужасно, что JSFiddle загружается секунд 10.

Возможно, это меньшее из зол.

 

Лучше было бы iframe'ом.

 

Тогда тормозить будет сам сайт, что тоже не есть гуд.

[afdw]

 

Ужасно, что JSFiddle загружается секунд 10.

Возможно, это меньшее из зол.

 

Лучше было бы iframe'ом.

 

Тогда тормозить будет сам сайт, что тоже не есть гуд.

 

JSFiddle в iframe делает минимальную обёртку, а сам пример в несколько строк. Так что всё будет нормально.

[Vlad]

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

 

http://webref.ru/css/animation

[ows.nightwolf]

Мне нравится, очень даже неплохой справочник может получиться)