Переделать все-все-все на div.

[GoogleCodeExporter]

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

На данный момент очевидно, что 
динамическая картинка отсюда 
http://vkurse.innolab.net.ru мягко говоря не очень 
хорошо соответсвует картинке отсюда 
http://code.google.com/p/vkurse/wiki/Web_ScreenTemplate . Нужно это 
исправлять - в текущем виде сайт выглядит 
очень небрежно.

- в первую очередь бросаются в глаза это 
конечно масштаб фоновых картинок и 
артефакты на надписях - в таком виде это 
никому показывать конечно же невозможно.
- во вторую - все сверстанные элементы 
должны быть полностью функциональны и 
готовы для внедрения динамических 
элементов веб-приложения - например балон в 
левом верхнем углу с названием группы 
выполнен в виде тега <img> - это значит, что 
поверх него невозможно написать 
динамический текст "группа 791" - эта часть 
должна быть переделана в <div> с бэгргаундом 
в css.
- все картинки должны быть в формате png - от 
gif избавиться полностью.
- сверстать недостающие элементы 
интерфейса - в первую очередь таблицу с 
расписанием, во вторую - левое меню быстрой 
навигации.

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

Original issue reported on code.google.com by bender...@gmail.com on 4 Nov 2010 at 12:46

[GoogleCodeExporter]

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

Где нашел - поправил.

>>- во вторую - все сверстанные элементы 
должны быть полностью функциональны и 
готовы для внедрения динамических 
элементов веб-приложения - например балон в 
левом верхнем углу с названием группы 
выполнен в виде тега <img> - это значит, что 
поверх него невозможно написать 
динамический текст "группа 791" - эта часть 
должна быть переделана в <div> с бэгргаундом 
в css.

Бугога. Не знаю, умеет ли Максов Фронтпейдж 
div+css, но на это уйдет еще семестр.
на текущий момент там такая чудовищная 
каша из div+table, что застрелиться можно.

>>- все картинки должны быть в формате png - от 
gif избавиться полностью.

Как было - так я и воткнул. gif, кстати, для нас 
удобнее - он и легче png, и патент на него 
истек уж пару лет как.

>>в первую очередь таблицу с расписанием

А что у нас на странице 
http://vkurse.innolab.net.ru:8180/vkurse/week2.jsp?group=1 ?

Original comment by Lockyw...@gmail.com on 4 Nov 2010 at 4:28

[GoogleCodeExporter]

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

Original comment by Lockyw...@gmail.com on 4 Nov 2010 at 9:46

[GoogleCodeExporter]

>>в первую очередь бросаются в глаза это 
конечно масштаб фоновых картинок и 
артефакты >на надписях - в таком виде это 
никому показывать конечно же невозможно.
>Где нашел - поправил.

Спасибо, но вообще это задача верстальщика

>>- во вторую - все сверстанные элементы 
должны быть полностью функциональны и 
готовы >для внедрения динамических 
элементов веб-приложения - например балон в 
левом верхнем >углу с названием группы 
выполнен в виде тега <img> - это значит, что 
поверх него >невозможно написать 
динамический текст "группа 791" - эта часть 
должна быть >переделана в <div> с бэгргаундом 
в css.

>Бугога. Не знаю, умеет ли Максов Фронтпейдж 
div+css, но на это уйдет еще семестр.
>на текущий момент там такая чудовищная 
каша из div+table, что застрелиться можно.

Мда, хорошо хоть не ворде. Для наших 
потребностей блокнота с подсветкой 
заглаза должно хватать - тем более, что в 
визивигах html можно начинать верстать 
только после того, как научился разгребать 
html/css код руками.

У нас блин вся верстка - таблица 3x3 на весь 
сайт - рисуется на коленке хоть дивами, хоть 
тэйблом.

Если что - вот очень простой пример, как 
рисовать
http://snook.ca/archives/html_and_css/getting_your_di

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

Вот так выглядит таблица на дивах:
http://snook.ca/technical/div_tables/

Для нас на всю страницу нужно всего 3 такие 
конструкции - одна на шапку, одна на центр и 
одна на нижнюю закрывающую строку. Все 
предельно просто.

>>- все картинки должны быть в формате png - от 
gif избавиться полностью.
>Как было - так я и воткнул. gif, кстати, для 
нас удобнее - он и легче png, и патент >на него 
истек уж пару лет как.

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

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

>>в первую очередь таблицу с расписанием
>А что у нас на странице 
http://vkurse.innolab.net.ru:8180/vkurse/week2.jsp?group=1 ?

Это функциональная таблица с расписанием - 
она показывает всю необходимую информацию, 
но совершенно очевидно выбивается из 
стиля, который был разработан нашим 
дизайнером: http://code.google.com/p/vkurse/wiki/Web_ScreenTemplate.

Original comment by bender...@gmail.com on 5 Nov 2010 at 11:28

[GoogleCodeExporter]

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

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

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

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

Original comment by bender...@gmail.com on 5 Nov 2010 at 11:39

[GoogleCodeExporter]

Original comment by Lockyw...@gmail.com on 14 Nov 2010 at 6:07

• Changed title: Переделать все-все-все на div.

[GoogleCodeExporter]

Issue 27 has been merged into this issue.

Original comment by Lockyw...@gmail.com on 14 Nov 2010 at 6:09

[GoogleCodeExporter]

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

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

2. По поводу содержимого файла 
http://vkurse.innolab.net.ru:8180/vkurse/admin/style1.css

русские имена стилей, тем более в кодировке 
cp1251 - это полная жесть :) - все служебные 
конструкции должны быть в латинице, 
русский язык в лучшем случае только в 
коментариях и в любом случае в кодировке 
utf-8.

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

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

Сейчас сделано примерно так:
http://vkurse.innolab.net.ru:8180/vkurse/admin/admin_list.jsp?subaction=0

<div id="container" align="center"> // это главный див, 
внутри которого находится содержимое 
всего, что под шапкой

<table>
.. здесь все содержимое левого меню
</table>

<div id="left" ><img src="sketch_web4.png"  > </div> // это картинка 
левой границы

<table>
.. здесь все содержимое центральной области 
страницы (список преподавателей)
</table>

<div id="right"><img src="sketch_web_cr6.png"  ></div> // это 
картинка правой границы

</div> // закрывается 1й главный див с id=container

Здесь основная ошибка заключается в том, 
что ты помещаешь содержимое прямо внутрь 
главного дива с id=container - судя по всему как 
раз из-за этого у тебя разъезжается вся 
верстка в том числе в эксплорере (и в моем 
старом фаерфоксе на самом деле тоже).

Нужно подкорректировать, чтобы было так, 
как описано в примере, который я приводил: 
http://snook.ca/archives/html_and_css/getting_your_di

Исправленная версия будет выглядеть 
примерно так:

<div id="container" align="center"> // это главный див, 
внутри которого находится содержимое 
всего, что под шапкой
<div id="row">

<div id="left">
<table>
.. здесь все содержимое левого меню
</table>
</div> // закрывается див с id=left

<div id="middle">
<table>
.. здесь все содержимое центральной области 
страницы (список преподавателей)
</table>
</div> // закрывается див с id=middle

<div id="right"><img src="sketch_web_cr6.png"  ></div> // это 
картинка правой границы

</div> // закрывается 2й вложенный див c id=row
</div> // закрывается 1й главный див с id=container

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

3.1. Сейчас в CSS описание среднего дива c 
id="middle" выглядит так:
#middle {
  padding: 1em;      
  display:  table-header-group;
}

Это не правильно - должно быть как в примере 
- тоже самое, что для id=left и id=right:
#middle {
  padding: 1em;      
  display:  table-cell;
}

4. Обрати внимание, что исчез тег <img 
src="sketch_web4.png"> - это картинка, обозначавшая 
правую границу страницы. Ее правильнее 
вынести в CSS в таком виде:

#left {
// нужно добавить:
    background-image: url("sketch_web4.png");
    background-repeat: no-repeat;
    background-position: right top;

// то, что было раньше:
        width:150px;
        padding:1em;
        background: #EEF;
        display: table-cell;
}

Картинка будет отображаться на заднем фоне 
дива, содержащего меню (id=left) без повторений 
и прижатая к правому верхнему углу - то, что 
нам нужно.

4.1. Для отображения картинки в правом меню 
тоже лучше избавиться от тега img и 
перенести изображение аналогичным образом 
в CSS в описание класса right

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

Дальше оптимизация содержимого 3х основных 
колонок.

5. Левое меню - сверстано сейчас примерно 
таким образом:

        <table>
...
            <tr><td><a href="admin_list.jsp?subaction=5"><p align="right">Список предметов</p></a></td></tr>
            <tr><td><a href="admin_list.jsp?subaction=0"><p align="right">Список групп</p></a></td></tr>
            <tr><td><a href="admin_list.jsp?subaction=1"><p align="right">Список аудиторий</p></a></td></tr>
            <tr><td><a href="admin_list.jsp?subaction=3"><p align="right">Список видов отчётности</p></a></td></tr>
            <tr><td><a href="admin_list.jsp?subaction=4"><p align="right">Список видов занятий</p></a></td>

        </table>

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

<a href="admin_list.jsp?subaction=5"><p align="right">Список 
предметов</p></a>
<a href="admin_list.jsp?subaction=0"><p align="right">Список 
групп</p></a>
<a href="admin_list.jsp?subaction=1"><p align="right">Список 
аудиторий</p></a>
<a href="admin_list.jsp?subaction=3"><p align="right">Список видов 
отчётности</p></a>
<a href="admin_list.jsp?subaction=4"><p align="right">Список видов 
занятий</p></a>

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

<a href="admin_list.jsp?subaction=5"><p class="menu_item">Список 
предметов</p></a>
<a href="admin_list.jsp?subaction=0"><p class="menu_item">Список 
групп</p></a>
<a href="admin_list.jsp?subaction=1"><p class="menu_item">Список 
аудиторий</p></a>
<a href="admin_list.jsp?subaction=3"><p class="menu_item">Список 
видов отчётности</p></a>
<a href="admin_list.jsp?subaction=4"><p class="menu_item">Список 
видов занятий</p></a>

CSS:

p.menu_item {
    text-align: right;
}

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

Original comment by bender...@gmail.com on 16 Nov 2010 at 4:07

[GoogleCodeExporter]

Истину глаголит вышестоящий спикер. Только 
так и никак иначе (+ в стилях еще раздвигать 
или float'ами) И вообще кто так смешал дизайн и 
код?? Код в отдельные файлы, в дизайне 
странице только ссылки на файлы.

Original comment by C5.Jett@gmail.com on 17 Nov 2010 at 11:43

[GoogleCodeExporter]

>Максим
>Это работа Владимира

По поводу jsp-кода внутри html-файлов - не 
парься - сейчас это вне текущих 
приоритетов. Но по поводу моих замечаний по 
верстке - нужно все срочно подчищать - это 
касается именно верстки, так что Владимир к 
этому не относится, ну и тем более, что 90% 
решений я уже предоставил - нужно просто 
все аккуратно перенести в апстрим - если 
будут какие вопросы/затруднения - 
спрашивай здесь или в общей рассылке.

Original comment by panteroc...@gmail.com on 20 Nov 2010 at 7:25

[GoogleCodeExporter]

А почему само расписание - такая страшная 
таблица? Страшная не только в смысле 
дизайна (дизайн особенно ужасен), но и в 
архитектурном смысле - таблица. Нужно тоже 
переделать на DIV. И с архитектурной точки 
зрения это лучше и более гибко, и выглядит 
лучше в разы. Как пример, прототип, который 
я набросал за полтора-два часа.
http://vkurse.apx.jr1.ru/
Элементы кликабельны - отправляют на гугл, 
подставив определенную фразу в запрос. 
Изменив ссылку и подставляя фразу "запроса" 
из jsp-кода, который генерирует страницу, 
можно, например, по клику открывать 
информацию о занятии.
У меня все размеры забиты жестко, таблица 
занимает почти весь экран моего ноутбука. 
Если размеры и положение элементов 
задавать не абсолютно, а в процентах от 
родительских, то получается гибкая, 
красивая, растягиваемая табличка. У меня, 
правда, есть хорошая особенность - каждый 
вертикальный пиксель равен одной минуте. 
Но в jsp-коде пересчитывать проценты - не 
проблема. Неужели это так сложно? Прототип 
я набросал меньше, чем за два часа.

Original comment by apx%phys...@gtempaccount.com on 28 Nov 2010 at 5:39

[GoogleCodeExporter]

Перевод таблицы расписания на дивы - как 
раз текущая задача.

Более актуальный тикет по теме с 
обновленной формулировкой заданий теперь 
этот: http://code.google.com/p/vkurse/issues/detail?id=41

Просьба перепостить это сообщение туда.

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

текущий тикет пока закрываю как Fixed, тк. 
основные задачи из текущего тикета 
все-таки сделаны, а оставшиеся перенесены в 
другой тикет.

Original comment by bender...@gmail.com on 28 Nov 2010 at 5:58

• Changed state: Fixed