Сделать страницу адаптивной.
Сделать страницу адаптивной.
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 работаю.
Удаляем один див, на освободившееся место подползает следующий.
Добавляем несколько новых, они все размещаются друг за дружкой на свободное место.
Вот это как раз и не требуется.
Все дивы должны расспределиться по экрану и оставаться на своем месте.
Убрал див, там осталось пустое место.
У меня проблем нет с размещением дивов, всё это делает программа.
Нет и других проблем кроме одной большой - это перетаскивания дивов с одного места на другое.
С мышкой нет проблем, а на мобильных - замучаешься.
Я еще не видел подобной работы, не видел где перешли от перетаскивания элементов мышкой к кликанью на мобильных.
Ну 5-10 раз кликнуть можно, но сотню раз, да ещё вглядываться )))
Я окончательно отказываюсь перенести эту работу на смартфон - не нужно это.
Если я буду продолжать, то сделаю две страницы с разным алгоритмом работы и программу перехода с одной страницы на другую.
Ну почему мешать?
Я может и вернусь к этому варианту, ну а пока и другие варианты попробую.
Вопросов куча - помощь всегда потребуется.
Например сейчас у меня пара вопросов:
1. Как выравнять один див с другим по вертикали?
Как держать высоту дива постоянной по мере уменьшения количества дивов, находящих в нём?
Я выкручиваюсь, но не стилями.
2. Как определить на какой из дивов была нажата мышка? Я нахожу это по координатам, но должно быть и проще.
1) Если сайт должен быть респонсивным, то средствами CSS никак.
Если же это не обязательно, то можно слова поместить ещё в дивы-колонки.
Но это тоже не идеальное решение.
Здесь помоему лучше будет работать с Canvas,
но я с этим не сталкивался в HTML.
Высоту внешнего дива можно держать постоянной,
дав диву постоянную высоту height: 7em; (или в других постоянных виличинах)
2) вариантов множество.
Я иногда ставлю метку при клике.
Клик, проверка, если нет метки, то ставим метку (меняем переменную).
Высоту внешнего дива можно держать постоянной, дав диву постоянную высоту height: 7em; (или в других постоянных виличинах)
Я думаю, что это не подойдёт при свободном размещении дивов в диве.
Ведь в зависимости от разрешения экрана дивы могут расположиться в разное количество рядов.
Я вообще не указываю высоту основному диву. Дивы в нем растягивают его по вертикали.
Когда уменьшается количество дивов, удаленный див остаётся, но становится невидимым, тем самым высота дива остаётся постоянной.
Расположить див в диве по центру?
Имеется див произвольной ширины, в котором расположены элементы, растягивающие его.
Требуется расположить этот див по центру по горизонтали в другом диве. Я обычно делал это легко - использовал скрипты.
Но можно обойтись и без этого.
У кого какие варианты?
Прикреплённые файлыИ скорей всего не перетаскивать, а перекликивать.
Это легко сделать - ломать не строить.
То есть и в основной странице (для обычных компов) убрать перемещение дивов в контейнер.
Надавил див вверху(активировал его), отгадываешь нужный контейнер, куда должен поместится активированный див и давишь его.
Отгадал - программа продолжает работу с этим дивом и в конце закрашивае его белым, то есть его как бы нет на экране.
Не угадал - див поприветствует красным миганием и всё. И так дальше. Тогда легко сделать страницу адаптивной.
Ну а если упрощать, так упрощать дальше:
Сейчас дивы расположены идеально, так их распределяет программа, которая постоянно следит за разрешением экрана и в зависимости от этого размещает дивы.
Можно это убрать, накидать дивы как попало - пусть располагаются в зависимости от разрешения. Смотреться будет плохо, но понять можно на что кликать.
Ну и это не всё. Сейчас страница очень сложная, собранная в одну из десятков отдельных страниц. И не только сложная, но наверное и относительно медлительная.
Можно вернуться к нескольким страницам вместо одной (у меня раньше так и было) - большие плюсы от этого. Ну а что не круто считается - это переживём.
В итоге получится предпочтение работе на мобильных и не такой крутой (возможной) работе на больших экранах.
ПОстоянную высоту в этом случае нужно будет присваивать при помощи яваскрипта.
Док загрузился, высота нужного дива зафиксировалась (до следующей перезагрузки переменная не меняется).
Размер экрана поменялся, документ перезагружается.
Когда уменьшается количество дивов, удаленный див остаётся, но становится невидимым, тем самым высота дива остаётся постоянной.
Так в принципе тоже можно сделать.
Но чище было бы так как я выше предложил.
Чёт у Вас всё так сложно получается.
Никогда не надо клеить что-то одно из множества чего то.
Если это не единные библиотеки а разрозненные куски кода,
скорец всего там будет что-то, что будет мешать.
Обычно проще создать что-то всоё и абсолютно новое.
Идти пошагово и структурированно.
Как я думал.
1) кликаем элемент, он получает переменную с с параметром "активно"
2) кликаем целевой див, "активный" див перемещается в него (проверяются их параметры).
3) если всё правельно, "ОК", если ошибка "!ОК"
и дальше как Вы там планировали.
Расположить див в диве по центру?
- -
внутренний див должен получить боковой margin "auto" margin: 5px auto;
Однозначно не получится размесить див произвольной ширины в центре другого дива.
Здесь легко делается при помощи яваскрипт.
А вот при помощи стилей надо сильно постараться:
Нужно использовать 2 дополнительных дива, я их делаю для наглядности цветными, а так их не видать, хотя они и остаются.
Желтый див смещен влево на 50%. В него помещён красный див, растянутый дивом и смещен вправо на - 50%.
Вот так сложно и получается. Можно обойтись и одним дополнительным желтым дивом, но это не будет унивесальным для всех случаев.
Прикреплённые файлы
Однозначно не получится размесить див произвольной ширины в центре другого дива.
Но у меня же получается :-)
Я так уже много лет делаю.
Возможно просто некоторые другие параметры и свойства мешают.
У вас там похоже столько всего, что мешает.
Это нужно всё отследить и устранить.
Как я думал.
1) кликаем элемент, он получает переменную с с параметром "активно"
2)кликаем целевой див, "активный" див перемещается в него (проверяются их параметры).
3) если всё правельно, "ОК", если ошибка "!ОК"
Да почти так.
1. кликаем элемент, он подсвечивается и запоминается его номер.(1-12)
2) кликаем целевой див (контейнер), он подсвечивается и запоминается его номер.(1- 3)
3) поверка условий:
если див равен 1 и контейнер равен 2 то "ОК"
.....
если див равен 12 и контейнер равен 2 то "ОК"
если ни одно условие из 12 не выполнено то показывается ошибка "!ОК"
Но вместо "ОК" див закрасится зелёным цветом и появляется на некотрое время всплывающее окно
и вместо "!ОК" див закрасится на некотрое время красным цветом. Но это детали.
Остается самый главный вопрос - можно ли мириться с таким расположением элементов.
Прикреплённые файлы
Остается самый главный вопрос - можно ли мириться с таким расположением элементов.
Ну это уже дело вкуса
Я обычно делаю наоборот.
Думаю как оно должно выглядеть, а потом программирую логику.
Ну а если что не устраивает, то смотрю что именно, и думаю как это исправить.
Я обычно делаю наоборот.
Думаю как оно должно выглядеть, а потом программирую логику.
Да и я подумал и знаю как должно всё выглядеть, а толку!
Это 4 дива должны расположиться по горизонтали на смартфоне, когда он в горизонтальном положении и 2 дива, когда он в вертикальном положении.
Чтобы это осуществить, нужно пару дивов помещать в отдельный див и подбирать слова в каждый див, но это столько рутиной работы.
Поэтому вначале смирюсь с произвольным расположением дивов, а дальше видно будет.
Чтобы это осуществить, нужно пару дивов помещать в отдельный див
Ну нне без этого конечно, но это же не мешки ворочать.
Иногда нужно и вспомогательные элементы использовать и их дополнительно форматировать.
Поэтому вначале смирюсь с произвольным расположением дивов, а дальше видно будет.
В принципе дело хозяйское
Это 4 дива должны расположиться по горизонтали на смартфоне, когда он в горизонтальном положении и 2 дива, когда он в вертикальном положении.
Чтобы это осуществить, нужно пару дивов помещать в отдельный див и подбирать слова в каждый див, но это столько рутиной работы.
Это я так пугался, но попробовал, вижу, что не так уж и займет много времени на эту дополнительную работу.
Эту дополнительную работу я показывая, не убирая линии.
Что-то уже прорисовывается, даже пробовал закинуть на сайт - пойдёт кажется. Ну а впереди поработать с программой и кое-что прилизать итд.
Ну а сейчас наверное надо взять паузу, надоел уже небось.
Но в любом случае я готов принять участие в обсуждении, если возникнут вопросы или критические замечания. А сейчас набросок, почти рабочий:
Прикреплённые файлы