Согласно привычной бокс-модели (CSS) параметр width задавал ширину контента, чтобы вычислит реальную ширину надо было добавить padding+border+margin... Это написано в "CSS Box Model"..., а я еще вспоминаю про то, что недавно и в разных браузерах все было по-разному...
Вынужден поддерживать windows, linux, android, делать сайты с html,css, javascript, php, java. А сайты потом надо администрировать... Drupal, WP, Joomla, Moodle... И редактировать видео, и осваивать анимацию... И front-end приблудился недавно... Compass-scss, GULP, Jekyll, bootstrap, foundation... Куда же денешься... Здесь ЧЕРНОВИКИ !!!
вторник, 29 декабря 2015 г.
понедельник, 28 декабря 2015 г.
CSS3 Пример анимации с 20 мейнфреймами
Не могу сказать, что это лучший вариант, и здесь только код без комментариев... Но в целом ясно, как можно использовать notebook для добавления стилей
четверг, 24 декабря 2015 г.
CSS для формы обратного вызова на фоне анимации
Подбираем код для того, чтобы сместить форму в правый верхний угол, потом меняем фоны в форме, потом размышляем над вариантами background: linear-gradient,
понедельник, 21 декабря 2015 г.
Хаки модуля "Call me back" Joomla
Чтобы сделать из формы обратного вызова баннер оборачиваем ее в три дива. Сначала, естественно, создаем копию модуля /html/mod_itf_call_me_back/default.php, а потом добавляем туда теги. Первоначальный код почти не изменился, хотя вопросы и есть..., но здесь только код с двумя добавленными строчками и одним хаком скрытой ссылки.
четверг, 17 декабря 2015 г.
Находим самоучитель JavaScript и осваиваем Dev Tools и ScratchPad Firefox
Не путать эту консоль с консолью страницы... Ctrl+Shift+k
понедельник, 14 декабря 2015 г.
Sourcerer, или как добавлять разные стили и скрипты для разных страниц в Joomla
Самый правильный вариант - добавить соответствующий PHP-код. А можно запихивать фрагменты в HTML-модуль, а модуль прикрепить к нескольким пунктам меню (материалам). Но последний вармант - это нарушение стандартов W3C. Я попробовал нарушать, ...получилось, но не захотелось. Здесь ссылки на несколько модулей
Custom css, Custom HTML module, Flexi Custom Code, EasyScript. Пока я выбрал и успешно юзаю Sourcerer, он позволяет вставлять все... и везде, здесь php вставки для подгрузки скриптов и стилей в head страницы.
четверг, 10 декабря 2015 г.
CSS3 эксперименты с анимацией баннеров
Сделал две прозрачные картинки ("схему" и "тетку с быком"), вставил их в баннер, заставил двигаться по расписанию. В итоге наложил их друг на друга. Надо экспериментировать дальше. Здесь по сути попробовал только background-position, background-size, transform: skewX(60deg)
среда, 9 декабря 2015 г.
Снова Gimp и Imagick, и Graphic Design Stack Exchange
На этот раз мне понадорбилось делать фон прозрачным для сначала для одной (в Gimp), а потом для всех картинок в папке. Сделал все быстро, но записать не успед, о чем жалею..., а здесь только видео и ссылки... Первая ссылка на Graphic Design Stack Exchange - очень полезный ресурс... и почему эти программы так хорошо документированы?
четверг, 3 декабря 2015 г.
Полезные ссылки на примеры команд ImageMagic и Gimp
Понадобилось сделать аватарки и кнопки и иконки для сайта. И еще понадобятся скоро баннеры, да не простые, а "резиновые" (fluid or adaptive). Надо вспомнить, что у меня есть для работы с изображениями. Начал с Gimp, поставил ImageMagic, вспомнил, что недавно поставил Inkscape и в сентяюре надо было раскурочить какое-то видео, потому у меня есть ffmpeg. Все эти инструменты можно использовать для редактирования изображений. Здесь я конвертирую картинки в png и делаю для всех фон прозрачным. Для нескольких изображений это проще делать в ImageMagick
среда, 2 декабря 2015 г.
Joomla Template Protostar. Как вставить в footer (иди debug) карту сайта
Ясно было, что надо бы что-нибудь вставить в несколько колонок. В процессе поиска плагина прочитал, что "карта сайта в футере" - это хороший тон. Проникся, попробовал плагин "Joomla Footer Sitemap Menu". Не понравилось, как он сделан.
Я же форматировал лет пять назад плавающие блоки... Вспомнил, как это делается... не заглядывая в справочники.
Рецепт таков: к каждому блоку (обертывающему блочному элементу) добавляем класс (здесь .sed). А в custom.css добавляем 6 строчек со свойствами класса.
вторник, 1 декабря 2015 г.
CSS3 animations. Повтряем примеры из документации
Чтобы понять, как это использовать, надо это попробовать. Здесь ва примера и ссылки на все свойства и примеры из документации.
понедельник, 30 ноября 2015 г.
Настраиваем компонент баннер в Joomla. CSS3 стили для html-баннера текст на фоне изображения
Полдня провозился с настройками html-баннера (текста на фоне картинки). В перспективе это должно существенно упростить перенастройку текста на рекламных баннерах. Поскольку баннеры я намерен показывать на посадочных страницах контекстной рекламы, то текст на них должен легко редактироваться. Хороший резон, чтобы наложить html на картинку. Но под разные размеры экранов приходится подстраиваться, используя @media only screen and (min-width:420px)
среда, 25 ноября 2015 г.
Сначала вставляем iframe в Joomlа, а потом готовим js код для вставки YouTube embedded iframe player
В Джумле фреймы запрещены в двух местах админки. Потому сначала разрешаем фреймы в глобальных настройках, а потом в настройках редактора. Подробности в видео.
Однако, я вынужден использовать js API embedded iframe player. Здесь пример кода для вставки белого плеера с белым пребелым контентом.
Однако, при отладке яваскрипт оказалось, что 'YT is undefined, потом в Джумеле он вообще перестал было грузится, но в итоге все работает, но время загруки - почти 4 секунды (на localhost Kali) настораживает.
В конце поста работающий код для Джумлы.
вторник, 24 ноября 2015 г.
Joomla. Хаки стилей. Три столбца, кнопки "ReadMore", резиновые iframe
Это первые мелочи и первые хаки. Надо было поискать сначала в template.css Так что лучше использовать решения из более поздние посты на эти темы
суббота, 21 ноября 2015 г.
Файлы и настройка плагина simplePlayer jQuery
Это моя первая проба использования Ipython Notebook для освоения и настройки плагина javascript. Я здесь сначала загружал файл в ячейку, потом редактировал код и сохранял в тот же файл. А для того, чтобы сохранить первоначальный вариант, просто скопировал всю папку с плагином и работал с копией. И чего ради? Таки для этого есть GitHub... Да, я графоман, и мои заказчики не любят Гитхаб, таки будем пробовать дальше...
четверг, 19 ноября 2015 г.
Список видеоредакторов и программ для анимации
Здесь ссылки на десяток обзоров по темам Open Source Animation Software и Comparison of video editing software wikipedia
вторник, 17 ноября 2015 г.
Как сделать из видеороликов YouTube фон для страниц сайта
Понравилась сама идея. Нашел на jqueryscript.net плагин Tubular. Здесь примеры кода в iframes, экспериментировал с позицией и прозрачностью роликов. Здесь же распчатаны инструкции и файлы плагина.
понедельник, 16 ноября 2015 г.
Определяем css('z-index') и css('position') элемента и между делом узнаем, как вручную подгрузить в Notebook jQuery
Предстоит работа со слоями, решил всопмнить про z-index и научиться определять его для каждого элемента. Наконец то начал усваивать синтаксис вида %%javascript element.append($('#z').css('position'));, но из консоли работатьвсе же проще. Мой питон перегрелся и перестал загружать jQuery на страницу. Пришлось делать это вручную. Так я совершил великое открытие велосипеда HTML(jq) для подгрузки скриптов.
суббота, 14 ноября 2015 г.
Два плагина jQuery для вставки видео Youtube в качестве фона страницы и один simple Player
Хотел найти API для управления встроенными на html-страницу видеороликами, нашел, но в процессе серфинга по складу плагинов раскопал еще два. Спешу сохранить здесь все ссылки.
пятница, 13 ноября 2015 г.
Как я пытался понять, что такое transparent в черном черном плеере Adobe
Поиски привели меня к документам на сайте Adobe Adobe Flash Player Administration Guide for Flash Player 19 На форуме я нашел обсуждение этой темы и разместил здесь пример наложения одного фрейма на другой. Правда пример меня только запутал. С прозрачность плеера я разобрался позже, см. следующие посты.
В этом посте разрушена верстка (это же черновик для воспоминаний), так как оказалось, что position: absolute нарушается при экспорте из ipynb в html.четверг, 12 ноября 2015 г.
Видеомануалы к Photoanim, Blender
Здесь три подборки видео с уроками по Photoanim, Blender, Онлайн сервис 3d Panorama Mapper. Мне в последнее время приходится все больше внимания обращать на программы анимации. В этом месяце нужно будет продолжить это знакомство, и сравнить аниматоры с видеоредакторами.
Неудачная установка TensorFlow на Windows - опять те же грабли.
Почему я упорно не пользую виртуальные машины. Давно ведь освоил VMware, но тупо устанавливаю все подрюд на основой рабочий Windows компьютер. Вот опять "между делом" загрузил ненужный мне сегодня TensorFlow, и неудачно ... Что теперь делать? Ждать...
Here's a little Python program that makes up some data in three dimensions, and then fits a plane to it.
To use TensorFlow you need to understand how TensorFlow:
•Represents computations as graphs.
•Executes graphs in the context of Sessions.
•Represents data as tensors.
•Maintains state with Variables.
•Uses feeds and fetches to get data into and out of arbitrary operations.
среда, 11 ноября 2015 г.
В Joomla можно напихать сотни предустановленных иконок с помощью Icomoon Fonts
Не знал про псевдостили, здесь конспект моих открытий. Оказалось, что можно обращаться к иконкам, как к шрифтам, менять размеры и цвета. В Джумле эти возможности встроены.
воскресенье, 8 ноября 2015 г.
Добавляем в шаблон protostar Joomla 3.4 свои файлы стилей и яваскрипт
There are three methods for embedding JavaScript into your code using the Joomla API; JDocument::addScriptDeclaration, JDocument::addScript and script. These methods should be called either in your component's View class
пятница, 6 ноября 2015 г.
Как обмениваться данными с javascriot из iPython notebook?
После чистки html кода из консоли браузера (см предыдущий пост) захотелось не только автоматизировать эти операции, но и сохранить написанные скрипты. Здесь я собрал с десяток ссылок на отличные статьи и заготовил пример html кода, потом дописал в Out[] ячкейки еще один пример html кода, а из других ячеек при помощи команд jQuery изменил его css стили. Так что стало ясно, как можно работать только в простейших случаях - внедряешь html фрагменты в код Notebook и имитируешь команды браузера, но конкретные примеры не здесь, но последуют далее (надеюсь).
четверг, 5 ноября 2015 г.
Используем jQuery для чистки фрагментов html кода
Понадобилось скопипастить с чужого сайта часть статьи. Если текст большой, то выгоднее тырить фрагменты вместе с html разметкой. Можно ли почистить/изменить разметку перед вставкой на свой сайт? Здесь я проделал это через консоль с помощью команд вроде $("p[style*='bold']").contents().unwrap().wrap('
'); или $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );На сайте jQuery есть не только хороший справочник, но и форум. All of the methods in this section manipulate the DOM in some manner.
A few of them simply change one of the attributes of an element (also listed in the Attributes category), while others set an element's style properties (also listed in the CSS category).
вторник, 3 ноября 2015 г.
Изучаем Joomla. Переопределение шаблона (template override) и макетов (Layout Overrides)
Чтобы понять, работу с шаблонами в движка Joomla нужно было разобратьс с такими понятиями, как Layout Template, Ntmplate overrides, Layout overrides, custom css, template manager После просмотра нескольих статей догадался посомтреть документацию Джумлы. Здесь есть даже страница на русском. Только после сравния перевода с оригиналом начал привыкать к терминологии. Кроме того, здесь же и ссылки на страницы документации, в которых описывается структура папок шаблонов.
понедельник, 12 октября 2015 г.
Подборка видео по работе с Open Broadcaster Software
Здесь я собрал плейлист из десятка видеомануалов по работе с Open Broadcaster Software
Free, open source software for live streaming and recording.
И все здорово. Вот только для конфигурации моего ноутбука Packard Bell нет еще драйвера Nvidia. Окно записи изображенияс камеры не уменьшается... И запускается только 32-битная версия программы.
Так что разместил здесь мой пополняемый плейлист с первым десятком просмотренных видео OBS и вернулся к изучению XSplit Broadcaster.
Обе программы очень похожи, так что мануалы обеих можно нужно использовать.
воскресенье, 11 октября 2015 г.
Как загружать видео на youtube без потери качества? Изучить настройки трансляции !
Вопрос вечный, поскольку на YouTube процесс обработки видео после загрузки постоянно меняется. На днях загрузил видео с битрейтом 15 - получил качество 360...
А другие видео - 480... Часто сразу после обработки - 360, но потом появляются более качественные варианты. Нужны простые правила
Поначалу разместил здесь видео с пошаговым мануалом для OBS и ссылки над скудную документацию YouTube.
А потом сообразил, что про настройки можно прочитать в разделе по настройке видео трансляции YouTube. Скопировал сюда фрагменты из справки.
пятница, 9 октября 2015 г.
В плэйлисте с видео XSplit Broadcaster есть примеры c ffmpeg
Установил XSplit, начал смотреть видеомануал, наткнулся на полезное видео по работе с ffmpeg. Надо будет попробовать примеры и записать в комментарии. Кроме того, в справке Yotube есть упоминание о еще одной программе "Open Broadcaster Software is free and open source software for video recording and live streaming". Ее тоже надо бы попробовать.