» » WEB Инструменты онлайн-бизнеса (2015)(видеокурс)

WEB Инструменты онлайн-бизнеса (2015)(видеокурс)

WEB Инструменты онлайн-бизнеса (2015)(видеокурс)

Инструменты онлайн-бизнеса.

Список Видео уроков:
1. Видеоурок - "Плавающее меню на jQuery"
Очень часто, на многих сайтах, можно встретить так называемые "плавающие" меню или их еще называют фиксированными меню. Логика этих менюшек заключается в следующем, когда загружается сайт, меню располагается на своем месте, но стоит начать прокручивать страницу вниз, как данное меню занимает верхнее, фиксированное положение в окне браузера и плывет по экрану. Если же прокручивать страницу вверх, то данное меню также плывет до тех, пор пока не достигнет своего начального положения. Более наглядно работу этого меню, вы можете посмотреть, кликнув по кнопке "Посмотреть демо".
При использовании плавающих меню, у посетителя возникает возможность всегда иметь доступ к ссылкам меню, независимо от местоположения этого пользователя на странице. Разумеется это очень удобно.
В данном уроке, мы с вами реализуем такую менюшку на примере горизонтального меню. Но разумеется подобный "плавающий" эффект можно задавать не только для меню, его можно задать для любого блока на странице вашего сайта.
Делать мы все будем средствами jQuery. Потому что, это самый простой способ, ведь скрипт занимает всего лишь несколько строк кода.

2. Видеоурок - "Как зарегистрировать домен?"
Домен - это имя сайта, такое как "webcareer.ru" или "alexanderpaukov.com". И поэтому, если вы решили создать свой сайт или блог и разместить его в интернете, то вам обязательно потребуется зарегистрировать свой домен.
Прежде, чем приобрести домен, вам необходимо решить в какой зоне вы будете его регистрировать, в .RU, .COM, .NET и т.д. После этого вам нужно придумать само название домена. При этом, обращаю ваше внимание, название домена должно быть уникальным, т.е. в одной зоне не может быть два одинаковых домена.
Специально для тех, кто еще не умеет регистрировать домен, я записал данный видеоурок. В нем мы на реальном примере, с помощью регистратора 2domains.ru, зарегистрируем домен в зоне .RU.

3. Видеоурок - "Flowplayer: видеоплеер для сайта"
Иногда на сайте требуется разместить какой-либо видеоролик. И чтобы это сделать, есть несколько путей.
Первый, это воспользоваться бесплатным видеохостингом, например: YouTube, Vimeo и прочие. Вы загружаете туда свое видео, получаете специальный код и размещаете его на своем сайте, вот и все.
Второй, это использовать видеоплеер на своем сайте. В таком случае, у вас есть больше преимуществ, вы можете изменить дизайн плеера под себя и у таких плееров больше настроек и более расширенный функционал.
В рамках данного урока, мы с вами разберем один из таких плееров, он называется Flowplayer. Это очень красивый, гибкий и функциональный плеер, который предназначен для воспроизведения видеороликов на страницах сайта.
Данный плеер доступен в двух версиях: Flowplayer HTML5 и Flowplayer Flash.

Как разместить Flowplayer HTML5
Flowplayer HTML5 - это плеер, который размещает видео на сайте с помощью тега video (данный тег появился в HTML5). Главный плюс этого плеера в том, что видео размещенное таким образом могут просматривать пользователи, как простых персональных компьютеров, так и планшетов и смартфонов. Что на данный момент является очень актуально.
Из минусов можно подчеркнуть тот факт, что старые версии браузеров, не поддерживают тег video и поэтому данный плеер в них работать не будет.

Как разместить Flowplayer Flash
Flowplayer Flash - это плеер, который размещает видео с помощью Flash. Этот подход потихонечку устаревает, но из-за того, что Flowplayer на HTML5 не поддерживают старые браузеры, Flowplayer Flash является еще актуальным.

4. Видеоурок - "Стилизация checkbox и radio-кнопок на jQuery"
Стандартные чекбоксы и радио-кнопки в каждом браузере имеют свой внешний вид. И главная их особенность, заключается в том, что они не поддаются стилизации, т.е. вы не сможете кроссбраузерно изменить их внешний вид, задать рамку, изменить размеры, фон и т.п. В данном уроке, мы с вами поговорим о том, как эту проблему можно решить с помощью jQuery.

5. Видеоурок - "Центрируем элемент переменной ширины"
Если вы занимаетесь версткой сайтов, то возможно вы встречались с ситуацией, когда требуется выравнять по центру элемент с неизвестной шириной.
То есть, в классической ситуации, если требуется отцентровать элемент, мы для него должны задать свойство margin: 0 auto; и собственно конкретную, фиксированнйю ширину. В этом случае, наш элемент будет располагаться по центру.
Но что делать, если элемент не имеет фиксированной ширины? И его ширина при изменении контента может, либо увеличиваться, либо уменьшаться. При этом, данный элемент должен обязательно располагаться по центру.

6. Видеоурок - "Аудиоплеер для сайта"
В этом видеоуроке мы с вами научимся встраивать аудиоплеер на страницы своего сайта. Данный плеер может проигрывать аудио в формате mp3. Поэтому его можно легко использовать на сайте для воспроизведения различных подкастов и т.п. К тому же, вес этого плеера ничтожно мал, что также является его плюсом.
Плеер, который мы встраивали на сайт, работает с помощью технологии Flash. Если же, вы хотите добавить на сайт возможность проигрывать аудио с помощью HTML5, то я вам советую почитать статью про это.

7. Видеоурок - "CSS спрайты. Создание и использование при верстке"
Спрайт - это одно большое изображения, которое в себя включаем несколько графических элементов используемых на сайте. То есть, все иконки, элементы интерфейса и другое, объединяют в одну картинку. Затем, с помощью CSS, эту картинку задают в качестве фонового изображения и благодаря background-position позиционируют ее, чтобы отобразить требуемый участок спрайта.
Для чего применяют спрайты? Дело в том, что применение спрайтов сильно ускоряет время загрузки веб-страницы, т.к. каждое изображение загружается не по отдельности, а в виде одной картинки (спрайта).
В этом уроке я рассказал, как можно создать спрайт в фотошопе, но на самом деле, для этих целей есть целые сервисы.

8. Видеоурок - "Верстаем меню для сайта"
В этом уроке, мы с вами поговорим о том, как сверстать верхнее меню, аналогичное тому, которое находиться на моем блоге (под хедером).
Это меню, мы будем верстать используя CSS3 и за счет этого научимся на практике применять некоторые современные CSS-свойства.
Наш урок состоит из 2-х видео. В одном, мы с вами, верстаем пункты меню, а во втором, делаем форму поиска.

Пару слов о кроссбраузерности
Так как, мы с вами применяли свойства из CSS3, такие как, text-shadow, box-shadow, border-radius, то разумеется старые версии браузера Internet Explorer не будут нормально отображать наше меню. То есть, более-менее корректно, наше меню будет отображаться начиная с версии IE9.
Если вам требуется поддержка старых браузеров, то для них вам придется написать отдельную таблицу стилей и подключать ее через условные комментарии.

9. Видеоурок - "Сайт с WWW и без"
Уверен, что многие из вас понимают, что сайт "webcareer.ru" и "www.webcareer.ru" - это один и тот же сайт. То есть, независимо от того, указали вы адрес с WWW или без, вы все равно попадете на один и тот же ресурс.
Однако, поисковики так не считают. Для них сайт указанный с WWW и указанный без WWW - это два разных сайта.

10. Видеоурок - "Всплывающее окно на jQuery"
Я думаю, что вы уже довольно часто встречали на многих сайтах, так называемые всплывающие окна или их еще называют popup-окна. Как правило, они применяются для размещения рекламы или различных форм подписки, регистрации, авторизации и т.д.
Чтобы создать такие всплывающие окна, можно воспользоваться готовыми решениями, т.к. на данный момент существует огромное количество всяких jQuery плагинов для этого.
Но я решил посвятить данный урок, не разбору готовых плагинов, а реализации такого всплывающего окна с нуля.

Что касается кроссбраузерности, то данный popup работает в:
Internet Explorer 7+
Chrome
Firefox
Opera
Safari
Яндекс Браузер
Поэтому можете смело применять его на своих сайтах и не бояться за кроссбраузерность.

11. Видеоурок - "Как добавить социальные кнопки на сайт"
Сегодня кнопки от разных социальных сетей присутствуют практически на любом сайте. Ведь данные кнопки позволяют вашему посетителю поделиться понравившейся статьей в своих социальных сетях, просто кликнув по кнопке соответствующей соцсети, например: ВКонтакте, Facebook, Twitter и тд.
Так как ссылка на ваш сайт размещается в профиле соцсети данного пользователя, то за счет этого, вы получаете дополнительный трафик на свой сайт. Поэтому ставить соцкнопки нужно обязательно.
Сделать вы это можете вручную, взяв код этих кнопок у каждой социальной сети в отдельности. Но на данный момент существует большое количество сервисов, которые упрощают данную работу и с помощью которых, вы сможете установить соцкнопки буквально за пару минут.
В данном уроке у нас речь пойдет об одном из таких сервисов, который называется Pluso ( http://share.pluso.ru ). И здесь вы узнаете, как установить социальные кнопки на свой сайт.

12. Видеоурок - "Google Fonts и подключение к сайту"
Многие из вас, наверно, хотят создавать свои сайты более красивыми и современными. Одним из основных факторов, который влияет на красоту и внешний вид сайта – это шрифт, который вы используете.
Я думаю, многие знают, что стандартных кириллических шрифтов, которые есть в Windows не так уж и много. К этим шрифтам относят: Arial, Tahoma, Verdana, Georgia, Times New Roman и др. И на большинстве сайтов обязательно используется один из них.
Но что делать, если вы захотите использовать на своем сайте нестандартный шрифт?
Ответ прост. В этом нам поможет сервис Google Fonts ( http://www.google.com/fonts ).

13. Видеоурок - "Как сделать текст с тенью на CSS"
Многие веб-дизайнеры при создании макета сайта, любят задавать для текста различные эффекты, такие как текстовая тень. Потому что это очень сильно улучшает внешний вид сайта. Верстальщикам же, для реализации текста с тень, раньше приходилось этот текст растрировать и использовать на сайте в виде обычного изображения.
Но с приходом CSS3 все кардинально изменилось. Теперь появилось новое свойство text-shadow, с помощью которого можно задавать тень для текста.

14. Видеоурок - "Placeholder jQuery — Замещающийся текст"
При верстке форм очень часто приходится использовать замещающийся текст. Я думаю, что вы на многих сайтах это встречали, когда по умолчанию в поле ввода написан некий текст, но стоит кликнуть по данному полю, как текст автоматически исчезает и вы можете вводить туда, все что угодно.
В HTML5 для реализации этого, есть замечательный атрибут placeholder, который задает текст-подсказку внутри элементов ввода.

15. Видеоурок - "Как сделать выпадающее меню на CSS"
В данном видеоуроке у нас речь пройдет про создание горизонтального, выпадающего меню. Делать мы его будем на чистом CSS, поэтому всяких классных эффектов при появлении списка, типа выплывания или плавного появления здесь не добиться. Если вы хотите создать меню с подобными эффектами, то для этих целей используйте jQuery.
Мы же с вами обойдемся лишь средствами CSS.
Создавать мы будем 2-х уровневое меню, т.е. в нем будет присутствовать 2 выпадающих списка. Но разумеется, количество этих уровней вы можете создать сколько угодно.
Что касается кроссбраузерности, то данное меню работает в Firefox, Opera, Chome, Safari, IE8+, поэтому вы можете его спокойно применять на своем сайте.

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

Все эти способы мы будем разбирать на примере 3-х колоночного сайта (разумеется их можно применять и для 2-х колоночных сайтов тоже).

В данном уроке я разобрал наиболее частые способы:

Способ 1 – Использование javascript
Способ 2 – Использование свойства display: table
Способ 3 – Использование padding + margin + overflow

Разумеется существуют и другие, более экзотические способы, но на мой взгляд у многих из них есть куча недостатков. Например, в некоторых случаях приходится изменять HTML-разметку, что естественно усложнить читабельность кода или приходится применяется дополнительное изображение в качестве фоновой картинки, что также не является хорошим способом.
В любом случае, как вы поняли, отличного решения, которое на 100% избавит от проблемы – нет, поэтому приходится выбирать наиболее оптимальное из того что есть.

17. Видеоурок - "Валидация email на jQuery"
Очень часто при создании форм регистрации, требуется проверить валидность (правильность) введенного email. Это необходимо, чтобы пользователи не могли писать несуществующие email адреса. Разумеется полную проверку email необходимо производить на стороне сервера (после того, как форма была отправлена). Но ведь и перед отправкой формы, email лучше проверить на стороне клиента. Чтобы в случае неправильного ввода, пользователю было выведено специальное сообщение и он сразу же мог исправить свой email.
Именно о проверке email на стороне клиента и пойдет речь в данной статье. Реализовывать мы это будем на jQuery, поэтому чтобы вы все поняли, желательно знать базовые особенности работы с этим фрейворком.

18. Видеоурок - "8 сервисов поиска иконок"
Иконки стали незаменимым элементом интерфейса практически любого сайта. И когда вам требуется на сайт установить какую-нибудь новую иконку, то вы можете попробовать нарисовать ее в Photoshop, но к сожалению такая затея отнимает много времени.
Чтобы сэкономить время, можно запросто воспользоваться уже готовыми иконками. Но вот проблема, где же найти их? И на самом деле решение очень простое, для этого можно воспользоваться сервисами поиска иконок. И в данной статье я представлю 8 самых популярных сервисов, где вы можете в считаные минуты найти подходящую иконку для своего сайта.

19. Видеоурок - "Глобальные переменные в PHP"
В PHP существует несколько видов переменных – это глобальные и локальные. И многие начинающие программисты не понимают в чем их разница, поэтому в данной статье я попытаюсьвсе это на примерах объяснить.
Глобальные переменные – это переменные, которые доступны на протяжение всего скрипта, в том числе и в теле пользовательских функций.

20. Видеоурок - "jQuery Cookies. Работа с куками на jQuery"
Установка и удаление cookies (куков) при помощи обычного javascript довольно неудобный процесс. Поэтому для облегчения данной задачи, большинство веб-мастеров используют специальный jQuery плагин, с помощью которого работа с куками осуществляется очень легко.

21. Видеоурок - "Какой DOCTYPE выбрать ?"
Многие начинающие верстальщики задают вопрос: Какой DOCTYPE использовать при верстке страницы? И не зная ответа, они либо просто копируют его с какого-нибудь сайта, либо не задумываясь оставляют тот DOCTYPE, который им по умолчанию прописал HTML-редактор в котором они работают, такой как Dreamweaver или аналогичные.

22. Видеоурок - "Меняем внешний вид полосы прокрутки"
23. Видеоурок - "Стилизация checkbox и radio кнопок на jQuery"
24. Видеоурок - "Как добавить таймер обратного отсчета"

25. Видеоурок - "Вертикальное центрирование с помощью CSS"
Горизонтальное центрирование выполнить очень легко, если мы имеем дело с блочным элементов, то для этого достаточно задать ширину данному элементу и также левый и правый отступы в значение auto, тогда наш блок примет центральное положение. Если мы имеем дело со строчным элементом, то для его родителя можно задать text-align в значение center и тогда данный элемент также выровняется по центру.
Но, к сожалению, с вертикальным выравниванием не все так просто и поэтому у начинающих верстальщиков из-за этого может возникнуть ряд сложностей. Чтобы избавить вас от этих проблем, я записал видеоурок, где расскажу о самых лучших способах вертикального центрирования, которые применяются на практике.

26. Видеоурок - "Создание FAQ на jQuery"
В данном уроке мы с вами создадим страничку ответов на частые вопросы (FAQ). Результат нашей работы, вы можете посмотреть, кликнув по кнопке "Демо" http://demo.webcareer.ru/2014/09/faq/index.html.
Для реализации, мы не будем использовать какие-то готовые плагины, мы все напишем с абсолютного нуля и конечно же, разберем каждый шаг максимально подробно.

27. Видеоурок - "Слайдер на jQuery"
В данном уроке, мы с вами создадим слайдер для нашего сайта. Вообще, для работы со слайдерами существует огромное количество готовых jQuery плагинов, но наиболее популярным среди них, является плагин bxSlider ( http://bxslider.com/), именно о нем у нас и пойдет речь в данном уроке.
bxSlider обладает целым рядом возможностей, является адаптивным и при этом может использоваться, как для создания слайдера изображений, так и для создания слайдера любого другого контента.
Demo - http://demo.webcareer.ru/2014/09/bxslider/index.html

28. Видеоурок - "Стилизация select на jQuery"
Не так давно, мы с вами разбирали, как можно изменить внешний вид тега select с помощью обычного CSS. Но как показала практика, с помощью CSS можно лишь частично поменять его вид, если же вам требуется тотальное изменение дизайна тега select, то тут стоит применять jQuery, по другому никак.
На jQuery написана куча плагинов, реализующих данную задумку, но мы с вами остановимся на одном из них, это плагин jQuery Selecter.

29. Видеоурок - "Видеофон для сайта (Video Background)"
Иногда на промо-страничках или landing page, применяют такое интересное решение, как видеофон (video background). Главный плюс такого эффекта - это выделиться среди конкурентов. Ведь ваша страничка станет более необычной, чем у всех остальных.
Но естественно, у видеофона есть и ряд недостатков и главный из них, это то, что страница сайта будет дольше грузиться, но если применять данную фишку рационально, то все недостатки можно свести к минимуму.

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

31. Видеоурок - "Clearfix на CSS"
При использовании свойства float, многие новички сталкиваются с целым рядом проблем. В основном эти проблемы вызваны непониманием принципа работы свойства float и способа отмены обтекания, которое возникаем в результате применения данного свойства.

32. Видеоурок - "Как прижать футер к низу страницы"
В этом уроке мы с вами поговорим, как сделать «липкий» подвал (футер) на сайте. Сделав такой футер, мы заставим его прижиматься к нижней границы окна браузера и таким образом, футер не будет подниматься вверх, если контента на странице слишком мало. Если же контента на странице много, то «липкий» футер будет себя вести, как обычно.

33. Видеоурок - "Полосатая таблица"
Очень часто, верстая таблицы, их приходится делать в виде «полосатых таблиц» — это когда цвет рядов чередуется друг за другом. Данный подход помогает представить табличный контент в более читабельном и наглядном виде. В данной статье мы научимся создавать такие таблицы.

34. Видеоурок - "Animate.css в примерах"
В данном уроке мы с вами познакомимся с очень интересным инструментом под названием animate.css. Это уже готовая CSS таблица стилей, которая в своем арсенале имеет свыше 50 различных эффектов и все эти эффекты реализованы на CSS3.

35. Видеоурок - "Masonry — вывод блоков в виде кирпичной кладки"
В этом уроке у нас пойдет речь про скрипт Masonry. C его помощью мы можем выводить наши блоки в виде так называемой кирпичной кладки, это когда у нас есть множество блоков, разных по высоте, но при этом все эти блоки компактно расположены друг под другом и занимают все возможное пространство по вертикали.

36. Видеоурок - "Стилизация Input File"
Есть куча способов изменить стандартное оформление Input File, но к сожалению, многие из них оказываются слишком громоздкими и зачастую не кроссбраузерными. Поэтому я решил поделиться с вами, наиболее оптимальным решением.

37. Видеоурок - "Анимированное увеличение чисел на jQuery"
Анимированное увеличение чисел (далее счетчики) сейчас можно встретить на многих сайтах, ведь с их помощью можно отобразить числа в более интересной и привлекательно форме. Данный эффект выглядит, как плавное увеличение числа от 0 до какого-то конечного числа. Я уверен, что вы уже неоднократно встречали подобные счетчики. Как правило их применяют для вывода какой-либо статистики, например, общего количества пользователей, подписчиков, клиентов и т.д. В этом уроке я покажу, как такой счетчик вы можете установить на своем сайте.

Информация о видеокурсе
Автор: Александр Пауков
Название: Инструменты онлайн-бизнеса
Год издания: 2013-2015
Продолжительность: ~20 часов
Язык: русский
Формат: MP4
Размер: 3.94 Gb

Download / Скачать бесплатно WEB Инструменты онлайн-бизнеса (2015)(видеокурс)
Скачать с turbobit.net
Скачать с hitfile.net
Скачать с wayupload.com
Скачать с depositfiles.com
299
28-08-2015, 17:37
Комментариев: 0
  • Прекрасно!
  • 1


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.