Учебный процесс в IT

индекс
214,21

Обучение веб-технологиям. Необходимое, лишнее, вредное

Задача: научить студентов началам веб-технологий.

Эту тему мы начинали обсуждать ранее: (Структура курса, Дизайн, HTML).

Минимально необходимым набором вопросов я считаю понятие о веб-технологиях, дизайне и юзабилити, html и css, серверных и клиентских скриптах, приемах работы с наиболее известными СУБД.

Начиная работу над курсом, я и не предполагал, какой огромный набор вопросов нужно разобрать. Ситуация осложняется тем, что из-за быстрого развития технологий практически нет качественных методических материалов по СОВРЕМЕННЫМ приемам.

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

Предлагаю на суд хабраобщественности набор из 6 тем, рассчитанных на 15 лекционных пар.
Лекции

У материала два недостатка.
Первый в чрезмерном объеме (всего порядка 290 страниц текста). Разумеется, ни для изложения на лекциях, ни даже для подготовки к экзаменам это не годится, даже с учетом огромной доли примеров кода в тексте
Второй в недостаточной актуальности материала. Я убежден, что значительная часть текста устарела морально, технологически и ее преподавание будет способствовать появлению т.н. «быдлокодеров».
Материал по технологиям основан на курсах ИНТУИТ с некоторыми сокращениями и правками.

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

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

Прошу ответить на вопросы:
1. Чего в материале не хватает? (без знания/понимая чего вы не признали бы человека начинающим веб-технологом)?
2. Что является лишним в условиях ограниченного времени и объема курса? Начните с самого лишнего.
3. Где взять методические лекционные материалы по ряду вопросов:
— верстка слоями и семантическая верстка
— js-фреймворки (хотя бы обзорно)
— DOM и различия в браузерах
— php-фреймворки
— по другим серверным языкам

Разрозненные статьи не годятся, так как требуют кардинальной переработки. Их стиль, уровень и систематичность никак не годятся для ВУЗовских лекций.

4. Какие элементы курса вы считаете настолько устаревшими, что они вредны, и преподавать их нельзя (например, по примерам кода на html и php).

А ребят я учу замечательных. Далеко не все блещут, но многие очень талантливы.
Для примера: пара лабораторных работ по html+php:
Алексей Ужва: Определение возможных положений корабля при игре в морской бой
Роман Островский: Решение систем линейных уравнений

Благодарю за внимание
+43
23 ноября 2008, 15:19
50

комментарии (59)

+16
stepan_ovchinnikov #
хабракат добавил сам
+8
Devgru #
Какой-то вы неправильный :)
+8
stepan_ovchinnikov #
да я всегда долго проверяю текст и всегда забываю хабракат. решил опередить первого умника.
+5
sunnybear #
ааа, ооо, у морского боя валидный HTML — я писаю кипятком. Курс уже удался!

По существу (много не смотрел, у Интуита и так курсы хорошие, скоро еще моим список пополнится): в HTML/CSS лучше делать упор на семантическую верстку (вообще не упоминать font, ввести понятие семантики — как соответствия разметки смыслу текста, — упомянуть про стили для печати и различных устройств).

Сделайте все теги и атрибуты строчными: для HTML пофигу, а для XHTML это станет валидным.

В JavaScript обязательно нужно сделать упор на DOM (и меньше упора на document.write) и разделение JavaScript и HTML. Вот тут цикл статей про «ненавязчивый» JavaScript (респект автору и переводчику):
webo.in/articles/all/04-unobtrusive-javascript-operation-clean-up/
НЛО прилетело и опубликовало эту надпись здесь
0
hlomzik #
а переводчик разве не вы? ;)
0
sunnybear #
не, не я. Там же написано :)
0
hlomzik #
Текст ниже — перевод статьи «Unobtrusive Javascript», чей автор, Christian Heilmann, любезно дал мне согласие на перевод.»

ну может я что-то не так понял)
ааа, в конце концов неважно, ваши переводы тоже классные)
0
Dimster #
у морского боя валидный HTML — я писаю кипятком

У нас, например, преподаватель по html предлагает сначала проверять валидатором работы, и только потом сдавать, чтобы меньше глупых ошибок разбирать (:
+5
yelv #
Есть же адекватные преподаватели, которые хотят давать самое лучшее, актуальное, а не использовать наработки дисятилетней давности. Спасибо.

У меня ещё такой вопрос, могу ли я использовать ваши наработки (в виде лекционного материала) в качестве пропозиции для введения курса веб-технологий в своём университете?

А вообще, неплохо было бы общими силами создать нормальный курс веб-технологий, котрый постоянно обновлялся бы и был общедоступным.
0
stepan_ovchinnikov #
используйте. и ссылок не надо. никакого ноу-хау пока тут нет, не более чем компиляция.

по второму — wiki?
0
timzinin #
согласен, wiki — самое верное решение
0
yelv #
Думаю да, вики была бы оптимальным вариантом.

И ещё бы курс информационного дизайна и юзабилити. Материала по этой теме достаточно, тот же Сатин выкладывает много видеороликов со своих конференций.

Тогда из университетов будут выпускать действительно хороших специалистов.
0
yelv #
У вас, правда, есть лекции по теме юзабилити, но я думаю, что лучше сделать дополнительно отдельный курс
0
Mozart #
Терминатор инструкции.
В предыдущей строке отсутствует терминатор инструкции.
Он там не отсутствует.
0
egoholic #
Типичная ошибка:
Вы пытаетесь дать качественный материал, а не научить учащихся воспринимать его, понимать его. Нужно дать основу, предсказать векторы мысли учащихся и дать ответы на возникающие при путешествии по этим векторам вопросы. Нужно рассматривать конкретные задачи и проблемы.
+6
preprocessor #
Двухнедельный курс «Гугл — магия знаний» и экзамен по итогам. Будущее высшего образования.
+1
shock_one #
Очень бы хотелось получать обновления и дополнения Ваших лекций. Может сделаете RSS или рассылку на электропочту?
0
ipeleon #
Курс сначала заинтересовал, понравился, но после прочтения, в том числе и про MySql, появилось ощущение будто читаю плохо переведенный manual, по языкам программирования, использования SQL, или какого нибудь geek. Хочу сказать что не создается впечатления причастности уроков и материалов к Web, будто опять тот C++, который не хочет заучиваться в отрыве от задачи, SQL который просто показывает, что вот существует язык запросов, а как его сразу использовать, создать что-нибудь — этого нет. Контекста нет в вашем курсе, целостности, и практики. Лучше всего, если вы создадите какой -нибудь блог своими уроками, что-бы он был несложный, и только несколько использовал технологии, но не углубляясь, что-бы не путать, и не по шагам, а именно контекстно, что вот требуется создать блог и сразу что-он работал и проч. Надо создавать, переплетать интерес и нудное учение HTML, и чуть менее формального подхода. Конечно будет сложнее, но вы не перепечатываете синтаксис языка, ваша задача научить.

Успехов!
+3
moore #
Лучшее образование — самообразование. И никогда это не изменится.
Появление программ, направленных на понимание современных проблем веба — это здорово, и здорово, что есть люди которые готовы заниматься разработкой таких программ, но с силу стремительного развития всей отрасли, такие вещи как обзор JS-фреймворков будет лишним, т.к. постоянно перерабатыать программу и держать её в русле 100% не получится, и имеется риск столкнутся с тем что через 2-3 года один из рассматриваемых фреймворков например, окажется своего рода турбо паскалем, который до сих пор преподают в куче вузов, и это не единичный пример потенциально возможной ситуации. Оттачивать мастерство надо уже на практике.
Я думаю, что самым верным путём является постоянный поиск авторитетных источников информации и общение+разбор каких либо аспектов веб-проекта на конкретных примерах. Главное правильно направить. За всеми новшествами не угонишься, а вот правильно направлять студентов намного проще. +Те кто надеяться только на учебную программу, какая бы хорошая она ни была, в результате всё равно останутся у разбитого корыта, если сам учится не будут, очень важно, что бы студенты варились в этом перманетном процессе развития.
Дорогу осилит идущий.
0
alemiks #
Курсы Интуита устарели лет на 8–10. Понял я это, когда начал готовиться к преподаванию аналогичного курса, взяв за основу материал интуит.ру. А практикум по javascript просто ужасен. В результате начал с «чистого листа», собирая нужную информацию по крупицам из разных источников.
0
stepan_ovchinnikov #
устарели, устарели.

но там по каждой теме несколько курсов, есть более современные, есть намного менее.

а можно на ваш курс взглянуть?
0
alemiks #
К сожалению, курсы находятся в данный момент только в голове и в виде набросков планов занятий на бумаге ;) Надеюсь, в ближайшее время получится оформить их в электронном виде…
0
Cosmonaut #
Тоже преподаю аналогичную тематику, поэтому очень рад буду почитать даже наброски. Заранее благодарен.
0
Bambr #
Объективности ради скажу, что курсы в ИНТУИТе разного качества. Я уже довольно давно «не в теме», но пару-тройку лет назад хорошим критерием качества был форум курса. Результаты были вполне правдоподобные: самый «безглючный» курс был по основам информационной безопасности, в который почти не вносились поправки, а наиболее глючный — Храмцовский по этим самым веб-технологиям (при его верстке часть примеров тупо не работала, да и вообще...)
+1
mgyk #
Несколько замечаний по поводу части про MySQL
1) Стоило бы описать использование explain и каким образом опряделять тормоза в запросах
2) Нормализации данных. Как раз та вещь на которой спотыкается большое количество новичков, норовящий записать все данные в одну таблицу.
3) Нет информации о том, что mysql ипсользует несолько движков (MyISAM,InnoDB) и о существовании транзакции

Так как использование SQL вообще довольно объемная тема, мне кажется лучше сделать одну вводную часть, с описанием зачем и почему использовать SQL, каким образом создавать структуру данных, а не описывать синтаксиск команд, который и так есть в мануле. Можно добавить в примеры кода ссылки на страницы руководства по командам MySQL — это было бы эффективнее.
+1
stepan_ovchinnikov #
ТРБД и нормализацию они изучали в другом курсе
это курс не баз данных, а веб-технологий

про explain — очень ценная мысль, обязательно добавлю
+1
bat #
Нет информации о том, что mysql ипсользует несолько движков (MyISAM,InnoDB) и о существовании транзакции

Здесь это явно лишнее, т.к. это особенности конкретной СУБД, которым место на курсах по MySQL.

СУБД в целом и SQL в частности, если я не ошибаюсь, рассматриваются в курсе информационных систем. Здесь же СУБД это средство для хранения данных и MySQL для примера.
+2
leonard #
Попробую указать на ошибки. Первое что открыл — шестая лекция (о javascript). Вижу
<FORM>
<INPUT TYPE=submit VALUE=Submit onClick="return false;">
</FORM>
— Значение атрибутов стоит указывать в кавычках

Дальше:
document.forms[i].elements.length.
— document.all не рекомендованно использовать. Мне кажется этому учить не следует, стоит сразу объяснить про getElementById() и getElemntsByTagName().

Еще: события привязывать лучше отдельно. То есть писать не
<INPUT TYPE="submit" VALUE="Submit" onClick="some_func()">

, а, например,
<INPUT TYPE="submit" id="some_id" VALUE="Submit" >

<script language="javascript" >
   document.getElementById('some_id').onclick=function() {
     …
  }
</script>


Кстати почти ничего не встретил по работе с dom и ajax (xmlhttprequest) — имхо это основное.
Если хотите могу попробовать помочь. Пишите на leon#thatsme.ru
Сейчас посмотрю остальные главы.
0
sunnybear #
это к различию HTML vs. XHTML. С точки зрения первого все нормально, но это уже несколько устарело.
НЛО прилетело и опубликовало эту надпись здесь
0
sunnybear #
«фурычить» оно будет всегда, просто будет невалидно :)
+1
leonard #
Думаю, имелось в виду, что «фурычить» в js:
elem.onClick — работать не будет.
0
sunnybear #
да, но Вы указываете на исправление HTML-кода, а подразумеваете работоспособность JS-кода. Как-то нелогично получается :)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
0
alemiks #
— Значение атрибутов стоит указывать в кавычках

к комментарию по этому участку кода я бы добавил:
— атрибут action — обязательный для тега form
— названия тегов и атрибутов желательно писать в нижнем регистре для [возможного] перехода к xhtml
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
0
alemiks #
document.forms[i].elements.length.

— document.all не рекомендованно использовать.

простите, а где document.all? это коллекция forms из DOM level 0 и 1
0
leonard #
Я оговорился. Имел в виду, что не рекомендуется использовать document.forms, document.links и т.д.
0
sunnybear #
да, но ведь работает быстрее, черт побьяри :)
0
alemiks #
не понимаю, чем плох DOM level 1?
+1
alemiks #
Посмотрел лекции 3 и 6.
По лекции 3 неплохо бы:
— уделить внимание разделению кода и оформления в html;
— рассмотреть понятие «семантическая вёрстка», её преимущества
— убрать из примеров устаревшие атрибуты (bgcolor, align). Упомянуть, конечно, что есть такие, но обратить внимание на замену всех оформительских атрибутов с помощью css;
— обратить внимание на переключение doctype, одного из важнейших понятий для вёрстки (у вас этому уделено чуть больше полстраницы, да ещё в середине документа и из материала непонятно, зачем вообще нужен doctype)

По лекции 6 скажу, как я подавал материал на своих занятиях:
— начал с основ javascript (у вас же начинается с событий, иерархии классов, управления окнами, а, например, про строки в javascript упоминается на 31-й странице...): размещение на странице, применение, типы данных, операторы, инструкции
— особое внимание массивам, объектам, регуляркам
— dom level 0 (в основном, работа с элементами форм)
— dom level 1 и 2
— событийная модель dom level 2 и особенности событийной модели ie
+4
Anarki #
Нашел в примерах четвертой лекции вот такое: $_REQUEST[auth], $_REQUEST[user]. Какбэ не рекомендуется так делать, нужно обрамлять строки-ключи массива кавычками.
0
RomanL #
Для каких специальностей разрабатывался курс? На какой уровень подготовки он расчинат (в каком семестре дается)? Только лекции или еще есть лабораторный практикум?

По моему скромному опыту ТАКОЙ объем материала не удастся впихнуть в семестровый курс. Либо это будет «галопом по европам» с очень низкой эффективностью. Конкретные мысли:
1. Никчему распинаться по поводу методов GET и POST. Лучше усилить обзорную часть упомянув современные платформы типа Python и Ruby on Rails.
2. Веб-дизайн и юзабилити. С методической точки зрения — совершенно пустая лекция.
3. HTML и CSS — сократить до двух часов дав основные принципы и теги чтобы они могли сформировать простейшую станичку.
4. PHP и пр. Синтаксис языка объяснять смысла нет. Обычно студенты уже имеют представление о Си. Сделать упор на решаемых задачах в вебе. Необходимы сквозные примеры, а не перевод мануала. Более четко выделить смысловое ядро курса и дополнительные материалы, а то получается 165 страниц монолита без понятия о приоритех и важности того или иного блока.
4. MySQL — выбросить. Они это должны изучать в курсе управления данными. Или оставить только примеры работы с DBI.
6. JS. Нуууу… Я вообще сторонник давать на лекциях МОДЕЛИ систем. Т.е. как и что организовано, логику взаимодействия и прочие абстракции. Этого у вас нехватает. Эффективно работать с JS без понимания модели DOM — невозможно.

0
stepan_ovchinnikov #
программное обеспечение автоматизированных систем. 5 курс
0
RomanL #
Ну да… надо резать то, что могло быть в других курсах и сосредотачиваться на прикладных аспектах. Учебный план этой специальности, на первый взгляд, достаточно хорошо сбалансирован по фундаментальным для ИТ предметам.
0
CAH4A #
А мне кажется начать нужно с построения сетей,, интернета, DNS-серверов,
0
CAH4A #
Зацепил enter((

А мне кажется начать нужно с построения сетей, TCP/IP, интернета в целом, DNS-серверов, перейти на структуру хост-сервера, ngnix//apach, HTTP. Причём не расписывать и размазывать, а коротко. Максимум две лекции. Лучше одну.

Потом сам HTML (DOCTYPE не забыть) и DOM-модель. тоже одну-две лекции.

CSS и с чем его едят. Теперь есть база для того чтобы остановится и попрактиковатся…

Чистый JAVA, и фреемворки.

Теперь есть база как програмированию, так и по дизайну. :)

По програмированию рассказать CGI, FASTCGI, PERL. На PHP также можно остановится и акцентировать внимание.

А как дизайн рассказывать — даже представить себе не могу… :)

Главное, это не пускатся в разъяснения и описание функций. Меня начинает коматозить от таких вещей в институте. Лучше структура и база. Будет основное дерево — листочки нарастут при необходимости.
0
CAH4A #
в пункте про CSS не забыть про кроссбраузерность :)
0
trish #
на самом деле полезный вопрос поднят. это большая проблема! лично для себя выявила много интерестного из комментов )) мне нечаянно достался курс веб-дизайна. и я, как не специалист, тоже была поставлена в тупик. буду отслеживать тему. пишите обязательно.
0
CAH4A #
Мне кажется, веб-дизайн — это полу-творческая, полу-техническая работа. Соответственно, нужны как основы вёрстки, так и основы композиции, колористики. А ещё, конечно же, нужно юзабилити.

и WEB-дизайн != изучение Photoshopa.
0
trish #
ну… кому фотошоп. а человек, от которого мне внезапно достался курс, ограничил веб-дизайн шлешом. поэтому в панике пришлось все перерабатывать.
я вот тоже начала с композиции, цвета, верстки… как-то юзабилити выпало практически… кое-где только коснулась этого.
пересмотрю курс сильно, после прочтения темы. много интерестного для себя узрела =). жалко, что курс третий, знают еще малова-то
0
jam31 #
Какая специальность у студентов? А год обучения?
0
stepan_ovchinnikov #
программное обеспечение автоматизированных систем. 5 курс соответственно они умеют программировать, учатся 5 год
0
sigmatik #
удивило отсутсвие Php в списке скриптовых языков на стороне сервера ( лекция №1 )
0
etc #
А зачем? Зачем людям вбивать в голову то, что им не нужно? Нужно лишь дать базовые знания, чтобы человек знал, что это из себя представляет (веб-программирование) и в дальнейшем, если ему это понадобится, смог все легко вспомнить и сразу же начать совершенствоваться. Т.е. чтобы ему не пришлось покупать книги из серии для чайников.

Если давать общие знания, то распинаться про фреймворки — незачем. Лучше уж просто научить программировать на PHP, сначала процедурный подход. Тут же вбить в голову то, что нужно писать все в определенном стиле, лучше по стандартам (PEAR или Zend). Далее — вопросы безопасности и производительности. Научить приемам, которые помогают повысить безопасность приложений и производительность. Только после всего этого — базовые навыки ООП.

Если говорить не только о PHP… То идти нужно в порядке HTML -> CSS -> JavaScript -> PHP -> MySQL. Причем акцентировать внимание именно на HTML и PHP, остальное — только начальные знания для понятия, как оно работает. Темы очень обширные. Чтобы хорошо освоить только PHP нужно прочитать примерно 3 книги (лучше из серии «Профессиоанальное программирование»). А потом еще и ООА и ООП, чтобы был иммунитет к большим проектам.
0
DimanX #
что-то ссылочка на лекции сдохла

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