Видео уроки по созданию программ

Формула программиста

основатель — Волосатов Евгений Витольдович
Open shop jquery пользовательский интерфейс

jquery пользовательский интерфейс

Создание элементов пользовательского интерфейса с помощью фреймворка jquery



Список уроков | фото | видео

# Название видеоурока Видео / Тесты Решило Рейтинг Доступ
1 FREE Создание проекта 00:04:58
 6 чел. ★ 4.3 Done
  На этом уроке мы создадим наш проект и выведем запись
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 16 мин. [Показать отчёт]
Научился: Старину Эммета нашел без затруднений, брэкетс скачался и встал как литой ) Отображение изменений происходит лишь после контрол + S Помню, с помощью Brackets нам удавалось создавать прелестнейшие сайты, оттого и не затягивал с прохождением урока! Спасибо за новый стартап и удачи в написании новой сотни уроков! 
2 Программа на javascript 00:05:03
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы создадим первую программу на языке программирования javascript
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 1 час. 22 мин. [Показать отчёт]
Научился: папка  js с файлом main.js внутри оной, должны располагаться в папке проекта (если это не соблюдено, скрипт не будет найден в том виде как мы его указали) У браузера не должны быть в настройках заблокированы всплывающие окна - пришлось с этим повозиться И главное - вызывать надо функцию, не переменную в ней (поскольку имена похожи у функции и переменной у меня была путаница, с которой пришлось разобраться как повар с картошкой)  
3 Подключение jquery и jquery_ui 00:09:45
 3 чел. ★ 5 Done
  На этом уроке мы подключим к нашему проекту библиотеки jquery и jquery ui

Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 2 час. 41 мин. [Показать отчёт]
Научился: анимации и эффектов, а также набор виджетов подключаются с помощью скрипта jquery-ui.min.js Стили как нетрудно догадаться подтягиваются линком на jquery-ui.css 
Сложности: Скачать с первого раза архив с официального сайта, возвращал ошибку на сервере и просил пробовать качать через фью минитс  
4 Перемещение блока 00:09:02
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы научим нашу систему перемещать блок с кнопкой
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 30 мин. [Показать отчёт]
Научился: $ - в РНР с этого начинается переменная $ - в джаваскрипте с этого начинается код jQuery Диез # в каскадных таблицах стилей обращается по идентификатору id  
Сложности: Не сразу догадался, что таскать надо не за кнопку, а за поле справа от неё 
5 Параметры перемещения 00:08:37
 3 чел. ★ 5 Done
  На этом уроке мы поработаем с параметрами функции draggable()
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 31 мин. [Показать отчёт]
Научился: параметр cursor:"grab" для функци draggable меняет стрелку курсора на руку с пальцем axis:"y" ограничивает зону действия по вертикали, икс - по горизонтали helper:"clone" создает под нажатой ЛКМ дубликат обЪекта helper: позволяет порождать и выполнение function с параметрами (event){ где можно указывать свойства объекта при возникновении события в скобках 
6 Полезные виджеты - календарь 00:13:38
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы реализуем виджет календарь для ввода даты в поле
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 35 мин. [Показать отчёт]
Научился: $("#dtr").datepicker(); без параметров при нажатии на окно с идентификатором dtr возвращает целый календарь! массив monthNames в параметрах позволяет заменить дефолтные имена месяцев dayNamesMin меняет дни недели firstDay решает проблему разницы первого дня недели в разных странах в dateFormat указываем нужный нам формат вывода даты Для SQL, к примеру, актуален вид даты yyyy-mm-dd 
7 Полезные виджеты - вкладки 00:07:58
 3 чел. ★ 5 Done
  На этом уроке мы создадим блок вкладок и перенесем в него календарь datepicker
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 21 мин. [Показать отчёт]
Научился: (li>a)*3 + Tab  при запущенном Эммете даст три заготовки для закладок если по идентификатору обращение то диез или решетка, если по классу - то точкой начинай div*3 + Tab Эммет создаст три заготовки для блоков див Если что-то не работает - проверь, не стоит ли инициализация объекта после задания его параметров - сначала объявление, затем строки с деталями, иначе не сработает 
8 Полезные виджеты - аккордеон 00:10:21
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы рассмотрим создание виджета accordion - блока вертикальных вкладок
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 29 мин. [Показать отчёт]
Научился: $("#accordion").accordion({ в джаваСкрипте создает анимированные строки, открывающиеся по клику мышью Параметры для аккордеона пробовали такие: collapsible=True - не сработал, почитал в сети, рекомендуют при ошибках задавать жестко размеры панелей в px (не пробовал) active:1, - здесь устанавливается открывающаяся панель при обновлении страницы браузера animate:1000, - время в миллисекундах на открытие панели за 1 секунду Слишком большое значение не сработает, но даже 20000 у Валерия начало отрабатывать(на видео видно в 8:49 панель начала сползать потихоньку как и задано за 20 секунд) 
9 Полезные виджеты - диалоговое окно - инициация 00:09:36
 3 чел. ★ 5 Done
  На этом уроке мы создадим диалоговое окно и инициируем его по нажатию кнопки
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 23 мин. [Показать отчёт]
Научился: модальное окно в отличие от диалогового окна не позволяет вернуться в родительское (в котором это окно было вызвано) Помимо создания окна потребовалось поменять ему стиль дисплея с нан на шоу, иначе окно создавалось, но не демонстрировалось 
10 Полезные виджеты - диалоговое окно - свойства 00:07:00
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы рассмотрим свойства диалогового окна
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 26 мин. [Показать отчёт]
Научился: autoOpen: true в параметрах .dialog() заменяет $("#dialog").show(); И так и так окно будет выведено в видимый стиль Высота и ширина диалогового окна указывается в пикселах без явного прописывания px 
11 Полезные виджеты - строка прогресса и слайдер 00:07:41
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы поработаем с виджетами "строка прогресса" и слайдер
Отчёт отправил: 17947. Dmitry Sinitsin Выполнено за 36 мин. [Показать отчёт]
Научился: для функции .progressbar( доступен параметр {value:77}) который отвечает за текущее состояние полосы прогрессбара, а его анимацией занимается джаваскрипт Для слайдера в параметрах доступен параметр шага (step:любое цифровое значение до 100) отвечающее за разовое перемещение ползунка по шкале Окончание курса пришло так неожиданно, но отношусь к этому с пониманием - цель была показать технологию джиквери, вводный курс более чем понятен, дальше читаем техдокументацию и пробуем на практике. Не всё же в клювике от преподавателя в уютном гнёздышке получать знания, надо и самостоятельно развивать тему. Автору спасибо за свежий курс по незнакомой технологии и удачи в творческом росте! Курсантам - легкого прохождения и новых знаний! Курс несложный, всё работает и крутится как надо. 
  Итого:   11 видеоуроков 1 час. 33 мин.
6 тестов 		3 чел. ★ 4.94  
  Финалисты:   Dmitry Sinitsin,   Сергей Соколов,   Tom .

Начинаем практику по языку C#





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

После заполнения формы ты будешь подписан на рассылку «C# Вебинары и Видеоуроки», у тебя появится доступ к видеоурокам и консольным задачам.

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

Ты в любой момент сможешь отписаться от рассылки.
30514. Tom / juqery пользовательский интерфейс / Полезные виджеты - строка прогресса и слайдер


Научился: Научился создавать виджеты строка прогресса и слайдер. Научился устанавливать значение прогресса с помощью свойства value и шаг слайдера с помощью свойства step. В этом курсе я познакомился с библиотекой jquery ui. Курс понравился. Наглядно показано как можно создавать удобные виджеты для оформления сайта.

10670. Сергей Соколов / juqery пользовательский интерфейс / Полезные виджеты - строка прогресса и слайдер


Научился: Создал виджеты с прогресс баром и слайдер. Посмотрел свойства этих элементов. В целом курс для меня оказался полезным и толкнул к изучению jquery ui. Draggable попробую применить в проекте на работе =) Календарь у нас и так использовался, но благодаря этому курсу у меня появился отличный повод изучить его свойства узнать как сделать работу с ним удобнее =) В общем хороший курс, всем рекомендую. Даже если jqery ui вам сейчас не нужен, полезно знать что он существует и какие возможности даёт.