Секреты приложений Google

Балуев Денис

Глава 9

Сайты

 

 

Обзор

Сервис под названием «Сайты» позволяет любому желающему, не обладающему даже начальными знаниями о премудростях языка разметки HTML, не говоря уже о более продвинутых технологиях и языках вроде PHP, Python или Java, самостоятельно создавать отлично выглядящие и функционально «продвинутые» сайты, сполна воспользовавшись преимуществами других сервисов Google. Да, последняя глава книги недаром посвящена именно Сайтам, ведь этот сервис вбирает в себя достижения и возможности Календаря, Документов, Таблиц, Презентаций, Карт и Фотографий! В создаваемые вами интернет-ресурсы вы сможете вставлять расписания занятий, тексты статей, слайд-шоу презентаций и фотографий и даже фрагменты карт. Самое замечательное, что все это не станет статичным образом храниться на той или иной странице вашего сайта – напротив, любое изменение в самом документе или презентации будет моментально отображено на соответствующей странице. Разумеется, одними только сервисами «от Google» Сайты не ограничены – вы вольны вставлять на его страницы любые тексты, изображения и видео, найденные в Интернете или созданные самостоятельно (не забывая о вопросах авторства, конечно). Вообще, способов использования Сайтов для собственных нужд можно придумать великое множество – это создание и странички местного парашютного клуба, и сборника вегетарианских кулинарных рецептов, и личного сайта-визитки начинающего художника, и полноценного сайта компании по ремонту домов… Пожалуй, проще перечислить ситуации, когда НЕ СТОИТ прибегать к помощи Сайтов Google: при создании интернет-магазинов или сложных социальных сервисов лучше будет воспользоваться специализированными решениями. Во всех остальных случаях стоит дать Сайтам шанс себя проявить.

 

Создание

Начнем с самой простой и очевидной задачи – создание личного сайта «с нуля». Для этого необходимо направить свой браузер по вполне очевидному (надеюсь, к последней главе книги подход Google к адресации стал более чем понятен!) адресу http://sites.google.com, не забыв привычным движением изменить язык интерфейса в настройках, пройдя по ссылке User Settings (рис. 9.1).

Рисунок 9.1. Заглавная страница Сайтов

После сохранения изменений можно смело нажимать на кнопку «Создать сайт» приветственного экрана.

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

Следующее, над чем надо задуматься создателю нового сайта, – его название. Старайтесь выбрать короткое и запоминающееся имя – как-никак на его основе создается и адрес вашего будущего творения (за него отвечает поле URL). Конечно, при желании адрес всегда можно изменить – не забывайте только, что в URL могут входить лишь символы латинского алфавита и цифры от 0 до 9. Вводить детальное описание сайта в одноименном поле необязательно, однако в случае, если на одном ресурсе вы останавливаться не планируете, будет разумно указать отличительные особенности или тематику каждого – при заходе на страницу управления так будет проще выбрать нужный ресурс. При установке флажка «Сайт только для взрослых» Google будет уведомлен о нежелательном для детских глаз содержимом и при попытке захода на сайт сможет предупреждать каждого о его «взрослом» наполнении.

Непосредственно перед созданием сайта сервис предлагает нам установить степень его публичности. Хотите, чтобы формируемый нами набор веб-страниц мог увидеть любой желающий, вводящий в браузер заветный URL? Или секретный веб-узел будет доступен лишь узкому кругу лиц, каждого из которых нужно будет приглашать отдельно? Выбор зависит только от вас (рис. 9.2).

Рисунок 9.2. Страница создания нового сайта. Именно здесь задаются его название, тема оформления и степень публичности

Выбор темы оформления – вот где можно развернуться фантазии! Не останавливайтесь на трех предлагаемых вариантах – смело нажимайте кнопку «Другие темы» и выбирайте из более чем 50 образцов на любой вкус. Жаль, но непосредственно из мастера создания сайта нельзя увидеть, как будет выглядеть то или иное цветовое решение. Остается полагаться лишь на название темы, иконку и собственную интуицию. Не беда: в дальнейшем вы всегда сможете сменить неудачную тему из панели управления.

Самое последнее действие, которое необходимо произвести перед созданием сайта, – доказать, что вы человек, а не робот-программа, указав проверочный код в предлагаемом окошке. Ввели? Скорее нажимаем на кнопку «Создать сайт» и спустя несколько секунд любуемся на первую страницу вашего новорожденного детища (рис. 9.3).

Рисунок 9.3. Первая страница нового сайта

 

Редактирование

Что делать с заглавной страницей? Перво-наперво – наполнить содержанием: добавить текст и фотографии, приправив по вкусу расписанием встреч и слайдами с презентациями. Целям созидания служит кнопка «Редактировать страницу» в правом верхнем углу экрана. В режиме редактирования можно быстро изменить название страницы и, не откладывая дела в долгий ящик, начать писать текст, пользуясь текстовым редактором, очень напоминающим интерфейс Документов Google. Конечно, здесь есть свои специфические команды меню, а также специальные кнопки инструментальной панели. Так, выпадающее меню «Макет» позволяет предпочесть ту или иную разметку редактируемой вами веб-страницы. Для выбора доступны девять вариантов, которые включают в себя отображение содержимого в несколько колонок и столбцов в разных комбинациях (рис. 9.4).

Рисунок 9.4. Инструментальная панель текстового редактора, с помощью которого набирается и редактируется текст

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

Для того чтобы посмотреть, как выглядит страница в виде стандартного HTML-кода, достаточно нажать крайнюю правую кнопку на панели инструментов под названием «Изменить HTML». В появившемся окне можно отредактировать некоторые детали оформления – конечно, в случае, если вам известны тонкости работы с языком разметки. Результатами «тюнинга» можно полюбоваться, не закрывая окно HTML-редактора. Достаточно просто нажать на переключатель «Предварительный просмотр». Кнопка «Обновить» поможет внести сделанные вами изменения в дизайн редактируемой страницы (рис. 9.5).

Рисунок 9.5. Для знатоков HTML доступен соответствующий редактор кода

Но оставлять на странице только текст – значит сознательно ограничивать себя в средствах самовыражения. Современные сайты должны быть наполнены самым разнообразным содержимым. В первую очередь это, конечно, графика. Команда меню «Вставка – Изображение» предлагает на выбор два варианта ее помещения на страницу: с помощью загрузки файла с локальной машины или путем непосредственного указания адреса картинки в Интернете. Однако создатели Сайтов рассчитывают, что кроме текста и картинок у вас найдется, чем еще порадовать посетителей: для вставки доступны произвольный документ (из сервиса Документов Google, разумеется), таблица или табличная форма (сервис Таблиц), а также слайд-шоу вашей любимой презентации (рис. 9.6).

Рисунок 9.6. Объекты для вставки

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

Но и на этом набор доступных для помещения на страницу опций не заканчивается. Команда «Вставить – Слайд-шоу Picasa Web» позволяет добавить на страницу галерею ваших фотографий – для этого в появившемся окне достаточно указать публичную ссылку на нее (очень жаль, но выбрать нужную папку из списка нам здесь почему-то не дают). Кроме ссылки в окне настроек можно выбрать один из предлагаемых размеров слайд-шоу – от скромных 144 пикселов в ширину до размера, забавно названного «очень-очень большой» и позволяющего использовать аж 800 пикселов полезного пространства по горизонтали. Различные дополнительные опции вроде автоматического воспроизведения или заголовка слайд-шоу можно настроить как непосредственно при создании, так и после, с помощью ссылки «Свойства», возникающей под любым помещенным на страницу объектом. Там же есть возможность настроить его расположение на странице – триада ссылок «L, C, R» отвечает за выравнивание по левой границе страницы, центру или правому краю соответственно. Наконец, на этой небольшой панели инструментов всегда есть возможность разрешить обтекание объекта текстом (как правило, тогда страница визуально выглядит привлекательнее – на ней становится меньше «белых пятен»), а также удалить его с глаз долой в случае, если вы передумали показывать презентацию или таблицу посетителям.

Для добавления на страницу движущихся картинок (иначе говоря, видео) доступны две опции: вставка видеороликов с сервиса Google Video или видеохостинга YouTube (оба варианта доступны из пункта меню «Вставить – Видео»). В обоих случаях все, что необходимо, – указать ссылку на видеофайл, которая всегда доступна при его просмотре в адресной строке браузера (конечно, лишь в том случае, если вы просматриваете ролик непосредственно с YouTube или Google Video) (рис. 9.7).

Рисунок 9.7. Добавление видеоролика с сайта YouTube

Чуть сложнее дело обстоит при добавлении на страницу фрагмента карты. Впрочем, и это не задачка по квантовой физике: команда «Вставить – Карта» предлагает во всплывающем окне самостоятельно найти нужные вам координаты на планете Земля, воспользовавшись привычным интерфейсом Карт Google. Впрочем, здесь он достаточно аскетичен и хотя позволяет даже добавлять на карты метки (точнее, всего одну – за это отвечает команда «Оставить пометку» справа от строки поиска), гораздо удобнее найти нужное место с помощью старого доброго http://www.maps.google.ru и, скопировав ссылку на карту (о том, как это сделать, вы, разумеется, уже успели прочитать в главе 6, посвященной картографическому сервису), вставить ее в поле, которое называется «Или вставьте ссылку на Карты Google здесь» (рис. 9.8).

Рисунок 9.8. Добавить карту мира или схему проезда к офису можно с помощью объекта «Карты»

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

Для того чтобы посетители сайта смогли ознакомиться с рабочим расписанием вашей фирмы, кружка или садового общества, стоит добавить на одну из страниц Календарь. Схема та же: командуем «Вставить – Календарь», выбираем один из календарей или вставляем HTML-ссылку в одно из ваших публичных расписаний (тем, кто забыл, как это делать, – прямая дорога в главу «Календари», где данному вопросу посвящена пара абзацев). Затем занимаемся настройкой внешнего вида календаря на странице – устанавливаем необходимую ширину и высоту объекта, решаем, какой режим просмотра лучше всего подходит для конкретной ситуации (здесь очень рекомендую остановиться на режиме «Повестка дня») и нужно ли показывать кнопки навигации по датам (рис. 9.9).

Рисунок 9.9. Настройка параметров календаря

 

Монетизация

Да, это правда: на сайтах можно (а иногда и нужно!) зарабатывать деньги. Один из самых быстрых (но отнюдь не самых выгодных и надежных, здесь все зависит от ситуации) способов обогащения – размещение рекламы на своем ресурсе. Для этих целей Google предлагает воспользоваться своей рекламной площадкой под названием AdSense, которая умеет отображать так называемую контекстную рекламу. Ее содержание подбирается на основе информации, находящейся на странице. Таким образом обеспечивается гораздо лучшее «попадание» сообщений в целевую аудиторию – читателям компьютерных обзоров будет показана реклама новейшего гаджета, а статья о тонкостях выращивания филодендронов и орхидей станет соседствовать с рекламой клуба флористов или интернет-магазина по доставке цветов. Интересно? Понравилось? В первый раз после запуска команды «Вставить – AdSense» сервис предупредит о том, что реклама на ресурсе еще не активирована, и предложит пройти в настройки панели управления вашим узлом (рис. 9.10).

Рисунок 9.10. Такое предупреждение вы увидите, если реклама AdSense на сайте еще не включена

Активация рекламной системы на сайте проходит в два этапа. Шаг первый – необходимо нажать кнопку «Зарабатывать деньги на этом сайте». После этого нужно решить, стоит ли показывать рекламу на боковой панели вашего веб-узла. В последнем случае баннеры будут появляться на всех страницах. Если стоит, смело нажимаем кнопку «Добавить» в разделе «Превратить в деньги» (это будет шаг второй) или же, поскольку показ рекламы мы уже активировали, возвращаемся обратно к редактированию страницы и снова даем команду на добавление рекламного блока. Так мы будем добавлять эти блоки на каждую страницу индивидуально. В чем-то такой подход лучше первого, хотя и занимает гораздо больше времени, ведь в окне настроек есть возможность установить различные виды и неодинаковое количество рекламных сообщений для разных страниц (рис. 9.11).

Рисунок 9.11. Баннеры бывают разные: прямоугольные, вертикальные, а также в виде небольших «кнопок»

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

 

Новая страница

Очень надеюсь, что ваш веб-узел не будет состоять из одной странички, ведь Сайты не налагают абсолютно никаких ограничений на их количество. Существует лишь предельное значение общего объема данных, выложенных на одном сайте, – это 100 мегабайт, но превысить его можно, лишь храня на своем ресурсе занимающие много места документы, музыку и видео (один файл при этом должен быть не больше 10 мегабайт). Впрочем, в этом случае гораздо удобнее пользоваться специализированными хранилищами, а у себя размещать лишь ссылки на файлы. Для создания новой страницы предназначена одноименная кнопка в правом верхнем углу экрана, обозначенная зеленым плюсом. Предупреждаю: после ее нажатия вы в который раз окажетесь перед сложной задачей выбора. Дело в том, что Сайты позволяют создавать несколько типов страниц. По сути, это преднастроенные шаблоны, каждый из которых выполняет свою определенную функцию (рис. 9.12).

Рисунок 9.12. Добавляем новую страницу

Наша главная страница относится к типу «Веб-страница». Это самый простой и универсальный шаблон. Если ничем, кроме текста и графики, вы его наполнять не планируете, то на нем можно остановиться. Тип страницы «Информационная панель» чуть сложнее – он состоит из двух полос, в каждой из которых находится по паре заготовок для добавления объектов-гаджетов. В принципе, подобную «панель» можно создать и из обычной веб-страницы, просто добавляя на нее объекты с помощью меню «Вставить». Но если у нас уже есть предварительно настроенный шаблон, зачем терять время?

Тип «Объявления» позволяет с помощью кнопки «Новое сообщение» быстро создавать короткие и не очень записи, список которых появляется на отдельной странице. К объявлениям можно прикладывать файлы, а также писать комментарии. Такой тип страницы идеален для размещения новостей о компании (свежие сообщения автоматически появляются вверху страницы), создания внутренней доски объявлений о продаже детских вещей или даже организации своеобразных форумов и клубов по интересам (рис. 9.13).

Рисунок 9.13. Быстро добавлять короткие сообщения удобно с помощью шаблона «Объявления»

Тип «Файловый менеджер». Здесь все просто. Несмотря на мои советы о размещении файлов на сторонних серверах, иметь у себя корпоративную библиотеку документов, список прайс-листов по отраслям или набор аудиокниг по интересующей тематике очень удобно именно с помощью менеджера. Он позволяет не только создать список файлов, но и подписаться на уведомления о его изменении – так вы первыми узнаете, что ваш соавтор (о совместной работе мы еще поговорим) недавно выложил на сервер новую документацию по мебельной фурнитуре или последнюю версию прайс-листа. Кстати, о версиях. При загрузке файла (а здесь, как обычно, возможно указание в качестве источника локального компьютера и произвольного URL) с именем, уже существующем в списке, он не появится в нем дубликатом, а просто сменит номер версии файла. Щелчок на ссылке «Версия» позволит обратиться ко всем промежуточным вариантам (рис. 9.14).

Рисунок 9.14. Файловый менеджер лаконичен, но удобен

Последний тип страницы называется просто – «Список». Несмотря на незамысловатое название, возможностей применения данного шаблона не счесть. При выборе типа «Список» вы вначале сможете указать, какой именно из шаблонов использовать: «Список задач», «Список проблем», «Состояние позиции» и «Пользовательский». На самом деле разницы между ними немного, и при желании один всегда можно преобразовать в другой (рис. 9.15).

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

Любой список представляет собой табличную форму с набором полей, которые можно настраивать и сортировать по своему желанию. Именно таким образом легко организовать системы отслеживания статуса важного проекта, вести базу ошибок в программе, а также создавать списки дел и покупок. Конечно, для всего перечисленного есть и более удобные специализированные решения, но по простоте и универсальности до списков им далеко. Самое главное в списке – набор полей. Каждый из них может иметь определенный тип. Да, и здесь тоже типы! Решайте сами – будет ли это текст, флажок (для признака «да – нет»), дата, URL-адрес (тогда по ссылке можно будет переходить) или нечто под названием «Раскрывающийся». Последний вид представляет собой набор фиксированных значений, одно из которых можно выбрать из выпадающего списка.

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

Рисунок 9.16. Настройка полей списка

На все той же странице выбора типов столбцов Сайты спросят вас: где должен находиться «новичок» в общей иерархии страниц? Не стоит пренебрегать их правильной классификацией и выдавать всю информацию на одном уровне. В случае, когда число страниц сайта превысит несколько десятков, оперировать «большой кучей» файлов станет очень неудобно. Если же на базе Сайтов Google вы решили организовать нечто напоминающее каталог товаров или услуг, рекомендация по наведению порядка превращается в неукоснительное требование. Для выбора подходящего местоположения страницы есть три варианта: поместить ее на самый верхний уровень, расположить под разделом, из которого вы ее создавали (например, подраздел «Кухни» логично расположить под страницей «Мебель»), или самостоятельно выбрать подходящее место с помощью ссылки «Выберите другое местоположение».

 

Управление страницами

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

Рисунок 9.17. Механизм сравнения версий поможет выбрать самый удачный вариант или вернуть на место случайно испорченную страницу (используйте ссылку «Вернуться к данной версии»)

Команда «Подписаться на получение уведомлений…» в «Дополнительных действиях» также бывает полезна в случае, если работа над той или иной страницей ведется не одним человеком, а группой. После включения режима нотификации вам при каждом изменении страницы (проще говоря, появлении ее новой версии) будет отправляться письмо с уведомлением о том, что кто-то, включая вас самих (уведомления о собственных изменениях отключаются в настройках), занимался ее редактурой. Удобно, что сами изменения можно оценить, даже не переходя на сайт, – содержимое страницы с указанием правок и удалений будет вставлено в тело письма! А если вы планируете играть «по-крупному» и хотите контролировать процесс изменения всех страниц сайта, не тратьте усилия на включение уведомления каждой из них, а воспользуйтесь командой «Подписаться на получение уведомлений об изменении сайта», находящейся чуть ниже.

Изменить параметры страницы поможет следующий пункт действий – «Настройки страницы». Там можно разрешить или запретить показ заголовка (например, нет никакого смысла в заголовке корневой страницы сайта выводить «Главная страница». Это очевидно). Наверное, в большинстве случаев стоит отключить и показ подчиненных страниц, в чем вам поможет настройка «Показывать ссылки на подстраницы». А вот отказываться ли от возможности прикладывать к странице файлы и оставлять комментарии (за это отвечают две оставшиеся настройки), решать только вам. В том же окне можно изменить и название элемента в случае, если английская транскрипция Moa-Stranitsa вас не устраивает и вы хотите заменить ее на более корректное MyPage.

Функция «Распечатать страницу» пригодится в случае, если вы хотите пролистать материалы сайта в «твердой копии», – например, для того чтобы сделать корректуру. Вид страницы в этом случае будет максимально аскетичен: никаких элементов управления, меню и кнопок в версии «для печати» вы не увидите. Есть и еще один способ получить желаемое – ссылка «Печать» в самом низу любой страницы сайта выполняет ту же функцию (рис. 9.18).