Новая социальная сеть google+, мое мнение.

Опубликовано 6 Июль 2011 автором Дмитрий Ченгаев
Рубрика: Новости | Комментарии (14)

Скорее всего, вы уже в курсе, что компания google выпустила новую социальную сеть «Google+». Сразу я не придал этому событию особого значения. Что здесь такого, вышла еще одна социальная сеть, которых в настоящее время просто множество: одноклассники, вконтакте, facebook, twitter и теперь к ним прибавляется google+?

Появилась кнопочка google +1, которую вы можете видеть на самом верху этой страницы. Что здесь такого, у каждой социальной сети есть свои кнопочки?

На первый взгляд событие вполне обычное, но посмотрите на статистику запросов в Интернет.



Более 5 млн. показов! Вау!

Это уже о чем-то говорит. Сейчас многие гуру Интернета пророчат этой социальной сети большой успех и предсказывают, что времена facebook скоро пройдут.

Что же такого удивительного и нового в этой сети? Почему она получает такую популярность?

Для начала ссылочка на регистрацию и описание сервиса:

https://plus.google.com/up/start

Вот несколько причин, которые по моему мнению сделали google+ таким популярным:

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

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

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

Для решения этой задачи предлагаются самые разные решения и инструменты:

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

Интересно, что это еще довольно красиво визуально оформлено и добавить человека в круг можно перетаскиванием мышки.

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

+ Чат, видеовстречи, простота и легкость, с которой можно делиться информацией, обещает многое.

Ну, что ж, остается ждать. Посмотрим, каких результатов сможет добиться google+. Хотя, мне кажется, что интересная идея, с возможностями Google обязана получить успех.

Как изменить курсор мыши на сайте.

Опубликовано 3 Июль 2011 автором Дмитрий Ченгаев
Рубрика: CSS | 1 комментарий

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

В общем-то, на этом весь выбор и ограничивается.

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

Соответственно, возникает вопрос, как это сделать и какими средствами?

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

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

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

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

Поэтому пользуйтесь такой возможностью с осторожностью.

Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:

 cursor: [ url ("путь к курсору"),] | [ auto | crosshair | default |
 e-resize | help | move | n-resize | ne-resize | nw-resize | pointer |
 progress | s-resize | se-resize | sw-resize | text | w-resize | wait |
 inherit ]

Из этого выражения следует, что курсор мыши может быть либо:

1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;

2) Взят из специального файла с изображением курсора

3) Наследован от родительских элементов.

Внешний вид курсора мыши из списка ключевых слов:

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

Каждому значению соответствует определенное отображение курсора.

В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.

<p style="cursor:wait;">Текст абзаца</p>

Внешний вид курсора мыши из файла:

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

Файлы с изображениями для курсоров можно без проблем найти в Интернете.

Вот пример, как можно воспользоваться такой возможностью.

<p style="cursor:url('name.cur')">Текст абзаца</p>

Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.

Наследованный внешний вид курсора:

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

<div style="cursor:crosshair">
<p >Текст абзаца</p>
</div>

Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем <p>, курсор меняет свое оформление.

Отсюда следует, что свойство cursor наследуется и если его задать для тега body, то внешний вид курсора будет изменен для всей веб-страницы целиком.

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

Если вы хотите узнать о более продвинутых возможностях, которые может позволить вам технология CSS, то можете познакомиться с моим «Базовым Курсом По CSS».

Что еще почитать?

Реальные примеры сайтов, которые используют CSS.

Выравнивание блока div со свойством position:absolute или fixed по центру.

Как создать фиксированную кнопку на сайте?

Универсальный тег input для создания элементов веб-форм.

Опубликовано 29 Июнь 2011 автором Дмитрий Ченгаев
Рубрика: HTML | Комментарии (4)

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

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

Каким же образом из одного тега можно получать сразу несколько элементов?

На самом деле все очень просто. Задавая различные значения специальному атрибуту «type», мы можем преобразовывать этот тег в разные элементы форм.

Давайте рассмотрим на примерах, какие элементы мы можем создавать:

(Можете открыть свой html-редактор и попробовать создать эти элементы на практике)

1 класс элементов. Текстовые поля.

1) Текстовое поле.

<input type="text">

2) Поле с паролем.

<input type="password">

Специальные атрибуты для текстовых полей:

1) size – задает ширину для текстовых полей.

2) maxlength – задает максимальное количество символов, которые возможно ввести в текстовое поле.

3) value – задает значение по умолчанию для текстового поля

4) disabled – блокирует доступ к текстовым полям и их изменение

Пример:

<input type="text" value="Пробный текст" size="50″ maxlength="12″ disabled="disabled">

Или

<input type="password"  value="Пробный текст" size="50″ maxlength="12″ >,

2 класс элементов. Переключатели.

1) Переключатель radio

<input type="radio">

2) Переключатель checkbox

<input type="checkbox">

Специальные атрибуты для переключателей:

1) checked – указывает, какой из переключателей должен быть предварительно выбран.

2) disabled – блокирует доступ к текстовым полям и их изменение

Пример:

<input type="radio" checked="checked"> Первый

<input type="radio"> Второй

<input type="radio"> Третий

Или

<input type="checkbox" checked="checked"> Первый < br>

<input type="checkbox" checked="checked"> Второй < br>

<input type="checkbox"> Третий

3 класс элементов. Кнопки.

1) Кнопка

<input type="button" value="Надпись">

2) Кнопка для отправки данных формы

<input type="submit">

3) Кнопка для очистки данных в полях формы:

<input type="reset">

4) Кнопка с изображением

<input type="image" src="download1.jpg">

Атрибут src указывает адрес до графического файла с изображением.

5) Кнопка для выбора и отправки файла

<input type="file">

Атрибуты:

1) value – задает значение, которое будет отображаться в качестве надписи на кнопке.

2) disabled – блокирует доступ к текстовым полям и их изменение

4 класс элементов. Скрытое поле.

1) Скрытое поле (визуального эффекта на странице видно не будет, но информация, которая будет храниться в этом поле, будет передана в программу, которая будет обрабатывать  форму)

<input type="hidden">

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

Страница 4 из 36« К первой...345102030...К последней »