В этой статье я покажу процесс разработки сайта для мобильного приложения. В верстке будут использованы такие технологии, как: html5, css3, JQuery. Дизайн сайта будет минималистический, современный, адаптивный под все виды устройств.
Я начинающий разработчик, в этом деле всего пол года, сейчас учусь всё новому и новому, поэтому очень буду рад вашим адекватным замечаниям, без фанатизма.
Весь процесс верстки я разделю на 2-3 части (статьи).
Пожалуй начнем!
Верстка костей (структуры) сайта
В первую очередь надо написать структуру сайта, для этого мы конечно же используем html5.
Прописываем meta данные будущего сайта, создаем файл style.css (файл стилей) и подключаем его в <head>, а также подключаем библиотеку JQuery также в <head>. В дальнейшем на сайте я будем использовать эффекты стандартной анимации JQuery.
Я думаю, что сайт будет состоять из пяти блоков, два первых мы разберем сегодня в этой статье:
- первый экран с основным заголовком, описанием и кнопкой действия;
- второй блок будет с изображением, описанием приложения и кнопками App Story и Google Play для скачивания;
- третий блок используем для описания возможностей приложения в виде иконок с описанием;
- четвертый блок будет рассказывать о создателях;
- пятый блок будет с контактами.
А теперь реализуем всё это в html структуре:
Есть два основных контейнера - это box_1 и box_2, в которых располагаются колонки col_box, в которых в свою очередь находится сам контент сайта в виде заголовков h1 и h2, а также описание p и ссылок, которые я, с помощью css, превращу в кнопки. Также я уже подобрал изображения для сайта.
Сейчас без стилей сайт выглядит вот так:
Верстка стилей
Пришло время открывать файл style.css и внести первые стили на наш сайт
Сайту зададим общий черный фон, для этого прописываем в body background-color: black;, а также прописываем нулевые внешний отступы с помощью margin: 0;.
Что поменялось на сайте, давайте посмотрим:
Как мы видим, поменялся фон на черный и ушли отступы, всё как и было указано.
Думаю пора предать сайту настоящий вид, начнем с первого блока:
Делаем макет из двух колонок в .box_1::after;, можно было конечно использовать flex или grid, но я обошелся старым float методом, он меня вполне устраивает.
Дальше задаем внутренние отступы, указываем путь к фоновому изображению, задаем стили тексту и стили нашей кнопки a.button1. Также я сразу добавил медиа-запросы для адаптивности нашего макета.
Посмотрим что получилось на этот раз:
Получился вполне симпатичный, в стиле минимализма, блок.
Займемся блоком с описанием приложения и кнопками App Story и Google Play. Вернемся в файл style.css:
Здесь история практически такая же, как и с первым блоком: делаем две колонки, задаем стили изображению, стили текста и кнопок, а также прописываем медиа-запросы.
Получилось вот что:
Я считаю, что этот блок отражает всё, что было запланировано и выглядит он вполне современно.
Что не мало важно, этот шаблон адаптивный:
На этом моя статья заканчивается, оставляйте свои комментарии и советы, не судите строго, я только начинающий разработчик!
В следующей статье мы разберем третий и четвертый блок. До встречи.
... jQuery (!)
Ортодокс!)
По вашему это плохо, или хорошо?
Это - ортодоксально. Ровно то, что сказано: вы традиционно используете jQuery, хотя прямых показаний нет
Я знаю, что такое ортодокс.
Я писал в начале статьи, что будут использованы подобные технологии. К концу верстки сайта я планировал задействовать JQuery.
Обычно статьи решают какую либо задачу, хотя бы надуманную, а тут просто обычная верстка
Я раскрываю задачу сам для себя и делюсь этим с читателями. Если вас не устраивают подобные статьи, прошу не читать их, а если вы уделили время ознакомлению с содержанием, можете дать какой-то совет исполнителю, высказать свое мнение по поводу указанного материала.
Будь то отрицательный или положительный комментарий, я учту все сказанное.
Возможно этот материал будет интересен людям, которые только начинают!
Мне кажется автор немного ошибся с ресурсом для размещения статьи подобного плана. На хабре уже места нет?)
Интересно было бы то же самое сделать на flutter web (здесь он как раз уместен, так как создается именно мобильное приложение под web с необычным дизайном) и оценить скорость разработки и удобство. Ну и с той же кодовой базой можно таргет сделать на iOS и Android
Разрабатывается сайт под мобильное приложение, получается как презентация приложения.
Извините, не знаю о flutter web, могли бы кратко объяснить?
Flutter - сейчас это модный тулкит и фреймворк от Гугла для кроссплатформенной разработки почти под все существующие платформы (в т.ч. под web), упор сделан именно на создание сложного UI. Сразу скажу, что это технология - не панацея, инструмент создан для конкретных юзкейсов, и разрабатывать все надо будет на другом языке - Dart. Недавно flutter web перешел в стабильную ветку, и теперь его можно применять в проде, без знания html, css и js. К web'y конечно еще есть вопросы в части производительности, SEO (которого пока нет) и т.д, но с каждым разом все лучше и лучше.
В вашем случае, как гипотетическое мобильное приложение, так и промо-сайт для этого приложения реально сделать на flutter. И было бы очень интересно узнать, какие у вас ощущения были бы после применения этой технологии, особенно в сравнении с классической web-разработкой.
Вот один из многочисленных примеров быстрого создания UI: https://www.youtube.com/watch?v=FlQe2pY17zo
А вот первоисточник https://flutter.dev/web, где есть и примеры.