Блог Андрія Огороднікова Хто з мечем до нас прийде, від меча й загине.

Записи по теме «Дизайн»

Слайдер

Читатели нередко задают вопросы по модным ныне веб-дизайнерским фичам — таким, как выпадающие менюшки, недвижимые при прокрутке элементы и панельки и, что особенно увлекательно, «сменяющиеся картинки». Как мол этого достичь?

Это все из разряда свисто-… (ну вы поняли), хотя иногда подобные решения могут быть эффективными.

Проблема в чем: такие штуковины — элементы дизайна — воспроизводятся конечному пользователю с помощью джава-скриптов. Штука эта сколь функциональная, столь и спорная. Многие придирчивые юзеры джаву (javascript) просто отключают в своих браузерах, как один из способов обеспечения сетевой и локальной безопасности. Джава-скрипты могут нести не только декоративные или эргономические функции, злоумышленники нередко используют джаву для разных пакостей…

Джава требует подгрузки файлов со скриптами и встраивания своего кода и ссылок в голову (<head></head>) веб-страницы. А в случае движкового сайта (если не извращаться) — во все страницы, ибо код идет в общий файл header.php, где содержатся мета-теги и прочие полезные для браузера вещи.

Это не проблема большого масштаба: два скрипта весят 300 килобайт, пяток картинок где-то 500, ну и накиньте пару десятков килобайт к хедеру… Мегабайт. Много? У меня скорость инета 1,3 Мбайта в секунду. Для меня это мелочи. Но. Я постоянно сталкиваюсь с претензиями читателей, у которых мои сайты долго грузятся по одной простой причине — медленный, глючный интернет-доступ.

Тут я в очередной раз разведу руками…

Ну вот, я по-быстрому сварганил слайдер из подручных картинок (виды из окна):
Код:(del)

Решил в 2017 восстановить слайдер, по-другому только разве что слепленный (однако с адаптивностью лень возиться, поэтому на малых разрешениях будет видно меньшее поле, но картинка скрозь него будет проплывать целиком :)). Картинки красивые, чего в черновиках лежать. Старый слайдер не работал во многом из-за того, что wordpress применял свое форматирование... Я тогда с этим и не думал бороться. Убббррал запись... 

Сейчас я это несколько снивелировал. 

А код.. ищите, что вам нравится в гугле... 

Есть более впечатляющие решения.

Результат нормальный. Да, надо бы разобраться. Я поначалу подумал, что это свойства эффекта, «переход через ноль», но так не должно быть… Ну, что, разобраться даже полезно. Когда сам пишешь код страницы руками — все можно контролировать, когда за тебя сколачивает страницу «машина»… Эх.

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

Ну, а главное применение: разнообразные портфолио, в особенности у фотографов. Обычно все крутится на черном фоне, одновременно используются несколько слайдеров больших и малых. Просто дух захватывает. Может и мне забабахать такую красотень?

:)

Блого-конструкторское

Немножко экспериментирую с блоговым внешним видом и полезными добавками.

Вкратце:  1) увеличил горизонтальный размер блога с 900 до 999 пикселей, через 1024.

900px 1024px 999px

2) Добавил многофункциональную социальную кнопку:

del

Что-то через раз этот сервис работает, нужно искать другие решения.

3) Кое-что подчистил и переделал в коде.

4) Написал много захватывающих букав, которые под катом :)

Merry Christmas!

Merry Christmas, my dear friends!

Чтобы создать себе праздничное настроение, порой достаточно даже небольшого штришка. И ощущение теплой радости и предвкушения волшебства мгновенно вернется из далекого детства. И не оставит нас даже во время самой самоотверженной работы.

Да, начались самые приятственные праздники: Рождество, Новый Год, Рождество, Новый Год, замечательные циклы, доступные нам по праву рождения… Хоть это.

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

Призываю вас, друзья мои, если хочется поставить настоящую ель на Новый Год и Рождество, лучше купить ее в горшочке, чтобы весной можно было высадить где-нибудь в лесу или саду. Если это не по карману, купите себе многоразовую искусственную елку, технологии дошли до того, что ее почти не отличишь от настоящей, а чувство возникает гораздо более мирное и спокойное.

А еще елочками можно (и нужно) украсить свой компьютерный рабочий стол. Подходящую красавицу можно выбрать на странице desktopchristmastree.

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

Вот так выглядят почти все елочки с этого сайта.

елочки

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

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

christmas tree

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

tree christmass

Скачать можно здесь. Советую, депрессняк как рукой снимает. Работает и на Windows 7, что не может не радовать.

Да, друзья мои, очередной год пролетел незаметно. Мало этого, незаметно промчалось десятилетие, первое десятилетие Миллениума, сулившего столько новых надежд. Все-таки хочется надеяться и верить в лучшее, не взирая ни на что. Ставим перед собой очередные задачи и — на старт, внимание, марш!

Счастливых праздников! Всех благ!

Всегда Ваш!

Яндекс отжигает :)

Узрел занятную штуку — интерактивную карту (мира) запросов к поисковику Яндекс в прямом эфире:

хуяндекс

Вот ссылка на это чудо (флеш). Или вот.

Поначалу кажется — ерунда, а потом становится забавно, запросики попадаются ого-го, неожиданные и креативные :) Постепенно втягиваешься — уже становится интересно, да и удивительно: из каких отдаленных мест идут запросы на русском…

Короче говоря, прикол не прикол, юмор не юмор, но что-то в этом есть завораживающее

HTML мнемоники (избранное)

Решил продолжить практику создания полезных штуковин в PDF. Не подумайте ничего дурного, изначально все делается для себя, а потом выходит, что можно поделиться наработками и с общественностью. Почему нет?

Сегодня наше внимание будет занято неполным списком символов, для которых в языке разметки гипертекста HTML отводятся определенные коды, которые необходимо строго соблюдать.

На протяжении своего развития, HTML, как конструкционная и визуальная, в итоге, основа  интернета (php и прочие скрипты — это всего лишь способ подачи HTML конечному юзеру), впитывал очень много разработческих вольностей, которые были бы неприемлемы в более строгих языках программирования и разметки. Все это диктовалось бумом «дот комов», когда сайты из текстовых блоков на белом фоне превращались в последствия взрывов на фабриках варенья и печенья. HTML, шагая от версии к версии, подстраивался под необходимые и вымученные потребности новых и новых модных тенденций в сети. Это, зачастую, негативным образом сказывалось на совместимости оформления сайтов с разными браузерами, поскольку каждый из них выборочно или неполностью поддерживал те или иные новейшие теги разметки страниц или трактовал их очень своеобразно. Так происходит и до сих пор, и конца и края этому не видно. Есть надежда на скорое внедрение 5-й версии HTML, но всех проблем она не решит, стандартизация, все равно, до конца невозможна, потому что совместимость со старыми версиями и разметочных принципов, и тегов, и браузеров (корпоративный сектор до сих по сидит на IE6) — дело далеко не второстепенное.

Самые приличные попытки внедрения строгого стандарта гипертекстового «программирования» сейчас можно наблюдать в XHTML. Это такой гибрид HTML и XML, статут которого содержит исчерпывающие указания о том, что можно писать, а что нельзя. Более того, если в случае с обычным HTML, браузер все равно отобразит страничку, руководствуясь уже своим видением, невзирая на корявый и ошибочный код, то в случае с XHTML, если оный написан, подчеркнем, согласно всем рекомендациям W3C, такое невозможно. Неверно сверстанная страница, даже если там всего пара ошибок на сотню тегов, не отобразится в браузере, поскольку она, вначале, будет проверена анализатором XML, а уж потом предстанет перед ясны очи человека серфящего…

На многих сайтах красуется гордая надпись о валидном (т.е. исчерпывающе точном) XHTML коде, своего рода пижонство, показывающее, какой тут героический кодер, имеющий претензии сшибать пьенензы вагонами. Но самое смешное — валидный код совершенно не гарантирует того, что браузеры правильно отобразят замысел вебмастера.

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

html мнемоники

Чтобы писать добротный и грамотный HTML и XHTML код, нужно много чего помнить: если с тегами еще как-то можно управиться, то специальные символы, которыми пользуешься не так часто, все-таки имеют тенденцию иногда стираться из памяти. Не все, не всегда, но бывает. Чтобы не лезть в какие-то отдаленные источники, которые надо найти (на винте или в сети), открыть и отыскать в них нужный код среди сотен прочих разноупотребительных символов, можно завести вот такую «шпаргалку», которая всегда будет под рукой.

Из всего множества закодированных для HTML символов я выбрал 42. Я не часто сталкиваюсь с греческим алфавитом или математическими знаками или особенностями письменности народов мира. Здесь только то, что может пригодиться мне в большинстве случаев. Если найдется случай особый, то не сочту за труд поискать нужный код и в других справочниках.

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

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

Например, длинное тире — Alt+0151.

Правильные кавычки «» Alt+0171  Alt+0187.

Знак градуса ° Alt+0176.

Знак копирайта © Alt+0169 …и многое другое вставить через сочетание клавиш будет гораздо проще, чем другим способом.

Принцип действия очень прост: зажимаем Alt и набираем цифры, после отпускания клавиши Alt новый символ внесен в текст. Вот и все.

Скачать «сборник кодов» можно по ссылке. PDF, 70 килобайт.

Повторю, шпаргалку эту делал для себя, если вам понравится — буду рад. Если нет — уверен, что в сети все-таки найдется что-нибудь для вашего удовольствия.

За сим — раскланиваюсь.

Конверт для CD v.0.17

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

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

конвертик

На первый взгляд, вроде бы, такая простая штуковина должна быть в составе шаблонов для текстовых редакторов из офисных пакетов. Но, на второй взгляд, я таковую там не обнаружил. Ну, присутствуют довольно корявые вкладыши для CD-коробок, еще какая-то мелочевка, а вот простейшего конверта нет. Объяснение, наверное, простое как два байта, конверт подозрительно ассоциируется с пиратским хранением дисков, тогда как солидные, красочные, информативные jewel-боксы выставляются навиду, значится хозяин не боится являть оные пред ясны очи гостей разной степени подозрительности. ;)

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

Может быть я предвзят, однако, ничего, кроме более или менее подлежащих формовке текстов, я в «текстовых процессорах» (и, пожалуй, целиком офисных пакетах) не делаю. Предпочитая специализированные программы, особенно, когда результат нужно выводить на печать.

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

конв

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

Вещица получилась полезная, пусть и без претензий на всякое там, и я решил поделиться ею.

Вообще такой способ хранения дисков «не первой необходимости» весьма и весьма практичен.

коробка с компактами

Места занимается совсем немного, по сравнению с обычными или даже тонкими коробочками. В упаковку из-под 10 CDR входит существенное количество дисков в конвертах. На фото: в коробку войдет еще десяток дисков, стоит чуть-чуть прижать остальные, выпустив воздушные прослойки. Что же касается эстетической составляющей, тут каждый выбирает сам.

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

Лично меня первая версия вполне устраивала, но природная лень вносила в макет свои коррективы: я, после пяти собранных конвертов, перестал обрезать закрылки (или крылышки :))  по контурам, в итоге получались конверты с большим запАхом, в смысле очень крылатые. Оказалось, что это удобно, конверт получается крепче, и меньше обрезков бумаги идет в ведро.

Я подумал, что об этом стоит написать, ничего не меняя в макете, если бы не одно обстоятельство: мой старейший постоянный читатель и вдохновенный критик Alejet (бывший медицинский работник и поклонник велоспринтера Алессандро Петакки) высказал 4 пожелания:

1) Сделать контуры конверта не такими темными, дескать после обрезания тушка смотрится неаккуратно;

2) Сделать скос крылышек не только вверху, но и внизу (к этому я и сам пришел, срезая уголки в нижней части не по контуру опять же);

3) Сделать полоски для записей, чтобы конверты стали более аккуратными;

4) И четвертое — сделать декольте: т.е. присобачить полукруглый вырез, дабы удобнее было не только вкладывать сидюки, но и доставать их.

Пожелания эти совпали и с моими подспудными идеями, но для себя я бы не стал переделывать всю эту схему, а просто вносил бы коррективы непосредственно ножницами.

В результате я сделал еще три дополнительных чертежа, оставив первый нетронутым. Этакая версия Классик 0.1.  Скачать можно по ссылке.

Новые версии:

коко широкий

Версия под названием Wide (Широкая). Крылья и хлястик* упираются в пределы формата А4. Линии для записей добавлены. Декольте тоже. Скачать по клику на рисунок.

[*Написал «хлястик», хотя понятно, что верхнюю, закрывающую часть конверта правильнее было бы назвать «капюшоном», ну, не гульфиком же.  А вообще-то эта деталь называется почему-то клапан. Однако клапан у меня ассоциируется с чем-то другим, а вот хлястик — хлясь и закрыто — в самый раз. (для любителей придираться к словам) ]

литный

Версия лайт: контуры 30% от черного, при печати выглядят светлее, чем на рисунке. Без разлиновки, но с декольте. Скачать по клику — аналогично первому файлу.

класический

И, наконец, вариант классического конверта: с декольте, линиями и скосами крыльев снизу.

Итоговый Wide

Разумеется, вариантов исполнения может быть множество, все учесть нереально, да и незачем, по большому счету. Я повторю, этот конверт не претендовал на идеальное произведение архиважного искусства. Я, всего лишь, попытался упростить сортировку старых, но порой полезных бэкапов, сочтя, что хранить диски в банке (или в тубе, как пишут в некоторых прайсах) неудобно, потому что, чтобы достать один конкретный диск, нужно снять с «кола» все прочие — вплоть до сотни штук. А индивидуальная упаковка всегда упрощает дело…

Приятного пользования.

Печать: теоретически можно использовать любую программу для просмотра PDF, лишь бы при печати масштаб страницы составлял 100%.

На сегодняшний день (апрель 2017) рекомендую пользоваться SumatraPDF — легкая и удобная программа, читающая не только PDF.

50 лет космических исследований

исследования космоса, инфографика

50 лет исследований космоса в картинке. Клик по рисунку приведет к большой иллюстрации. Комментарии излишни. Скажу только, что американцы умеют красиво и емко преподнести значительный и значимый фактический материал.

Вообще, тема исследования космоса всегда волновала меня, как с точки зрения сугубо научных достижений человечества, так и в качестве невероятного вдохновителя для создания вымышленных миров. У меня в перманентной [:)] работе не менее трех научно-фантастических «романов», в которых я рассуждаю о цивилизации, интеллекте, этических кодексах исследователей других планет, о месте человека во вселенной, о роли высшего разума. Надеюсь когда-нибудь завершить, наконец, эти проекты, но покамест приходится заниматься менее масштабным… искусством, если так можно выразиться.)

Советский Союз был зачинателем космической гонки, мы первыми сделали многое, но, в итоге, проиграли, и лебединой песней большой советской космической программы стали грустные и постыдные мгновения: уничтожение орбитальной станции «Мир» и гибель в наземном ангаре забытого челнока «Буран».  Сейчас российская космонавтика — просто подрядчик в ряду других на «МКС». Особым позором, на мой взгляд, является сшибание бабла с космических туристов, чем не занимается даже такая бизнес-ориентированная страна как США. Потому что бизнес есть бизнес, а космос есть космос.