@dfagdjhkjkhlkj
DFAGDJHKJKHLKJ
OFFLINE

Erase and rewind...

Дата регистрации: 17 апреля 2011 года

Персональный блог DFAGDJHKJKHLKJ — Erase and rewind...

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

«Pur:Pur» - украинская группа из Харькова, основана в феврале 2008 года. Именно тогда Ната Смирина и Евгений Жебко выложили на YouTube свое первое видео, записанное дома одним кадром. Его оценили не только пользователи сети, но и организаторы фестиваля «ВДОХ», на сцене которого музыканты выступили уже с гитаристом Стасом Кононовым. Этим же составом они отыграли на фестивалях «Мамакабо», «Джаз-Коктебель», «NonStopMediа», а также на масштабном арт-событии Украины «Гоголь-фест».

После изучения блоков необходимо рассмотреть как один блок отличать от другого. Этим и займемся.

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

Как Вы поняли, весь наш макет страницы будет состоять из блоков, внутри которых мы будем задавать картинки, меню (список из ссылок), посты, надписи и т.д. Допустим, мы будем создавать вот такой стандартный шаблон:



Если посмотреть внимательно на картинку, то можно заметить, что наш шаблон будет состоять из 4 больших блоков:



Зададим этим блокам имена. Чтобы обозначить имя блоку необходимо этому тегу приписать свойство id вот так:

<div id="header"></div>

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

<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>



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

body
{
background-color: white
}

У стандартных тегов языка html нет имен, точнее сам тег и является своим именем. Такие теги: тег ссылки, тег картинки и так далее. Чтобы обратиться в таком режиме к блокам страницы необходимо написать его имя:

#header
{
background-color: green;
}

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

#header
{
background-color: green;
}
#sidebar
{
background-color: red;
}
#content
{
background-color: yellow;
}
#footer
{
background-color: black;
}

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

Представьте ситуацию - в магазине лежит три ящика яблок разных сортов. Что у них общего? Они все круглые (почти круглые), у всех есть черешок и листик. Что у них разного? Цвет - красные, зеленые, желтые. Сорт и вкус - кислые, сладкие, горькие. Проще говоря можно обозначить что все эти фрукты принадлежат к одной большой группе (или классу) - "Яблоки". Но при этом у них разные сорта (или имена). Вот так и блоки, которые имеют одинаковые свойства, можно объединять в один большой класс. Зачем это нужно? Представьте, что у вас есть штук шесть блоков, которым нужно задать один и тот же фон. Вам придется придумывать для каждого блока свое уникальное имя и для каждого блока прописать стиль его фона. Неудобно и долго, неправда ли? Тут на помощь приходит понятие "класс". С помощью этого понятия можно всем блокам задать одно большое имя и описать их общие свойства.
Покажу все на примере кода. Есть шесть блоков:

<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
<div id="block6"></div>

В стилях нужно тогда написать:

#block1 {background-color: white;}
#block2 {background-color: white;}
#block3 {background-color: white;}
#block4 {background-color: white;}
#block5 {background-color: white;}
#block6 {background-color: white;}

А теперь введем понятие "класс" и напишем этот же код немного изящнее:

<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>

И в стилях:

. blocks {background-color: white;}

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

Полный код внесенных изменений:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Блок 0 -->
<html xmlns="https://www.w3.org/1999/xhtml">

<!-- Блок 1 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{Title}</title> <!-- Заголовок страницы -->
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<!-- Стили по умолчанию -->
<style type="text/css">
body
{
background-color: white;
}
#header
{
background-color: green;
}
#sidebar
{
background-color: red;
}
#content
{
background-color: yellow;
}
#footer
{
background-color: black;
}
</style>
</head>
<!-- Блок 1 конец -->

<!-- Блок 2 -->
<body>

<div id="header"> <!-- Блок 1 -->
Любой текст 1
</div>

<div id="sidebar"> <!-- Блок 2 -->
Любой текст 2
</div>

<div id="content"> <!-- Блок 3 -->
Любой текст 3
</div>

<div id="footer"> <!-- Блок 4 -->
Любой текст 4
</div>

</body>
<!-- Блок 2 конец -->

</html>
<!-- Блок 0 конец -->

Показать/Скрыть текст статьи

Оригинальную закладку для тех, кто еще читает обыкновенные бумажные книги, спроектировала бразильский дизайнер Лессандра Мартинс Перейра (Lessandra Martins Pereira). Пока что закладка находится на уровне патента и еще не вышла в продажу. От себя скажу, что "и как это люди до сих пор закладывали книги без этого нового патентованного средства?" :)

В ночь с 14 на 15 мая в Харькове прошел городской фестиваль под названием "Ночь музеев". Организатором фестиваля выступила художественная муниципальная галерея. Этот фестиваль проходит уже третий раз. Суть его заключается в приобщении масс к культуре посредством интерактивных фестивальный программ. В фестивале участвовало порядка 10 культурных обителей Харькова: Муниципальная галерея, Харьковский литературный музей, Харьковский художественный музей, Городской музей К. И. Шульженко, Морской музей, Галерея «Академия», Галерея АВЭК, «Гостиная на Дворянской», Харьковский Планетарий и другие. Подробнее об их конкурсной программе можно почитать тут: "Ночь музеев".

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

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

Здесь кроме повседневной выставки картин присутствовали и работы харьковских студентов института искусств. Среди этих работ меня завлекла лишь одна. Вот эта (извините за качество фото):

Кроме того была выставка крашенок и писанок (пасхальные яйца). И естественно я не забыл сходить посмотреть на свою любимую картину в этом музее – картина «Посиротiли» (Осиротели) Григория Мясоедова:

Следующей остановкой был… Макдональдз :) . Уж очень хотелось есть. Наша трапеза выглядела больше как пикник возле памятника Влюбленным под свет фонарей и журчание фонтана. Отдохнув от безустанной ходьбы и немного переварив столько вредную, но вкусную, пищу мы двинули в литературный музей, где выступал «Оркестр CHE». Народу было очень много, нам едва удалось пробиться к импровизированной сцене. Нам удалось выстоять песни три, так как в нашей программе еще был концерт группы “Pur:Pur”, который проходил в 22-30 в Муниципальном. Пришлось возвращаться обратно.

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

На этом я решил закончить свое ночное путешествие, так как еще курсовик не доделан) ) Моя же компания отправилась дальше и гуляла всю ночь, и даже в каком-то музее успела на чаепитие в 5 утра.

P.S. Пару видео группы Pur:Pur. Наслаждайтесь:

В этой части курса мы рассмотрим самое важное и самое нужно понятие - понятие "блок".

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

В прошлый раз мы рассмотрели что значат строки между тегами <head> и </head>, а также коснулись нового понятия - языка стилей CSS, а также задали фон для нашей темы как пример написания кода на языке СSS.

Сейчас мы отодвинем в сторону практическое написание и кода и почитаем немного теории.
Раньше, с появлением языка html и до появления CSS, сайты создавались (про создание сайта применяется термин "верстка" или "верстать страницы", далее я буду использовать этот термин) с помощью таблиц. Вот представьте, вам нужно сверстать (создать) сайт вот такого формата:



Тогда Вам бы пришлось создать таблицы 3х3 ячеек, две верхние склеить в одну и две нижние также склеить в одну ячейку. Тогда бы Вы получили макет сайта, который представлен выше. А что, если в боковую панель вам нужно тоже разделить, допустим, на 4 куска? Тогда в ячейку, которая является боковой панелью, пришлось бы вставить еще одну таблицу. А если структура сайта очень сложная - то представьте сколько вложенных таблиц будет. И для каждой придется прописывать как она должна выглядеть и так далее… Такое построение сайта имеет большие недостатки: много кода, трудно переделывать. С развитием сети Интернет появилось более удобный способ верстки страниц (то есть создания сайта) - это язык CSS и его блоки.

Что такое "блок"? Представьте, что Вы строите башню из кубиков. Вы берете кубик, кладете на него другой, на этот еще один и так до тез пор, пока не будете удовлетворены результатом:



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

Далее, как создать блок? За блок отвечает тег <div></div>. Чтобы создать четыре блока друг на друге нужно написать между тегами <body> и </boby> такой вот код:

<body>

<div> <!-- Блок 1 -->
</div>

<div> <!-- Блок 2 -->
</div>

<div> <!-- Блок 3 -->
</div>

<div> <!-- Блок 4 -->
</div>

</body>


Теперь, вставив этот код в шаблон и сохранив его Вы на своей странице… ничего не увидите :) Все потому, что эти блоки ничего не содержат внутри себя. Давайте напишем любой текст внутри блока (между каждым из тегов) <div></div>:

<body>

<div> <!-- Блок 1 -->
Любой текст 1
</div>

<div> <!-- Блок 2 -->
Любой текст 2
</div>

<div> <!-- Блок 3 -->
Любой текст 3
</div>

<div> <!-- Блок 4 -->
Любой текст 4
</div>

</body>


Результат должен быть таким:



Видите? Блоки с текстом лежат один под другим. Заметьте порядок - как вы написали в шаблоне, так они появятся и на страницы - "Любой текст 1" будет самым верхним, а "Любой текст 4" - самым нижним.

На этом пока что все. В следующий раз мы рассмотрим как давать имена блокам и начнем изучать как менять внешний вид блоков. Если у Вас есть вопросы по поводу уроков - пишите в комментарии или Вконтакте

Показать/Скрыть текст статьи

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

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

9 место. За массовость.
Множество автором полагает, что чем больше постов, тем лучше. А вот о качестве - забывает. (см выше).

8 место. За отсутствие приватных сообщений.
Согласитесь, что функция приватных сообщений очень необходима. Допустим понравился Вам пост, Вы его прокомментировали, а ответить автор Вам не может. Или у Вас есть вопрос к автору - тогда можно было бы просто послать приватное сообщение и получить ответ.

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

6 место. За музыку в блогах.
Это жутко раздражает. Открываешь пару блогов посмотреть, а они начинают хором петь (прям стихи :) . Очень раздражает, когда музыка в блоге запускается без согласия читателя.


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

4 место. За поппулизм.
Что ни блог, то Дневники Вампиров, Сумерки, Гарри Поттер… Массовое помешательство попсовыми продуктами и излив этих эмоций в массу. 90% блогов грешат этим.

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


2 место. Серебро. За диссконекты.
Как часто Вы видите сообщение о том, что сайт временно недоступен?


1 место. Золото. За окно создания поста.
Удивлены? Несмотря на все вышеперечисленное это - самое худшее в сайте. О чем думал разработчики, когда установили высоту поля ввода поста в… 100 пикселей (где-то три строки) ? Работать с таким интерфейсом просто нереально. А сели ты пишешь большой пост - вешайся.

Но есть выход. Поделюсь с Вами секретом, как немного изменить интерфейс. Смотрите мое видео:


Если вы с чем-то не согласны (или наоборот) - пишите в комменты.

P.S. Кнопка HTML - это совсем другое. Здесь ты не текст редактируешь, а полностью код страницы вместе с текстом. Большинство пользователей интернета не знают языка HTML и CSS. (для xsandr777f)

Показать/Скрыть текст статьи

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

Рассмотрим кусок кода:

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{Title}</title> <!-- Заголовок страницы -->
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<!-- Стили по умолчанию -->
<style type="text/css">
</style>
</head>


Этот код (как я писал в предыдущий раз) описывает голову сайта. Первая строка (строка с тегом <meta>) определяет кодировку нашей страницы. Если очень интересно знать что такое кодировка, то про это можно почитать тут: Wiki. А если не углубляться, то нужно просто запомнить, что эта строка должна быть и все.

Следующая строка определяет заголовок вышего окна. Эта строка отображается вот тут:



За заголовок окна отвечает тег <title>Здесь любой текст</title> (ссылка на справочник). Стоит отметить, что этот тег используется ТОЛЬКО в голове сайта. И только один раз, если вы напишите этот тег еще раз с другим текстом, то браузер один из них проигнорирует. Заметьте также, что между открывающим и закрывающим тегом стоит: {Title}. Но при этом этот текст не выводится в заголовке страницы, а вместо него появляется название вашего блога (как у меня - вместо {Title} появилось Erase and rewind…). Почему так происходит? Слова, которые заключены в фигурные скобки { и } являются специальными служебными тегами, которые существуют только на этом сайте. Проще говоря, программа сайта Viewy вместо таких вот слов подставляют соответствующие значения. Например вместо {Title} появится строка с названием вашего блога, а вместо {Description} - его описание. Это очень удобно, так как если Вы измените название Вашего блога, то Вам не придется менять код страницы.

Следующая строка описывает вид страницы для людей, которые смотрят ее не с компьютера, а с телефона. В общем, эта строка просто должна быть.

И последние две строки - это открывающий и закрывающий тег <style></style> соответственно. Между этими тегами мы и будем записывать внешний вид нашей страницы. Делать мы это будем на языке CSS - языке описания внешнего вида страницы.

Итак, для примера давайте поменяем фон нашей страницы. Напишем вот такой код:

<style type="text/css">
body
{
background-color: black;
}
</style>


Этот код означает, что для тега <body> (тела страницы) мы задаем цвет фона (background-color) черным. Именно такой формат написания внешнего вида. Сначала пишем имя элемента (у нас - тело страницы), потом фигурные скобки и внутри этих скобок - перечень свойств которые мы хотим определить. Свойства записывают как: "СВОЙСТВО: ПАРАМЕТР;". Подробнее какой существует список свойств можно посмотреть в справочнике.

На этом все. Ссылка на полный код: КОД.

P.S. Как устанавливать код? Зайдите на Viewy Нажмите справа "Внешний вид блога". Выберите "Собственная тема" и "Редактировать HTML". Удалите весь текст оттуда (предварительно сохранив в другой файл этот текст). И вставьте текст урока. Нажмите "Сохранить" и посмотрите свой блог - у Вас должно появится просто черная страница. Никаких постов или менюшек. Просто черная страница. Это произошло потому что мы еще не написали код как должны отображаться остальные элементы страницы.

Показать/Скрыть текст статьи

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

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

Итак, привожу полный код, который составляет скелет темы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Блок 0 -->
<html xmlns="https://www.w3.org/1999/xhtml">

<!-- Блок 1 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{Title}</title> <!-- Заголовок страницы -->
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<!-- Стили по умолчанию -->
<style type="text/css">
</style>
</head>
<!-- Блок 1 конец -->

<!-- Блок 2 -->
<body>
</body>
<!-- Блок 2 конец -->

</html>
<!-- Блок 0 конец -->


Открываем блокнот (или Notepad++, далее просто блокнот) и создаем новый документ. Сохраняем его с любым именем в любую папку (Notepad++ поддерживает подсветку синтаксиса, то есть ключевых слов. Для включения этой опции вверху нажмите: Синтаксис-H-HTML). Копируем вышепреведенный код в блокнот и опять сохраняем. На этом телодвижения оканчиваются, ибо теперь нужно обхяснить что все эти строчки значат.

Самая первая строка (с DOCTYPE) определяет формат Вашего документа. Дело в том, что все сайты пишутся на языке разметки HTML (стоит отметить, что это не язык программирования, а именно язык разметки страницы!). Так как компьютер пока не научился понимать то, что мы хотим сделать, просто из мыслей, нужно давать ему команды, чтобы показать, что вот в правом углу мы хотим картинку, а в левом - ссылку на другой сайт. Для этого и придумали язык разметки - HTML. Чем больше становилось пользователей Интернета, тем больше становились запросы. Старый язык уже их не удовлетворял, поэтому появилась новая версия этого языка. Потом еще одна и так далее. На данный момент самая свежая версия языка - это XHTML. Вот как раз первая строка и показывает, что мы пишем наш документ на этом языке. В общем вдаваться в это не нужно, просто запомнить - это строка должна быть первой и всегда.

Далее идет комментарий "Блок 0". Что такое комментарий? Это строка, или часть строки, на которую в последствии наш браузер (Опера, Фаерфокс, Хром и т.д.) не будет обращать внимания. То есть эти строчки, или части строк, никак не влияют на наш код и не отображаются на странице. Комеентарии программисты ставят для того, чтобы объснять код другим ил же для себя, чтобы не забыть что значит какая-либо строка в его коде. Я расставил комментарии для ссылания на них в статье.

Далее мы видим тег <html>. В языке разметки веб-страниц чтобы указать какой элемент страницы вы хотите вывести на экран необходимо использовать теги. Это названия элементов заключенные в скобки < и >. То есть тег <html> показывает, что с этого места начинается описание нашего сайта. Если вы посмотрите на последнюю строчку, то заметите похожий тег </html>. Это, так назыываемый, закрывающий тег. То есть он показывает, что здесь наша страница заканчивается и далее описания элементов нет. У каждого тега должен быть закрывающий тег!!! Запомните это (хотя бывает, что открывающий тег сразу является и закрывающим, но пока это нам не нужно). Следуйте правилу - если вы открываете тег, сразу же ниже пишите его закрытие, а потом внутри код.

После того как мы указали начало нашей страницы мы должны описать две вещи - голову сайта и его тело. Голова сайта раньше использовалась ля вывода заглавия страницы. Сейчас же она обычно используется, чтобы внутри нее записать какие-то команды, типа подключения разных эффектов страницы и так далее. За голову сайта отвечает тег <head>. Если будете смотреть дальше, то несколько строк ниже там будет и закрывающий тег </head>. Все что между этими двумя строками - это голова сайта. Строки внутри головы мы рассмотрим в следующий раз.

Далее мы видим тег <body> и сразу же закрывающий тен </body>. Между этими строками мы и будет записывать как будет выглядеть наш блог. Пока что между ними ничего нет, так как мы создаем основу, следовательно никакого наполнения. Этот тег пказывает с какого места мы начинаем описывать тело нашего блога, то есть все то, что будет отображено на странице.

Ну и последняя строка - закрывающий тег (который мы уже рассмотрели выше), означающий, что документ закончился.

Пока что все, если есть что-то непонятное - пишем мне в теме ВКонтакте. Я обязательно объясню все. И еще - все теги и что они значат можно посмотреть здесь - Справочник

Показать/Скрыть текст статьи

Сейчас мы рассмотрим основные типы шаблонов, которые являются наиболее распространенными в Интернете и рассмотрим функционал таких решений.

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

Вот список основных шаблонов:

1. Боковая панель слева


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

2. Боковая панель справа


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

3. Боковые панели по бокам


Такой шаблон отличается от предыдущих наличием сразу двух боковых панелей по бокам от основы сайта (блога). Обычно в левой боковой панели помещают основной функционал сайта - рубрики и каталоги, а в левой - сторонние данные, например, баннеры рекламных сетей и так далее. Примером такого дизайна можно назвать блоги aleksandrushka, miserybusiness и сайт ЛастФМ

4. Без боковых панелей


Такой тип шаблона (как по мне) наиболее подходит для информационных блогов. В такого рода дизайна функционал помещается в шапку (обычно слева) и футере. Основной особенностью является отсутствие боковой панели. Это и преимущество - основной контент занимает все пространство и акцентирует на себе внимание. Примеры такого стиля в блогах crazyshell и jared-joseph-leto.

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

Показать/Скрыть текст статьи

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

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

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

Далее нам необходимо запастить "отладчиком". Так в программировании обычно называют программу, которая помогает "вылавливать" ошибки в коде. Отладчики которыми я пользовался - это плагин для Mozilla Firefox под названием FireBug (кликабельно для скачивания) и плагин для Opera под названием Dragonfly (уже встроен в браузер). В дальнейшем буду показывать примеры для обоих из них (хотя первый более удобный).

И последнее что нам нужно - это справочник. Шаблон нашего стиля (темы) мы будем писать на языке разметки html и прибегнем к помощи каскадных таблиц CSS. Я пользуюсь онлайн-справочником (кликабельно для перехода)
На этот раз все. В следующий раз я расскажу об основных типах шаблонов.

Показать/Скрыть текст статьи

Посмотреть фото


Следующая

Группа Flёur(Флер) была основана в феврале 2000 года, в это время Ольга Пулатова и Елена Войнаровская впервые провели совместные репетиции в квартирных условиях. Официальным днем рождения группы Флер принято считать 8-е марта 2000 года, в этот день, к группе присоединилась третий музыкант - Юлия Земляная, играющая на флейте.

Загадочное название группы - Флер, толкуют по разному. Одни считают что название связанно с французским языком и обозначает "Цветок", другие прослеживают связь слова Флер c бодлеровским произведением "Цветы зла". В русском языке слово "Флер" трактуется как "таинственность, покров таинственности".

Свое дебютное выступлением группа Flёur дала 17 марта 2000 года, оно состоялось в Одесском Доме Актера. В мае того же года, группа Флер пополняется еще одним участником - Катериной Сербиной, играющей на виолончели. 2001 год, группа Флер проводит не менее плодотворно - к группе присоединяются Алексей Ткачевский и Алексей Довгалев, играющие на перкуссии и клавишных. Дойдя до сегодняшних дней, группа претерпела множественные "кадровые" перестановки, о подробностях которых музыканты не распространяются.

За несколько лет своего существования, группа Flёur дала немногим более 10 концертов, но при этом на каждом концерте была представлена новая программа. Группа Флер имеет свою, не похожую ни на кого, как и все "флеровское" точку зрения по поводу концертов. Музыканты не считают нужным применять методы популяризации своей музыки, не используют рекламу спонсоров на концертах и попыток привлечь незаинтересованных людей к своему творчеству - "концерт это таинство", считают Флер.

Показать/Скрыть текст

Состав

В настоящий момент в состав группы FLЁUR входят:
- Ольга Пулатова — фортепиано, вокал, автор песен
- Елена Войнаровская — гитара, вокал, автор песен
- Анастасия Кузьмина — скрипка
- Екатерина Котельникова — синтезатор
- Алексей Ткачевский — ударные
- Георгий Матвиив — бандура
- Евгений Чеботаренко — бас-гитара

Бывшие участники:
- Юлия Земляная — флейта
- Катерина Сербина — виолончель
- Алексей Довгалев — синтезатор, акустическая гитара
- Виталий Дидык — контрабас, бас-гитара
- Александра Дидык — виолончель
- Алла Лужецкая — флейта
- Владислав Мицовский — перкуссия

Показать/Скрыть текст

Дискография

— «Почти Живой» (2000)
- «Сердце» (2001)
- «Прикосновение» (2002)
- «Волшебство» (2003)
- «Сияние» (2004)
- «Всё вышло из-под контроля» (2006)
- «Флёрография» (2007)
- «Эйфория» (2008)
- «Тысяча светлых ангелов» (2010)

Аудио

Формалин

Зов маяка

Камень

Человек 33 черты

Показать/Скрыть аудио

Lucky ☆ Star (яп. らき☆すた раки сута) — комедийная манга (ёнкома) Кагами Ёсимидзу, публикация которой началась в журнале Comptiq в январе 2004. В дальнейшем на основе «Lucky Star» в разное время выходили: drama CD, две консольные игры для Nintendo DS, 24-серийный аниме-телесериал, одиночная ранобе, visual novel для PS2, и одиночная OVA.
«Lucky Star» в большой степени посвящен субкультуре отаку. В центре внимания обычно то, как живут и общаются главные героини, подружки-старшеклассницы: Коната Идзуми, Миюки Такара и сёстры-близняшки Кагами и Цукаса Хиираги.
Неотъемлемой частью проекта являются упоминания и разного рода ссылки на известные популярные японские культурные явления и произведения (в том числе мангу, аниме, онлайновые и иные игры, телепередачи). В такой ситуации, восприятие и понимание происходящего в «Lucky Star» может меняться в зависимости от осведомлённости, кругозора аудитории.

Персонажи

Коната Идзуми (яп. 泉 こなた Идзуми Коната)
Типичная отаку. Коната (или, как ее иногда называют, Кона-тян) несерьезная, ленивая девочка, которая является фанаткой видео и онлайн игр, манги, аниме. Коната также умная и спортивная, но не вступает в школьные клубы, так как все свободное время она посвящает своим увлечениям. Коната работает в косплей-кафе со студенткой младших классов Патрисией Мартин. Также Коната частенько конфликтует с Кагами, поддевая ее разными едкими замечаниями. Она живет со своим отцом-вдовцом (он сам отаку и поклонник дейт-симов наряду с Конатой, которая тоже любит «взрослые» игры), а также со своей младшей двоюродной сестрой Ютакой Кобаякавой, которая учится с ней в одной школе. Коната дружит с Кагами, Цукасой и Миюки.
Примечательно, что Коната является большой фанаткой аниме-сериала «Меланхолия Харухи Судзумии» — и в том и в другом сериале героинь Конаты и Харухи озвучивала сэйю Ая Хирано.

Кагами Хиираги (яп. 柊 かがみ Хиираги Кагами)
Кагами — может быть отнесена к цундэрэ-персонажам, что, однако, будет отклонением от изначального смысла слова.
Старшая сестра-близнец Цукасы. В школе её оценки просто великолепны, потому что она упорно учится, стремясь стать лучшей ученицей класса. Коната постоянно списывает у неё домашнюю работу. Она также была президентом класса в первый год учебы. Кагами и девочки учатся в разных классах, и она приходит к ним на переменах и во время ланча. Кагами выбрала гуманитарный профиль на свой второй год обучения, чтобы быть с ними в одном классе, но их все равно распределили в разные классы; это же случилось и на третий год обучения, что немало её огорчило, хотя она и пыталась скрыть свое огорчение.
Кагами прагматична и целеустремлённа, но вместе с тем сентиментальна, чувствительна и романтична. Однако ненавидит когда её слабости замечают окружающие (особенно Коната, которая видит Кагами насквозь и любит пошутить по этому поводу) и плохо готовит, отчего немного комплексует, так как считает, что должна быть идеалом и примером для подражания своей младшей близняшке Цукасе.
Так же как и Коната, Кагами любит видеоигры, но в отличие от Конаты, поклонницы дейт-симов и РПГ, предпочитает скролл-шутеры. Она любит читать ранобэ.
Сэйю: Эмири Като.

Цукаса Хиираги (яп. 柊 つかさ Хиираги Цукаса)
Цукаса — младшая сестра-близнец Кагами и живет вместе со своими родителями и двумя старшими сестрами. Она учится в том же классе, что и Коната. Она великолепно готовит, но не очень хороша в учебе и спорте. Она добрая, слегка глуповатая, но крайне старательная девочка, которая очень расстраивается, когда её постоянно сравнивают с сестрой, которая во многих вещах лучше неё. Цукаса не всегда способна уловить суть разговора, так как имеет обыкновение витать где-то в облаках. Она часто просит свою старшую сестру помочь ей с домашними заданиями, хотя до этого честно пытается сделать все сама.
Цукаса также известна из-за своей прически, так как она полностью идентична с прической Акари Камигиси из аниме «To Heart».
Сэйю: Каори Фукухара.

Миюки Такара (яп. 高良 みゆき Такара Миюки)
Миюки — девушка из богатой семьи, она красивая, умная, обучена хорошим манерам. Она говорит на исключительно вежливом, литературном японском, даже если общается с близкими друзьями. Она была президентом класса в её первый год, в то же время она подружилась с Кагами. Сейчас Миюки учится в одном классе с Конатой и Цукасой. Одноклассники Миюки постоянно просят ее помочь им с учебой, и она всегда без подготовки может дать точный, с энциклопедическими определениями, ответ по различным неясным вопросам. Она также не любит мороженое, так как от этого могут испортиться зубы.
Живое воплощение стиля моэ. Она боится контактных линз, поэтому носит очки. Ее зрение меньше чем 0.1, хотя оно было хорошим до того когда она начала читать книги в темноте, после того, как её мать засыпала, не дочитав ей сказку до конца. Миюки любит поспать, поэтому она всегда ложится очень рано. Она ненавидит визиты к стоматологу, но ей приходится ходить на лечение, иначе она рискует потерять пломбу из-за кариеса. Иногда она играет в видеоигры (Пасьянс, Сапер и т.п.). Из-за её стиля моэ, Миюки часто становится жертвой поддёвок Конаты.
Сэйю: Ая Эндо.

Показать/Скрыть описание

Сюжет

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

Показать/Скрыть описание

Источники: Лукоморье, Википедия

DFAGDJHKJKHLKJ

Самые популярные посты

6

Ухожу отсель, гнилой сайт.

5

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

5

Фестиваль "Ночь музеев"

В ночь с 14 на 15 мая в Харькове прошел городской фестиваль под названием "Ночь музеев". Организатором фестиваля выступила художественная...

5

Создание шаблона Viewy - Урок 2 - Часть 2: CSS, имен...

После изучения блоков необходимо рассмотреть как один блок отличать от другого. Этим и займемся. (P.S.: Полный текст поста можно посмотр...

5

PUR:PUR

«Pur:Pur» - украинская группа из Харькова, основана в феврале 2008 года. Именно тогда Ната Смирина и Евгений Жебко выложили н...

5

Самая сложная в мире головоломка

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