Помните то чувство, когда вы закончили университет? Или то чувство, когда вас неожиданно уволили? Это то самое мерзкое ощущение, когда на вас накатывает волна разочарования и в голове возникает вопрос «что дальше?». Это также то самое чувство, которое переживают многие соискатели после успешного завершения кампании по сбору средств.

Продолжаем обзор генераторов статичных сайтов, начатый в прошлой статье.

В последнее время в сфере веб-разработки мы заметили сильное смещение акцентов в пользу статичных сайтов. Такие сайты проще в обслуживании (никаких баз данных, никаких серверных сценариев) и более безопасные в целом, учитывая, что единственная вещь, которая передается на устройства пользователей – это файлы HTML, CSS и Javascript. Чтобы сделать некоторые типы сайтов, вроде блогов и сайтов с документацией, статичными, просто написать код в HTML-файлах довольно сложно. Также непросто поддерживать сайты с массивным контентом, особенно если нужно изменить некоторые незначительные детали (например, дизайн).

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

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

Оптоволокно

Оптоволоконная связь – это способ передачи информации с помощью пульсирующего света через оптическое волокно. Оптоволоконные сети на данный момент используются в таких странах как Япония, Китая, Южная Корея, США и др.

Google развертывает свой оптоволоконный сервис в некоторых частях США. Они обещают скорость в гигабитах, которая теоретически может обеспечить скорость загрузки в 125 мегабайтов в секунду. Для сравнения, вы можете скачать фильм «Храброе сердце» (конечно же, купив его легально) в качестве 1080p и «весом» в 20 Гб меньше чем за три минуты.

Это был довольно интересный проект. Я пытался создать арифметический калькулятор чисто на CSS3 (а не JavaScript). Используя такие элементы, как calc(), attr(), counter() и пр. это казалось не таким уж сложным заданием, но все оказалось не так просто.

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

Стабильно работает только в Firefox 4 и IE 9

Одним из ключевых компонентов любого калькулятора является возможность преобразовывать ввод. Используя только CSS, мы имеем очень ограниченные варианты фиксации ввода. Таким образом, для регистрации всех вводов используются чекбоксы. Для применения изменений к другим элементам можно использовать состояние «:checked» и селектор «~», а так как они довольно прямолинейны, я не буду вдаваться в подробности, а вместо этого акцентирую внимание на логике вычисления значений.

CSS спрайты – это не новинка. С того момента, как их популяризовали на «A List Apart» в 2004, простые спрайты стали основной техникой в наборе инструментов большинства веб-разработчиков. Но, несмотря на то, что преимущества скорости спрайтов вполне понятны, их использование в современной веб-разработке редко обсуждается. Принцип остается тем же: это комбинирование нескольких изображений в один «основной» графический элемент, из которого в каждый момент времени отображаются только определенные части.

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

Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.

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

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

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

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

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

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

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

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

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

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

Исследование чикагского Северо-западного университета, связавшее творчество и неспособность фильтровать ненужную чувственную информацию

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

Недавнее исследование Северо-Западного университета посвящено изучению вопроса, почему проблема неспособности заглушить поток ненужной чувственной информации при работе над творческим проектом могла очень остро стоять для таких гениев, как Пруст, Франц Кафка, Чарльз Дарвин, Антон Чехов и многих других.

Эта статья не о дизайне эффективных каруселей, а об эффективном создании стиля. Другими словами, речь пойдет не о UI-дизайне, а о конструкциях CSS – смене элементов карусели, их позиционировании и размерах.

Зависимость от JavaScript с точки зрения взаимодействия, а не стиля

«Эффективная карусель» — это карусель, которая не зависит от JavaScript с точки зрения:

• отзывчивости
• содержания любого количества элементов
• отображения любого количества элементов

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

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

По слухам, компания Apple работает над новым большим iPad, как сообщает Wall Street Journal, поставщики готовятся начать производство во второй половине этого года. Этот срок уже был перенесен, так как изначально запуск был запланирован на первую половину года, но из-за того, что компания Apple еще даже не призналась в существовании этого устройства, такие изменения сроков никого не удивляют. А удивляют потенциальные технические характеристики нового устройства, над которыми, как сообщает WSJ, работает Apple, и которые могут (или не могут) быть реализованы в окончательном дизайне.

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

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

Дадли Стори, автор «Pro CSS3 Animation», представил подборку своих статей с сайта demosthenes.info о галереях на сайтах и всем, что с ними связано. Решения используют HTML, CSS и PHP в различных комбинациях, текст статей на английском языке. В начале каждой статьи представлена демонстрация эффекта, о котором говорит автор.

А вы знали, что, несмотря на то, что для большинства людей интернет стал необходимостью, он до сих пор остается роскошью для большого количества людей? Согласно последнему отчету от McKinsey & Company около 40% населения Земли живет вне зоны покрытия мобильных сетей.

Компания Opera сильно озабочена тем, чтобы объединить весь мир. А пока, давайте рассмотрим, как мы и остальные участники MWC смогли улучшить мобильные технологии по всему миру.

Почему Single Div?

В мае 2013 года я присутствовала на CSSConf и услышала, как Лиа Веру говорит об укрощении свойства border-radius. Это было поучительно и позволило мне понять о CSS то, чего я раньше не понимала. Это напомнило мне времена, когда я изучала изящные искусства, когда я постоянно стремилась повысить свой профессиональный уровень. Мой уровень владения CSS можно назвать средним, поэтому я бросила себе вызов, чтобы узнать все, что я смогу, исследуя и экспериментируя со свойствами

Но почему именно один DIV?

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

Я решила запустить проект a.singlediv.com, где намеревалась каждые несколько дней размещать нечто новенькое, созданное с помощью CSS. Я поставила перед собой ограничение использовать только один DIV.

Вторая часть статьи об эффективной работе с клиентами для SaaS-ресурсов.

4. Улучшайте наиболее важные характеристики

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

Если вы можете сделать лучшую характеристику вашего SaaS еще лучше, вы сможете удержать клиентов от желания отказаться от ваших услуг.