• Презентация средствами HTML5

      image
      Обратил внимание, что в настоящее время программисты Google начали использовать новую форму представления своих презентаций.

      Типичный пример, еще пример — мы видим фреймы, эффекты, изображения, общий стиль.

      Несложный поиск привел к удобному шаблону, который при своей простоте позволяет создавать неплохие презентации с легко внедряемыми элементами
      Читать дальше →
    • App Inventor — создание Android-приложений для каждого: Урок 1

      • Перевод
      Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.

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


      Читать дальше →
    • Восстановление битого файла Coreldraw

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

        Мы рассмотрим самую неприятную ситуацию.
        Итак: вы работаете в Coreldraw, автосохранение и резервные копии включены, идет 2 или 5 час работы, и тут внезапно корел падает. В нашей ситуации корел, агонизируя, перетер все темпы и резервные копии. У вас только ваш файл, при открытии которого вы видите пустой лист.
        Читать дальше →
      • Заработайте на приложениях под Windows 8. Узнайте больше на buildforwindows.ru

          Здравствуйте!
          Сегодня мы хотим рассказать о запуске сайта buildforwindows.ru – ресурсе, посвященном Магазину Windows, который появился в Windows 8, а также разработке современных приложений для новой ОС.

          image

          На портале buildforwindows.ru вы найдете:
          • Информацию о возможностях Магазина Windows для разработчиков
          • Полезную информацию о Магазине Windows, если уже занимаетесь разработкой приложений для:
          • Информацию о мероприятиях, конкурсах, специальных программах для продвижения лучших приложений под Windows 8
          • Примеры популярных приложений под Windows 8
          Читать дальше →
        • Подборка CSS3-генераторов для упрощения фронтэнд-разработки

          • Перевод
          CSS3 предоставляет много новых возможностей в мире фронтэнд-разработки. Это действительно великолепная вещь, но иногда трудно вспомнить некоторые параметры, особенно, если вы — веб-дизайнер, а не программист. Вот 10 удивительных CSS3-генераторов, которые помогут вам сэкономить время и силы (картинки кликабельны).
          Читать дальше →
        • Fluid UI: прототипирование мобильных интерфейсов

            Fluid UI: очень удобное HTML5-приложение для создания прототипов мобильных интерфейсов в браузере (Chrome или Safari). Буквально за пару минут можно сделать приличный набросок.



            Поддерживает жесты, действия на прикосновения, драг-н-дроп, переходы между страницами, дублирование шаблона на несколько страниц, библиотеки iPhone и Android, загрузку пользовательских изображений и скриншотов. Ссылку на созданный дизайн можно быстро отправить коллеге или протестировать на мобильном устройстве. Можно экспортировать в PDF, HTML или графический формат.
          • Руководство по оформлению HTML/CSS кода от Google

            • Перевод

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


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

            Введение


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

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

            Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
            Читать дальше →
          • 62 полезных инструмента для адаптивного дизайна (Responsive web design)

            • Перевод
            UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

            Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

            Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

            Техники Responsive web design


            1. CSS Transitions and Media Queries
            CSS Transitions и Media Queries

            Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?



            Читать дальше →
          • CSS кнопки с помощью псевдо-элементов

            • Перевод
            • Tutorial


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

            В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.

            Читать дальше →
          • Selectik — стильные селекты

            Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

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

            Естественно, после всего этого я решил изобрести свой велосипед.

            Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.
            Читать дальше →
          • SITH — техника CSS3 для плавной смены изображения

            Доброго времени суток, Хабр!

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

            Не встретив на просторах Интернета чего-либо подобного, я взял на себя ответственность назвать этот метод SITH (Soft Image Transition on :Hover) — плавный переход изображения при наведении.

            SITH - CSS3 Soft Image Transition on :Hover

            Под хабракатом Вы найдёте полное описание техники, весь код, несколько скриншотов и ссылку на демонстрационную версию.
            Читать дальше →
          • Реалистичные тени при помощи CSS3 без использования изображений

              Привет, Хабр!

              Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

              image

              Читать дальше →
            • Несколько полезных сервисов

                Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

                Сервисы опросов
                userreport.com (добавил Romanych)
                simpoll.ru
                webanketa.com (добавил mihass)

                Кнопки постинга в социальные сети
                Кнопка от Яндекса
                addthis.com (добавил UksusoFF)
                share42.com
                Читать дальше →
              • На парусах HTML5. Как новые технологии меняют современный веб

                  Статья по следам моего доклада на концеренции User Experience`11.

                  Что такое HTML5?



                  Сегодня про HTML5 их числа тех, кто так или иначе связан с веб-разработкой, не слышал только ленивый. Вы не сильно прогадаете, предположив, что на каждой модной конференции, где есть что-то про веб, почти наверняка, звучит и что-то про HTML5. Практически каждая крупная компания, связанная с вебом, будь то Google, Apple, Microsoft, Amazon, Adobe, Oracle, Facebook, Яндекс, Mail.ru… говорит что-нибудь про HTML5, расписывается в любви на века и приверженности продвижению и развитию HTML5. Yeah! (Opera и Mozilla, безусловно, тоже в этом списке.)

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

                  Огромные перспективы, новая волна развития веба, новое поколение веб-приложений! Круто.
                  Читать дальше →
                • Как сделать один сайт для всех устройств (Responsive Web Design)

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

                    «Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление

                    Почему это глупо


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



                    Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

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

                    Как сделать один сайт для всех устройств

                    Читать дальше →
                  • Семантика для CSS селекторов и комбинаторов

                    • Перевод
                    Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

                    Обучение CSS начинается с классов и ID, а также с использования . и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.
                    Читать дальше →
                  • Поговорим о margin, он же маргин( часть 1-я )

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

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

                    В этой части статьи я напишу о вертикальном маргине. О горизонтальном поговорим в следующей части.
                    Читать дальше →
                  • Много сайтов на одной странице

                      Здравствуй Хабр!


                      A good day! Добрый день! Мы выступаем от стартапа brief.ly из Лондона. От наших украинских друзей мы узнали о могучем коммюнити Хабрахабра, и решили представить на усмотрение вам наш революционный продукт.

                      Хотелось бы услышать как он поведет себя в ваших руках, каково ваше мнение, что понравилось, что нет? Что бы вы сделали иначе, а чем можно гордиться?

                      Интермеццо


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

                      Предыстория


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

                      Vitaly Portnikov

                      Читать дальше →
                    • Идеальный NAS своими руками, бесплатно из старого компьютера


                        Добрый день, Хабралюди!
                        Совсем недавно передо мной встала задача создания надежного и неприхотливого домашнего сервера для хранения данных и скачивания торрентов. Естественно первым местом куда я пошел за готовым решением, был Хабр. Но здесь я обнаружил в основном аппаратные реализации, как например здесь. Не имея финансовой возможности к приобретению подобного девайса я задумался о программной реализации на базе моего старого десктопа, которым в основном не пользуюсь и который только занимает место зазря. Немного походив по сети наткнулся на просто великолепное решение моей проблемы. Надеюсь, оно поможет тебе, %username%!

                        Не затягивая далее, скажу кратко, это: FreeNAS.
                        Заинтересовало? Прошу под хабракат!
                      • Новый Fidel.ru

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

                          image
                          Читать дальше →