in.uCoz.org

API Табло

Reactor — Mon, 10 Mar 2014 17:15:42 GMT

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

Более высокая кликабельность настроенных виджетов в сравнении с закладками и виджетами, созданными автоматически.

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

Владелец сайта (вебмастер) может настроить внешний вид виджета своего сайта. Для этого необходимо создать манифест виджета и разместить ссылку на манифест на каждой странице сайта.
Ссылка на манифест размещается в HTML-коде страницы, внутри тега :

Код

т.е.

Код

где manifest.json — URL, по которому можно загрузить виджет.
Виджеты в Табло обновляются с определенным интервалом.

Требования к оформлению виджетов

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

Формат: PNG.
Фон: прозрачный.
Ширина: макс. 150 пикселей.
Высота: макс. 60 пикселей.
Логотип должен гармонировать с цветом заливки виджета.
Не следует стремиться заполнить логотипом все допустимое пространство на виджете. Основной индикатор — это цвет виджета, логотип служит лишь дополнением.

Рекомендуемые размеры логотипа относительно виджета показаны на рисунке:

Длинные горизонтальные логотипы: ширина до 150 пикселей, высота до 20 пикселей.
Короткие горизонтальные логотипы: ширина до 100 пикселей, высота до 30 пикселей.
Квадратные логотипы могут быть до 50 пикселей в высоту.
Слишком большой логотип:Удачный размер логотипа:

Иконки для уведомлений, отображаемых на виджете, должны отвечать следующим требованиям:
Параметры иконкиШирина, макс.14 пикселейВысота, макс.14 пикселейРазмер, макс.10 КБПримечание. Подробнее об уведомлениях и их описании см. раздел Поле feed (передача уведомлений на виджет).

Примеры виджетов
Сайт facebook.com yandex.ru afisha.ru lenta.ru
Цвет заливки #3b5998 #ffffff #ce2125 #efeddf
Фон виджета

Логотип

Результат

Манифест — это JSON-файл следующей структуры:
создайте документ и назовите его - manifest.json

Код

{
    "version": "1",
    "api_version": 1,
    "layout":
{
    "logo": "ССЫЛКА НА ЛОГОТИП",
    "color": "#НОМЕР ЦВЕТА",
    "show_title": false
}

}

№2 Урок по Adobe Photoshop для начинающих [Рисуем макет]

Reactor — Tue, 11 Feb 2014 16:15:38 GMT

Это не обычный урок, урок будет разделен на 3 этапа:
1-й - рисуем в фотошопе макет будущего сайта с нуля.
2-й - верстаем наш макет.
3-й - ставим наш шаблон на сайт uCoz.

Скачать макет и все используемые материалы в макете - Скачать

Смотреть на youtube урок - Ссылка

HTML 5 и CSS 3

Reactor — Thu, 09 Jan 2014 09:00:57 GMT

Всем привет, в этому уроке я научу вас HTML 5 и CSS 3.

Если вы хорошо освоились с блочной версткой, то Вы сможете понять этот урок.
Итак, начнем.

Для начала создаем 2 текстовых документа:
index.html
style.css

Создали? Отлично!

В HTML 5 нам сразу бросается тег
в html 5 его упростили, теперь не нужно вводить длинный текст, как было раньше.
" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"

теперь нужно писать так:

и браузер поймет, что вы используете HTML 5

Прежде всего исчезли некоторые элементы представления. Если они встречаются в вашем коде, избавьтесь от них!
Замените их семантически правильными элементами и придайте им нужный вид средствами CSS:

basefont;
big;
center;
font;
s;
strike;
tt;
u.

Некоторые их этих тегов встречаются относительно редко, но теги font и center присутствуют во многих страницах, для работы с которыми используются визуальные редакторы вроде Dreamweaver.

Еще некоторые элементы исчезают из-за появления более совершенных заменителей:

acronym заменяется на abbr;
applet заменяется на object;
dir заменяется на ul.

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

align;
атрибуты link, vlink, alink и text тега body;
bgcolor;
height и width;
атрибут scrolling элемента iframe;
valign;
hspace и vspace;
атрибуты cellpadding, cellspacing и border тега table.

Существует одно серьезное "Заболевание", которому подвержены многие веб-разработчики нашего времени. Вокруг нас бушует эпидемия дивита - хронического синдрома, который заставляет людей упаковывать элементы в лишние теги div с идентификаторами banner, sidebar, article, footer и т.д.
Заболевание в высшей степени заразное. Разработчики быстро подхватывают дивит друг от друга, а так как лишние теги div не видны невооруженным глазом, легкие случаи дивита могут оставаться назамеченными годами.
Типичные проявление дивита выглядит так:

Код

Теперь перейдем непосредственно к самому html 5.

Все начинается с правильной директивы doctype

Код

         Наша первая верстка на HTML 5 и CSS3

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

Код

HTML 5 and CSS3

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

Что такое тэги?

Prosvetekvator — Mon, 30 Dec 2013 10:46:27 GMT

Теги - это некоторые ключевые слова, метки и маркеры которые применяются при создании веб страниц. Каждый из них имеет свое индивидуальное название и функцию.
Теги заключаются в угловые скобки "<" и ">" и в отличии от javascript регистр букв не имеет значения.
В зависимости от типа тега, могут быть три вида формата:

<Тег>
<Тег>…
<Тег атрибут="аргумент">…

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

Блочная верстка

Reactor — Sat, 28 Dec 2013 13:34:00 GMT

Шаблон вебсайта мы будем делать с помощью блочной верстки, использую тег – «DIV».

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

HTML - это язык разметки гипертекста. С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".

Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например:

). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.

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

Для начало, напишем простые теги нашей страницы

Код

Важным тегом для структурирования страницы является тег

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

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

Примерно так, выглядит наша страница написанная на div'ax

Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div:

Код

Как видите, каждому тегу div мы дали определенный селектор ID. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.

Существует два вида селекторов. ID - используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS - применятся для обозначения повторяющихся блоков.
Также, мы заключили все блоки внутрь блока "container". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим.

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

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

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

Код

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

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

Для записи селекторов, кроме тега body, используются знаки "#" либо ".". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID, второй, соответственно на селктор CLASS. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{}".

У нас имеются следующие селекторы:

Код

body  container
   header
   navigation
   menu
   content
   footer

Нам нужно задать им стили.

Свойства и возможные значения CSS:

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).
Свойство color используется для определения цвета текста.

font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size - размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

margin - определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности.

width - ширина блока.

height - высота.

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

Пишем в файлике "style.css"

Код

body { background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}

Сохраняем и открываем в браузере наш "index.html" файл и смотрим результат Если что-то не получилось или есть вопросы, задавайте, ответим.

В следующем уроке, я научу Вас HTML 5 и CSS 3.

Табличная верста шаблонов на Ucoz

Reactor — Thu, 26 Dec 2013 14:28:35 GMT

Здравствуйте всем, эта тема посвящена для новичков ucoz'a а так же новичков в html. Для этого урока, вам нужно знать хотя бы азы html.
Сегодня мы рассмотрим табличную верстку шаблонов для "Конструктор шаблонов", ucoz'a.
Итак, начнем.

Сначала пишем теги юкоза, они нужны для деления вашего шаблона на части после создания шаблона. Делит он на: header (Верхняя часть сайта); middle (Страница сайта); container (Левый контейнер) P.s если вы прописывайте еще раз контейнер, то будет два контейнера, т.е (Левый контейнер, правый контейнер), подробности смотрите внизу; footer (нижняя часть сайта); popupe (профиль пользователя).

Пишем

Код

[TITLE]

- начало самой начинки сайта. Если хотите сделать фон цветом, то нужно писать так , а если картинку, то












$POWERED_BY$ - копирайт юкоза, его нужно ставить обязательно, иначе вы не создадите дизайн.

Итак, мы написали каркас для нашего дизайна.
Теперь вставляем код.

Код

[TITLE]

TITLE

CONTENT

[BODY]

$POWERED_BY$

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

Код

TITLE

CONTENT

[BODY]

Написали код контейнера в тегах

Теперь мы пишем код футера и код профиля.

Код

[TITLE]

TITLE

CONTENT

[BODY]

Design by in.ucoz.org

$POWERED_BY$

[BODY]

Итак, мы написали футер в тегах
А так же написали код для профиля в тегах
Мы сверстали наш первый шаблон! Если у вас все получилось радуйтесь и экспериментируйте. Если же я где-то ошибся просьба подправить.

А в следующем уроке, я научу Вас верстать блочной версткой тобишь

Спасибо за внимание!

Предложение по этому разделу

Razip — Mon, 02 Dec 2013 11:26:19 GMT

По моему, было бы лучше если бы ты сделал темы по тегам. То есть, например: тег meta, и перечисляешь его атрибуты. Вот например сейчас, тяжело понять по названию темы — атрибут charset это атрибут meta или a? Более того, это не единственный случай.

Href

Prosvetekvator — Thu, 09 May 2013 12:08:27 GMT

Описание:
Атрибут href передает адрес страницы на которую следует перейти. В зависимости от исходного файла, будет различным результат перехода, страницы открываются во вкладке браузера, а файлы с расширением .exe .rar .zip будут сохраняться на жесткий диск. Взаимодействие с атрибутом target дает возможность открывать ссылки в текущем или новом окне.

Пример:

Код

Название ссылки

Важно!!!
При создании ссылок закрывающий тег обязателен.

Prosvetekvator — Sat, 04 May 2013 15:57:26 GMT
Описание:
Тег audio воспроизводит аудио файлы на веб странице. Между и можно прописать текст, он будет отображаться в браузерах которые его не поддерживают. Путь к аудио файлу задается с помощью атрибута src.

Пример:

Код

Тег audio не поддерживается вашим браузером. Скачайте музыку.

Атрибуты:
autoplay - задает авто воспроизведение после загрузки страницы.
controls - добавляет панель управления.
loop - добавляет замкнутый цикл воспроизведения.
preload - загружает аудио файл вместе с загрузкой веб страницы.
src - указывает путь к файлу.

Prosvetekvator — Sat, 04 May 2013 15:33:15 GMT
Описание:
Тег aside определяет блок сбоку от контейнера на подобии сайд бара, он служит для размещения меток или рубрик.

Пример:

Код


Экономьте электричество

Хороший язык

Чья палка больше


Атрибуты:

accesskey - активирует ссылки сочетанием клавиш.
contenteditable - сообщает, что элемент доступен для редактирования пользователем.
contextmenu - устанавливает контекстное меню для элемента.
class - определяет имя класса.
dir - задает направление и отображение текста — слева направо или справа налево.
id - указывает имя стилевого идентификатора.
hidden - скрывает содержимое элемента от просмотра.
lang - браузер использует значение параметра для правильного отображения некоторых национальных символов.
spellcheck - указывает браузеру проверять или нет правописание и грамматику в тексте.
style - применяется для определения стиля элемента с помощью правил CSS.
tabindex - определяет последовательность переходов между ссылками при нажатии на кнопку
title - выводит всплывающую подсказку к ссылке.