По традиции, канал GTV перевел и продублировал презентацию на русский язык.
Приятного просмотра любителям Apple. А нелюбителям, просьба, сильно не минусовать ;)

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

Этой весной, Питер Тиль (Peter Thiel), один из основателей PayPal и первый инвестор FaceBook, провел курс в Стенфорде — «Стартап». Перед началом Тиль заявил: «Если я сделаю свою работу правильно, это будет последний предмет, который вам придется изучать».

Один из студентов лекции записывал и выложил транскипт. В данном хабратопике я делаю перевод первого занятия. Если пост покажется стоящим — продолжу переводить и выкладывать.

Конспект лекций — Питер Тиль (курс: CS183) Стартап — Стэнфорд, весна 2012 г.

Занятие 1: Вызов будущего
Занятие 2: Снова как в 1999?
Занятие 3: Системы ценностей
Занятие 4: Преимущество последнего хода
Занятие 5: Механика мафии
Занятие 6: Закон Тиля
Занятие 7: Следуйте за деньгами
Занятие 8: Презентация идеи (питч)
Занятие 9: Все готово, а придут ли они?
Занятие 10: После Web 2.0
Занятие 11: Секреты
Занятие 12: Война и мир
Занятие 13: Вы — не лотерейный билет
Занятие 14: Экология как мировоззрение
Занятие 15: Назад в будущее
Занятие 16: Разбираясь в себе
Занятие 17: Глубокие мысли
Занятие 18: Основатель — жертва или бог
Занятие 19: Стагнация или сингулярность?

Представляю вашему вниманию меню с плавной инверсией цвета при перетекании курсора.

Под катом сам плагин и немного о концепции.

Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Очень часто модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Что же такое «правильно»?

Модальное окно по определению блокирует работу пользователя с родительским окном до тех пор, пока пользователь его не закроет. То есть:

1. Пользователю нельзя позволять прокручивать страницу под ним.
2. При этом, если содержимого в модальном окне очень много, нужно позволить прокручивать содержимое.

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

Чтобы не мучать вас заранее деталями реализации, покажу сначала демо плагина jQuery: http://rmcreative.ru/playground/modals_plugin/demo.html.

Ну а теперь немного про реализацию.

Приветствую тебя, хабрачитатель!

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

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

Прелюдия

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

Игра называется «найди десять отличий». Наше воображение мы назовем «Сферический конь в вакууме», а суровую действительность обозначим вопросом «Почему оно не работает?». А оно, как вы уже, наверное, догадались, не работает в 90% случаев. А это значит ровно то, что 90% времени, потраченного нами на образование и самообразование, потрачено впустую.

Привет, наверное многие читали мой пост Десяток ресурсов, которые помогают быть дизайнером. Как я понял эта тема интересная (147 плюсов как никак). А раз так, я решил не останавливаться на достигнутом и вот наконец-то закончил работу над своеобразным продолжением первой части. Надеюсь получилось не хуже. Итак, кому интересно, что получилось, прошу под кат.

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



Скачать исходники | Демо

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

Создание статистики и управление рассылки писем
в Google Docs (с разных аккаунтов) на основе FormEmailer

Мы, Большой Брат Ltd., решили создать статистику результатов рассылки посредством скрипта — шаблона FormEmailer. Расскажем, как это делалось.

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

Вместо вступления

Всем доброго времени суток!

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

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

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

Поехали!

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

Нашей компании уже 6 лет. Она была основана на принципах agile и росла на них. Мы использовали Extreme Programming с самого первого дня, добавили немного Scrum позже и в конце концов переключились на Kanban. Хочется поделиться бесценным опытом и рассказать об изменениях нашего процесса разработки за последние 4 года.

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

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

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

В своем обобщении я замахиваюсь ни много ни мало на определение технологии WEB 3.0! После успеха принципов WEB 2.0 было бы странно если бы шильдик 3.0 не растащили на свои определениям разнообразные визионеры. Однако, в своих попытках они нарисовали типичный «более лучший 2.0». Попытка увеличения номера версии с помощью таких эпитетов как «красивый», «профессиональный» является не более чем маркетинговой шелухой!
_{Пример такой чепухи — текущая нумерация версий Firefox. Использую я его редко, только для просмотра верстки новых версий проектов. При каждый запуске оказывается что сменилась версия и поменялись местами какие то кнопочки в меню.}

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

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

Уже захотелось поспорить? Тогда велком под кат!

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


До 50% покупателей не завершают процесс покупки. С чем это связано, и как сделать процент завершенных платежей равным 100%- вопросы, на которые мы постараемся ответить в нашим публикациях.
Поскольку немаловажным фактором в создании привлекательного интернет-магазина является его дизайн, продавцам необходимо иметь возможность интегрировать предоставляемую систему приема онлайн-платежей с учетом дизайна всего магазина. Поэтому для продавцов важно наличие возможности вносить изменения в дизайн платежной страницы самостоятельно и в любое время. Для этого платежная система должна предусматривать возможность изменения цветовой схемы (цвет страницы, цвет текста и ссылок) либо вручную, либо с использованием CSS, возможность добавлять баннеры, логотипы, а также видео-файлы и Java Script (например, для поддержки онлайн-консультанта).

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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