Какие веб-технологии мне нужны, чтобы сделать очень простой график на моей веб-странице?

Question

Я хочу сделать веб-страницу, которая имеет только длинную горизонтальную линию с небольшими вертикальными линиями, выходящими из нее, соединенными с изображениями (почти как временная шкала). Вы должны быть в состоянии увеличить эту строку, чтобы увидеть различные детали более подробно. Какие веб-технологии я должен изучить, чтобы сделать это?

HTML-элемент холста с рисунком JavaScript поверх него? граф сцены (я слышал название, но больше ничего не знаю)

Когда я гуглю "сделать веб-страницу временной шкалы как" или что-то в этом роде, я получаю такие вещи, как timeline.js или другое программное обеспечение, которое помогает вам создать их версию временной шкалы и встроить ее. Это не то, что я хочу. Я хочу написать свой собственный очень простой, как описано выше.

Answer 1

HTML5, в частности:

1. AJAX для динамической загрузки для прокрутки вверх / вниз и загрузки увеличенных изображений
2. jQuery & CSS для графики - все, что вы описали, может быть достигнуто с ним, холст будет излишним imho

У вас есть макеты / каркасы? Было бы намного проще, если бы мы поняли, что вы имеете в виду. Может быть, функциональный план тоже?

Для рассмотрения есть бэкэнд-технология, отвечающая за обслуживание всех этих данных, о которых вы не должны забывать! В этой области все зависит только от вас. Все бэкэнды, такие как PHP, ASP.NET, Ruby и т. Д., Могут достичь этого. Один лучше другого в разных областях.

Answer 2

Все упомянутое выше в вашем облаке тегов под вашим вопросом. HTML/CSS для слоя представления и Javascript/JS lib для поведения и / или javascript/canvas.

Как упоминалось выше, холст будет излишним в этой задаче.

Определите свою разметку и контент с помощью HTML / CSS, а затем добавьте поведение / события с помощью Javascript. Например, у вас может быть один div, который для простоты представляет ваше рождение, а затем с помощью JS вы можете легко запускать событие onFocus при вводе div с помощью мыши и легко анимировать /popup/zoom/what_you с помощью javascript или даже загрузить некоторую информацию или мелочи динамически с AJAX.