Продвинутые уроки по HTML и CSS

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

Читать рекомендуется тем, кто осилил первую часть.

Хватит мечтать, начинайте кодить!

Реклама

Программистом быть классно. Во-первых, это интересно, во-вторых, прибыльно, в-третьих, научиться кодить может каждый. Коду всё равно, какое у вас образование, его не волнует ваш возраст. От вас требуется только желание изучать новое и работать, работать, работать. Готовы? Тогда добро пожаловать на новый курс GeekBrains для начинающих программистов.

Руководства для скачивания

Добавил специальный раздел на WebReference.ru, где вы можете скачать книги и руководства в форматах CHM и PDF. Раздел регулярно пополняется.

Уроки по HTML и CSS

Ура! Книга полностью переведена, оформлена и выложена для чтения. Шэй Хоу проделал великолепную работу, написал прекрасную книгу для новичков, где по шагам описал все компоненты HTML и методы их стилизации через CSS. И это ещё не всё! Потому что у него есть продвинутое продолжение, перевод которой уже начался.

Читать всем

uCoz – универсальный сервис для создания сайтов любого типа

Реклама

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

Конструктор сайтов uCoz – решение, которое в равной степени будет интересно и профессионалам, и новичкам сайтового ремесла. Он совмещает в себе мощь функционала CMS и простоту/удобство SaaS-платформ. Это промежуточное решение, вобравшее в себя преимущества разных типов сайтбилдеров. Здесь вам и набор шаблонов, и готовых модулей, и куча настроек, и готовый хостинг с массой сопутствующих возможностей, и возможность покодить вволю при желании/умении. Каждый найдёт в uCoz то, что ему важно. Новички – возможность получать результат в полуавтоматическом режиме в комфортных условиях. Профи – серьёзные инструменты для кастомизации и широкий простор для реализации продвинутых навыков.

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

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

Особенности uCoz

Сервис делает привлекательным совокупность факторов:

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

  • Модульность системы. Каждый такой функциональный блок включает массу настроек, позволяя гибко его кастомизировать. Активировать модули можно выборочно: берите только то, что вам нужны, не перегружая лишним административную панель;

  • Богатый набор встроенных шаблонов различного уровня исполнения. Все они бесплатные. Среди них есть и адаптивные. Для тех, кто желает получить яркий и уникальный дизайн, существует фирменный магазин премиум-шаблонов. 10-15$ – и ваш сайт будет одет по последней моде;

  • Мощь, сравнимая с CMS, но без проблем совместимости, необходимости ручного обновления компонентов, дыр в безопасности и прочих «радостей».

uCoz уникален в своём роде. Он является лидером среди SaaS-сервисов для создания сайтов. Детальное сравнение можно увидеть на том же http://uguide.ru На сайте вполне аргументированно обосновывают высокую оценку сервиса.

Возможности uCoz

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

Система также имеет встроенный файловый менеджер, редактор смайлов, информеров, лент RSS, баннеров и многое другое. Отдельного внимания заслуживают местные инструменты для продвижения сайтов – они очень масштабные, информативные. Вы сможете управлять рекламными кампаниями, распределяя бюджет, прямо из административной панели. Такой богатый набор настроек редко встретишь даже в CMS.

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

Домен можно приобрести прямо из админки по нормальной цене. На бесплатном аккаунте доступно даже управление редиректами, позволяющее склеивать зеркала и переносить сайты.

Платные тарифы дают расширенные возможности техподдержки, настройки SEO, доступ к работе с PHP-скриптами, а также добавляют массу приятных плюшек. К примеру, за оплату «Оптимального» тарифа бесплатно дадут в нагрузку домен, премиум-шаблон и баллы в AdSense. К слову, в первые 48 часов после регистрации сайта в системе любой из тарифов можно оплатить со скидкой в 50%. Хотя вы можете пользоваться бесплатным аккаунтом неограниченно долгий срок.

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

Выводы

uCoz – сайтбилдер, созданный для людей. В Сети можно отыскать множество мега-успешных сайтов, созданных на нём. Недаром ведь некоторые студии используют его в качестве основного инструмента для работы над клиентскими проектами. Функционал обвешенной десятками плагинов/компонентов CMS при сохранении удобства и всех преимуществ SaaS-платформы. Очень привлекательное, универсальное сочетание.

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

Организация данных с помощью таблиц

Последний компонент HTML и предпоследний урок из книги Шэя Хоу «Уроки по HTML и CSS». Сайт Styles Conference, который мы делали почти десять уроков, полностью завершён и в книге осталось поставить только последнюю точку.

Ну и чтоб два раза не вставать, обращаю ваше внимание, что теперь между разделами книг на webref.ru можно переходить кнопками Ctrl+стрелки влево и вправо.

uKit – продвинутый инструмент для создания бизнес-сайтов

Реклама

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

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

Однозначно ответить на этот вопрос сложно. Например, по мнению экспертов ресурса http://site-builders.ru, uKit хорошо сбалансирован и способен предложить пользователю целый комплекс ярко выраженных преимуществ на фоне конкурентных решений. Движок имеет чётко выраженную специализацию, удобный и красивый интерфейс, умеренную стоимость. Функциональность также находится на достойном уровне: об универсальности речь не идёт, но, если вам нужно оперативно создать визитку или лэндинг с минимальными усилиями, uKit – идеально подходящий инструмент. Задачи, которые на него можно возложить по задумке разработчиков, выполняются с удивительной лёгкостью и отменным уровнем качества.

Итак, подытожим предназначение сервиса: человек, далёкий от кода и дизайна, примерно за 2-3 вечера может создать в uKit современную визитку или одностраничник. Большинство людей даже не смогут отличить полученный результат от профессиональной работы. Неплохо, правда?

Особенности uKit

Данный сервис носит коммерческий характер. Он платный и предназначен для использования представителями малого и среднего бизнеса. То есть теми людьми, которые не могут или не хотят платить баснословные деньги студиям по созданию сайтов, но, тем не менее, нуждаются в онлайновой раскрутке своего бизнеса. С uKit они получают возможность своими руками без существенных затрат времени/сил создать и опубликовать собственный сайт на готовом хостинге, прикрепив к нему любой домен. Большинство проблем, с которыми обычно сталкиваются опытные разработчики (вёрстка дизайна, администрирование хостинга, установка/настройка или написание модулей и пр.), обходят пользователей Юкит стороной. Ничего из этого делать не придётся.

За 48$/год вы получите весь доступный функционал. Отдельно устанавливать ничего не нужно. Всё необходимое уже лежит внутри коробки с uKit.

Возможности uKit

Движок базируется на визуальном редакторе. Одном из самых удобных, простых и функциональных в своём роде.

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

Административная управления состоит всего из 4 разделов:

  • Панель управления – содержит инструменты статистики (подключение Google Webmaster Tools и Яндекс.Вебмастер), рекомендации для продвижения в удобной форме, возможность выбора фавикона, подключения своего домена, управления платежами и прочее;

  • Страницы – здесь можно создавать страницы для сайта в неограниченном количестве, настраивать SEO-параметры для каждой из них, а также определять вложенность меню;

  • Конструктор – хранилище разнообразных виджетов, которые после перетаскивания на страницу принимают вид блоков с определённой функциональностью. Их можно настраивать. Примеры виджетов: карточка товара, форма, видео, слайдер, Ecwid Shop (набор инструментов для развёртывания магазина), карта, социальная панель, онлайн-консультант, живой чат, обратный звонок, контакты и многое друое;

  • Дизайн – смена фона и цветовой схемы сайта.

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

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

Система предоставляет 15-дневный бесплатный период на изучение её возможностей. Для продолжения использования и публикации сайта необходимо оплатить один-единственный тариф – «Премиум».

Если у вас критический недостаток времени/желания для самостоятельной работы над сайтом, вы можете заказать готовый проект у разработчиков за 50$.

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

Выводы

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

Демонстрация возможностей uKit:

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

Новогоднее предложение от IT-портала GeekBrains

Реклама

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

Построение форм

Очередная глава из книги Шэя Хоу, посвящённой урокам по HTML и CSS для начинающих. На этот раз речь идёт о создании форм и их стилизации. Опять, на примере готового сайта, по шагам разбирается, как сделать форму и вставить в неё типовые элементы.

Mobirise — программа для создания адаптивных сайтов

Реклама

Деск: Mobirise — самая удобная десктопная программа для создания адаптивных сайтов начинающими разработчиками. Особенности и возможности.

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

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

Существуют продуманные и простые инструменты, позволяющие человеку, далёкому от атрибутов, свойств, постоянных и прочих милых нашему сердцу вещей, создавать сайты самостоятельно. Один из них — Mobirise.

Что такое Mobirise?

Это представитель относительно редкого типа сайтбилдеров — десктопная программа для создания сайтов. Предназначена для работы в среде Windows и Mac. Проект имеет западное происхождение. Получить представление о его возможностях вы можете сходу, взглянув на официальный сайт данного ПО, — он выполнен на продвигаемом движке.

Особенности Mobirise

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

Очень приятным моментом является бесплатность Mobirise как для частного, так и коммерческого использования. Полная доступность — качайте и делайте сайтов столько, сколько захотите. С минимальными усилиями.

Стоимость создания сайтов сводится к затратам на домен и хостинг для них. Публиковать их можно в один клик прямо из программы (FTP-клиент здесь встроенный), задав предварительно путь к домену-папке на сервере хостинга. Таким же образом происходит и обновление сайтов. Также вы можете сохранять проекты в папку на ПК либо на Google Drive. Просто и удобно.

Возможности Mobirise

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

Шаблонов тоже нет. Каждый блок является адаптивным, а его вид легко можно кастомизировать путём изменения шрифтов (Google Fonts доступны), фонов (цвет, картинка и даже видео), включения эффекта параллакса и прочего. Настроек не очень много, но достаточно для придания индивидуальности типовым структурам блоков.

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

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

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

Есть в Mobirise и расширения, среди которых отыщите виджет для получения возможности комментирования через Facebook, подключите статистику Google Analytics, синхронизацию с Soundcloud и пр. Те, кому возможностей стандартных блоков покажется мало, смогут расширить функционал покупкой редактора кода за 69$ (по желанию, т. к. особой необходимости в нем нет — код сайта можно отредактировать после сохранения в любом текстовом редакторе). Это единственный платный элемент в сайтбилдере. Его приобретение активирует дополнительную кнопку в каждом блоке, позволяющую изменять его код как-угодно. Используются HTML5 и CSS3.

Выводы

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

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

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

P.S. Демонстрация возможностей Mobirise:

Как потратить две недели с максимальной пользой

Реклама

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

Создание списков

Переведена и выложена следующая глава из книги Шэя Хоу с уроками по HTML и CSS. На этот раз создаём списки и применяем их на сайте Styles Conference, который из урока в урок обретает свой окончательный вид и обрастает новыми деталями.

Установка фона и градиента

Очередная глава из книги Шэя Хоу «Уроки по HTML и CSS». На этот раз речь идёт о том, как задавать цвет фона, устанавливать фоновые картинки и градиенты. Как обычно, всё показано на готовых примерах, которые вы можете посмотреть на JSFiddle и поиграть с кодом.

GeekBrains: хватит мечтать, начинайте кодить

Реклама

Программистом быть классно. Во-первых, это интересно, во-вторых, прибыльно, в-третьих, научиться кодить может каждый. Коду всё равно, какое у вас образование, его не волнует ваш возраст. От вас требуется только желание изучать новое и работать, работать, работать. Готовы? Тогда добро пожаловать на новый курс GeekBrains для начинающих программистов, который стартует 26 ноября.

Пройти бесплатный курс программирования

Страницы