Category: it

Category was added automatically. Read all entries about "it".

Откуда берутся идеи

Из дизайнеров про идеи и креативность не пишет только ленивый.

В далёком 2008ом, где-то спустя 3-4 месяца, как я начала заниматься веб-дизайном, на меня снизошло, что работа тогда хороша, когда в ней есть уникальная идея. Стала я тогда искать материалы по теме, откуда идеи берутся. Некоторыми способами даже довелось попользоваться.

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

А идеи... что ж, можно и идеи сочинять, но мучительно рожать ежа никто не требует.
Летом мои коллеги с ЮМИ-саммита привезли мне отличную мысль. Уже после того, как поставишь задачу, надо просмотреть хорошие работы других студий и мастеров, где решается что-то похожее, и на их основе соорудить уже что-то своё. Комбинация из двух и более чужих идей в результате даёт новую третью.

*а теперь по секрету о нехорошем*
Если же скомбинировать не получается, можно тупо скопировать чужую идею.
Потому что идея сама по себе ничего не стоит. Но я вам этого не говорила.)

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

Порылась в сервисах гмайла и нашла вот такой:
creator.zoho.com/home

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



Потом по ссылке idea base в фильтре смотрю работы по нужному мне тегу.

Как оформить нумерованный список при помощи CSS

В самом начале моей буйно интересной деятельности в вебе я всегда в нумерованном списке саму нумерацию оформляла жирнее, чем текст после неё. И очень огорчалась каждый раз, когда принимала работу верстальщика. Потому что фрилансовские пиксель-перфекционисты такого не умели. Цифра у списка была набрана в точно таком же стиле, что и текст.

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

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


Вёрстка. (см. пункт 2)

Разметка и стили

<ul id="toc">
<li><a href="">Один</a></li>
<li><a href="">Два</a></li>
<li><a href="">Три</a></li>
<li><a href="">Четыре</a></li>
</ul>

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

Ставим счётчик при помощи свойства counter-reset:

#toc {
counter-reset: list;
margin-left: 0;
}

С помощью этого свойства я создала счётчик, которому присвоила имя list.
Теперь я привязываю его к последовательности пунтков списка:

#toc li {
display: inline;
counter-increment: list;
}

Это свойство сообщает браузеру, что значение счётчика должно увеличиваться на каждом элементе li.
Теперь включаем отображение счётчика перед каждым элементом li:

#toc li:before {
content: counter(list);
}

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


Collapse )

Избавляемся от рутины в вёрстке. Финт ушами на javascript

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

<?php include 'includes/portfolio.php' ?>

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

В инклюде “portfolio” вставляю вот такой код (можно в любом месте; я вставила сразу после открытия оборачивающего дива):


Что сие обозначает
$(document).ready(function() { } ); - скрипт начнёт работать только когда страница загрузится (без картинок)

$('.menu a').each(function() { } ); - для каждого такого элемента (ссылка, вложенная в нечто с классом menu) выполнить следующую функцию

if ($(this).attr('href') == - если значение атрибута href равно

window.location.pathname - эта переменная хранит относительный адрес - всё, что идёт после названия домена. В моём случае, например, это /migma.php для первой работы в портфолио.

var text = $(this).text() - создаёт переменную “text”, в которую вставляется текст ссылки (которую определили в предыдущей строке)

.after - после ссылки вставляем span с классами active и  selecion, с помощью которых я задаю нужный мне стиль (белый фон, скруглённые уголки)

+text+ - добавляем строку с текстом

.detach - удаляем ссылку (в активном состоянии нажать на неё будет нельзя)


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



Под катом код в текстовом формате.



Collapse )

«На каждую хитрую задницу найдётся свой болт с резьбой» ©

В продолжение вчерашней записи.

habrahabr.ru/post/153377
Не успел фриланс закрыть контакты, как тут же вылезла куча сторонних сервисов с базами данных этих контактов. %)

http://free-lance-contacts.ru/?s=poisonglen

Сервис разработали ещё в августе. Видать, чуяли, куда ветер дует. Теперь за копеечку могут контактами торговать. 

CSS Sprites: вся графика одной картинкой

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

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



Алгоритм метода
  1. Раделяем картинки по типам - гиф, пнг8, пнг24, джипег. Группировать можно картинки только одного типа.
  2. «Склеиваем» все картинки в каждой группе в одну.
  3. В CSS на фон ставится одна картинка. Для конкретного элемента нужный кусок картинки назначается точными значениями background-position.
Пример из html-book-а:



a.rollover {
   
background: url(images/mark.png); /* Путь к файлу с исходным  рисунком */
   display: block; /* Рисунок как блочный элемент */
   width: 151px; /* Ширина рисунка в пикселах */
   height: 40px; /* Высота рисунка */
  }
  
a.rollover:hover {
   
background-position: 0 -40px; /* Смещение фона */
  }

Высота селектора a равна половине высоты спрайта. В итоге первоначально отображается зелёная кнопка. При наведении изображение смещается вниз на 40 пикселей - на высоту кнопки. И показывается жёлтая кнопка.


Важные замечания

  • Картинки можно клеить только для фоновых изображений - для background-а, а не img-а.
  • Наш любимый IE6 не умеета работать с полупрозрачными изображениями. Эту проблему можно устранить при помощи фильтра, но тогда не будет работать background-position, то есть спрайты в таком случае нафиг не нужны. Если заказчик всё же требует настройку IE6, придётся про запас нарезать все картинки по старинке.


Итого спрайты

Плюсы
  • Сайт загружается быстрее, потому что используется меньше картинок.
Минусы
  • Вёрстка более трудоёмкая. Надо указывать не только картинку, но и позицию фрагмента.
  • Полупрозрачная картинка не работает в IE6.
  • Сложнее поменять дизайн. Если изменится какая-нибудь картинка, то, скорей всего, придётся менять поклеенный файл и переписывать стили.
Посему спрайты лучше всего подходят для мелких иконок.

Где создать спрайты?

Я использую
CSS sprite generator:




Загружаешь все картинки, жмёшь волшебную кнопку и - вуаля, спрайт готов.

Больше инструментов и подробнее о самих спрайтах - в статье CSS спрайты. 10 генераторов.

Автоматизация вёрстки. Bootstrap from Twitter

Для вёрстки до недавнего времени я использовала HTML Kickstart - набор готовых элементов, из которых можно собрать сайт. К сожалению, большой популярности этот конструктор в народе не получил, поэтому его создатель больше не будет его развивать. А жаль, штука удобная.
Я стала искать инструмент на замену. Свой выбор остановила на твиттерном Bootstrap-е. Твиттер - мировая соц.сеть, и уж её-то создатели развивать будут наверняка.

Структура элементов практически такая же, как и в кикстарте.
На закладке Scaffolding (переводится как «строительные леса», почему-то) - сетка. В кикстарте блокам задавались классы col_1, col_2 и т.д. Здесь точно так же - span1, span2, etc.

Чтобы сделать из фиксированной вёрстки тянущуюся, достаточно поменять у общего оборачивающего дива класс с .row на .row-fluid. Есть ещё специальный раздел для адаптивной вёрстки.

На закладке Base CSS всевозможные фичи для оформления текста - заголовки, цитаты, списки, таблицы и т.д. Таблиц, к слову, несколько вариантов: с бордерами и без, с подцвечиванием нечётных строк и без него. Дальше - куча всяких вариаций для форм и кнопок. Глаза разбегаются, сколько возможностей.

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

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





Не для всех элементов прописан код прямо на странице. Но выудить его очень просто при помощи инспектирования элемента:



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

Итого Twitter Bootstrap:
  • Постоянно обновляемый набор свёрстанных блоков.
  • Много готовых прикольных css-эффектов.
  • Экономия времени на вёрстку. Намного быстрее и проще править готовый код, чем писать руками с нуля.

Словом, сплошь одни плюсы, переходим все на него!

Ужасы пиксель-пёрфекта: CSS на несколько тысяч строк

Пиксель-пёрфект – это когда под фон сайта подкладывается макет, и вся вёрстка подгоняется под него. Верстальщик как пономарь идёт по дизайну сверху вниз и для каждого нового блока задаёт свой стиль. Итог такой вёрстки печален: CSS стремится к бесконечности и в нём полный бардак. Поддерживать такую вёрстку в дальнейшем очень трудно. Если, например, добавить в меню ещё несколько пунктов, то сайт просто развалится.

Хорошая же вёрстка должна быть логична. Выявлются 20-30 селекторов, которым сразу присваиваются стили. И потом весь сайт собирается из них.

Например, заданы такие стили для заголовка и ссылки:

Тогда логично, что конструкции <Н1><а hrеf="">< /а>< / Н1> буден присвоен стиль «вердана, 42рх, красный цвет, при наведении - белый». То есть стиль для элемента задаётся наследованием. 

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

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

Итого, пиксель-пёрфект

Плюсы

  1. Все элементы стоят ровно на тех же местах, что и в макете.

Минусы

  1. Бесконечный CSS.
  2. Полный бардак в стилях.
  3. Невозможность из свёрстанных блоков собрать новую страницу.
  4. Если внести даже небольшие изменения в сайт (добавить раздел в меню, поставить картинку другого размера), всё разваливается.

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

Автоматизация вёрстки – 2

Нанимать на постоянную работу верстальщика экономически оправдано для тех студий, которые выполняют ежемесячно много проектов на потоке. Или же для крупных авторитетов вроде Горбунова и Лебедева.

А как быть маленьким и проворным студиям, которые занимаются индивидуальной проработкой по каждому проекту, которых-то и набирается 2, от силы 3 в месяц?

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

Около года назад нам невероятно повезло при работе над сайтом Стеклорезерва. Мы нашли верстальщика, который за небольшие деньги оперативно воплотил нашу идею с разлетающимися осколками. Но на следующем проекте с ним поработать уже не пришлось: он уже устроился на постоянку в студию (оторвали, надо думать, с руками).

После долгих метаний нашли другого, вроде адекватного верстальщика. Но внезапно настал момент, когда надо было внести какие-то мелкие правки в несколько сайтов, и в итоге вся вёрстка поехала. При попытке выяснить корень зла обнаружилось 2 000 (!!!) строк CSS и полный бардак в html-е. Вот тогда этот верстальщик и потонул, а мы судорожно стали искать решение проблемы.

И мы его нашли

Задавшись целью, наш программист нашёл фреймворк для вёрстки - HTML kickstart

Опробовала я его на моём резюме, на котором я и обучалась вёрстке:

myresume

Для начала прикрепляю кикстартовский css к разметке:

<link rel="stylesheet" type="text/css" href="/kate/css/kickstart.css" media="all" />                  <!-- KICKSTART -->

Мои стили прикреплены аналогично.


Страница состоит из трёх колонок, соотношение которых по ширине 5:3:4. Ставлю глобальную разметку:

<div class=”col_5 column”>…</div> - для левой колонки с информацией

<div class=”col_3 column”>…</div> - для второй с моей фоткой

<div class=”col_4 column”>…</div> - для правой колонки


Дальше идём сверху вниз, смотрим, что за элемент, находим его в кикстарте, копируем. Получается очень чистенько и аккуратно:

table

Реализую всплывающие подсказки с названиями программ:

programs

Ну и все остальные элементы. Благо, особым разнообразием они не блещут – сплошь списки, заголовки да картинки.

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

Итог:

  • всего 2 часа работы;
  • количество строк CSS сокращено по меньшей мере втрое;
  • чистая и понятная разметка.

Adobe Illustrator CS5 + HTML5 pack. Автоматизация вёрстки.

В продолжение поста Photoshop vs Illustrator о возможностях Иллюстратора.

Предыстория вопроса.

Рабочий процесс в нашей компании выстроен таким образом, что нанимать на постоянную работу верстальщика нерентабельно. Услуги хороших верстальщиков на фрилансе стоят дорого, а другие выдают по итогам работы откровенно дерьмовую вёрстку. Одна из типичнейших заморочек: работник верстает, как пономарь, сверху вниз. Единого стиля, например, для заголовков он не видит и задаёт новый стиль на каждый новый элемент. На выходе получается 100 500 строк CSS, и если надо поменять что-то по мелочам, то мы зарываемся на полдня.

Совсем недавно эту проблему мы решили при помощи набора готовых блоков вёрстки на HTML kickstart. Но об этом, наверно, в другой раз.

Теперь об Иллюстраторе.

На конференции Microsoft в Питере (осень 2011) рассказали о новых возможностях программы в плане работы с HTML5. В частности выступающий показывал, как можно сгенерить CSS-код для градиентной заливки на фон. Писать тот же код руками долго и муторно, а с помощью программы можно всё проделать за три щелчка мыши.

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

Собственно, что нужно сделать:


Collapse )

Тут же при запуске программа мне выдала две ошибки:

error1
error2

Тут же в сообществе задала вопрос, получила ссылку на адобовский форум, где у кучи людей та же проблема. Так что, наверно, всё в порядке. Возможно, чуть позже её исправят.

Несмотря на эти ошибки, программа работает. CSS для градиента можно сотворить так:

cssstylesillustrator

Код на выходе:

.st

{

                background:-moz-linear-gradient(0% 50% 0deg,

                rgba(255, 255, 255, 1) 0%,

                rgba(0, 0, 0, 1) 100%);

                background:-webkit-gradient(linear,0% 50%,100% 50%,

                color-stop(0, rgba(255, 255, 255, 1)),

                color-stop(1, rgba(0, 0, 0, 1)));

                border:solid 1px rgb(0, 0, 0);

                width:197px;

                height:109px;

}

Знающие люди подсказывают, что в нём много лишнего. Но удалить несколько строк – совсем не то же самое, чем написать такое же количество кода руками. Так что всё супер)