Сделать страницу адаптивной.
Сделать страницу адаптивной.
http://remde.esy.es/deutsch/nomen/a01.html
Я интересовался темой «перемещение объектов мышью». В качестве объектов выбрал дивы со словами( чтобы держаться ближе к немецкому).
Кажется получилось что-то в виде странички, но не адаптивной. Сейчас появилось желание сделать её адаптивной.
С чего начать?
Прикреплённые файлы
Сейчас:
Фиксированная (статическая) верстка. JavaScript. И кажется работает нормально.
Хочу начать: Респонсивная верстка (Адаптивная верстка) JavaScript
Потом хочу попробовать внедрить canvas
Я предполагаю, что на мобильных перетаскивание объектов из одного места в другое сложная проблема – может заменю на что-то другое.
Первым делом наверное надо избавиться от таблицы ссылок, много места занимает. Див с прямоугольниками разбить на 2 дива.
В горизонтальном положении смартфона оба дива по горизонтали. В вертикальном положении правый див уйдёт под левый.
Респонсивная верстка (Адаптивная верстка)
Так респонсивная или адаптивная?
- Респонсивная - для любых дисплэев
- Адаптивная - только для определённых размеров
Тогда ещё один вопрос:
что это вообще должно быть?
как оно должно вообще выглядеть?
В зависимости от количества и размера элементов нужно будет их как то размещать.
http://remde.esy.es/deutsch/interaktiv/video/lektion_1/l1t...
Я на соседней ветке показывал как сделал одну из страничек.
При 960 px и выше три колонки по горизонтали.
При 580 px и меньще 960 px две колонки по горизонтали, одна колонка под ними.
Ну и наконец при меньше 580 px все три колонки располагаются по вертикали.
Подобную верстку я называю респонсивной версткой.
Я и здесь хочу так попробовать.Но проблема: таблицу ссылок надо убрать, дивы делить итд.
Ну а главное - это наверное надо отказаться от перетаскивании прямоугольников мышью, что-то другое придумать.
ну чтоб перетаскивать, в любом случае нужно использовать независимые друг от друга элементы.
Так что таблица для этого не особо подходит.
И я так и не понял, что нужно, куда и в каком количестве и вообще зачем перетаскивать.
В зависимости от конкретно-поставленной задачи нужно будет продумать как это лучше организовать.
Имеем 1540 слов. На экран помещается лишь 20 слов.То есть количество наборов слов 1540/20 = 72. Любой набор слов можно выбрать надавив одну из ячеек таблицы.
Выбранный набор слов из 20 слов помещается на экран. Чтобы равномерно слова расспределились, программа подсчитывает длину слов и распределяет их по экрану.
Внизу под словами находятся три контейнера. И вот слова нужно перемещать в нужный контейнер. Надавил слово мышкой и перемещаешь в контейнер.
В зависимости выбрал ты правильный контейнер или нет ...
Продолжать или я не о том?
Ну идею я теперь понял.
Раньше я делал (уже давно правда) во флэше подобную игру, но с меньшим количеством элементов.
Сейчас мне спонтанно пришло в голову.
Я бы разместил эти 20 элементов ещё в один общий контэйнер,
чтоб группировать проще было.
Хотя, на сколько я знаю, есть библиотеки для драг и дроп.
Я сам с ними не занимался, возможно там есть и свои особенности расположения.
Раньше я делал (уже давно правда) во флэше подобную игру, но с меньшим количеством элементов.
Да, обычно количество элементов не много. И я делал вначале мало, но требовалось иметь много файлов.
А потом получилось собрать всё в один файл. Программа легко справляется с парой тысяч элементов: подсчитает, распределит итд.
Но я думаю на мобильных это не будет работать, нужна другая идея, мне пришла по ходу другая идея, покажу ниже.
Ещё один вариант - это иметь для мобильных совсем другую страницу с другим алгоритмом.
Например: слова находятся вверху. Двигаются или стоят на месте разницы нет..
Время от времени одно из слов прыгает вниз за границу и ты должен стрельнуть нужной пулей(кнопки der die das).
Дальше наверно счёт поставить.
Прикреплённые файлы
Да поторопился я с названием темы. Не сделать страницу адаптивной.
Значит надо иметь 2-3 самомстоятельные страницы и иметь программу перехода с одной страницы на другую.
И тема должна была называться примерно "как перейти с одной страницы на другую"
Даже не знаю с чего и начинать. У кого какие варианты?
Я бы сделал респонсивную.
Нужно только продумать как расположить все элементы так, чтоб оно гармонично и удобно располагалось.
Если делать несколько различных лэйаутов, то тоже ведь нужно думать что и куда разместить.
Делая респонсивный дизайн в итоге получаются те же самые несколько вариантов расположения элементов.
Только дизайнер продумывает как он это гармонично из одной формы в другую переводить будет.
Поэтому если делают серьёзные сайты или зофт, то дизайнеры и программисты работают отдельно.
Каждый делает то, что он лучше может и в итоге получается хорошая вещь 
Естественно предварительно нужно об основных понятиях и свойствах договориться.
Поэтому если делают серьёзные сайты или зофт, то дизайнеры и программисты работают отдельно.Каждый делает то, что он лучше может и в итоге получается хорошая вещь
Ну это понятно. Но в моем случае это просто кое-что опробовать ну и представить в виде странички, по крайней мере пока.
Я бы сделал респонсивную.Нужно только продумать как расположить все элементы так, чтоб оно гармонично и удобно располагалось.
Можно попробовать, но это будет не то, что на большом мониторе.
Я сделал набросок: убрать громоздкую таблицу, уменьшить количество элементов на эране и увеличить размеры элементов.
Попробую, ну а если не получится, то попробую сделать 2-3 самостоятельные страницы и программу перехода с одной страницы на другую. Здесь пожалууй не обойтись без PHP
Прикреплённые файлы
Вот я сделал что-то типа прототипа:
http://arwedis.de/tests/wortspiel/
Просто в бровзере открыть и мышкой потягать и поменять ширину бровзера.
Все элементы перемещаются и размещаются автоматически, в зависимости от ширины окна.
Это простейший вариант.
При необходимости можно и скрипты и стили разработать.
Все элементы перемещаются и размещаются автоматически, в зависимости от ширины окна.
Да, это так, если бы количество дивов сохранялось бы.
Но в работе должна быть возможность выхватывать дивы мышкой, количество дивов будет колебаться от 12 до 0 ( неправильно выбранные дивы будут возвращаться назад) итд.
Не так всё просто. Хотелось бы забросить дивы и пусть они сами заполняют отведенное место, но это не получится.
Спасает абсолютное позицинирование. А программа сама распределяет дивы в зависимости от разрешения экрана.
Мдааааа 
Тут похоже нужен курс молодого бойца по основам респонсивного дизайна
Да, это так, если бы количество дивов сохранялось бы.
Как раз наоборот.
Удаляем один див, на освободившееся место подползает следующий.
Добавляем несколько новых, они все размещаются друг за дружкой на свободное место.
Это всё можно симулировать при помощи "Entwicklerwerkzeug" от Firefox.
Не так всё просто.
Хотелось бы забросить дивы и пусть они сами заполняют отведенное место, но это не получится.
Всё как раз наоборот; проще паренной репы.
В том то и есть преимущество респонсивного дизайна.
Нужно просто попробовать оторваться от наезженной колеи и попробовать сделать это.
Тогда или всё получится, или будут конкретные места где что-то не получилось.
Тот набросок, который я выше предлагал,
он уже в принципе полноценный прототип.
Всё работает.
В "Entwicklerwerkzeug" от Firefox можно всевозможные сценарии проиграть.
"Knoten löschen" - див удаляется.
"Knoten klonen" - дивы размножаются.
Этим можно симулировать уменьшение и увеличение количества дивов.
Так же можно попробовать действие различных свойств CSS.
В Chrome есть тоже подобная игрушка, но я больше с Firefox работаю.