Pull to refresh

Html страница глазами разработчика приложений. Часть 1: «Подготовка»

Reading time 10 min
Views 14K

Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на landing page с поддержкой мультиязычности.


Посмотрев на реализации представленные в интернете я ужаснулась. В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах. Короче ужас! И я подумала что хорошо бы использовать базу данных, но это же обычная страница, и разворачивать ради нее целый сервер? и базу? как то перебор! Работая с Angular2 я подумала что было бы классно с его помощью создать страницу, но он очень тяжелый, и не подходит… И тут я вспомнила о его аналоге Vue.js. Легкая библиотека, для создания приложений. Я подумала: "А почему бы не создать сайт с помощью vue и добавить имитацию базы?".


Обдумав все за и против, посмотрев на другие подходы, мне захотелось внести немного "красоты" в html верстку.


Для объяснения подхода я решила сделать небольшую страничку, потому что выкладывание полного кода существующей страницы считаю слишком "тяжелым".


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


image


Итак, начнем!


Создадим папку в которой будем работать, далее в ней создадим папку "css" и туда добавим соответственно файл с нашими классами для странички: "style.css"


#main{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    right:0;
    opacity:1;
}

#wrapper{
    float:left;
    width:100%;
    height:100%;
    position: relative;
    z-index:4;
}

.content-holder{
    vertical-align: top;
    float:left;
    width:100%;
    position:relative;
    height:100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
}

<---------------header--------------->
header {
  position: fixed;
  width: 100%;
    z-index:22;
    top:0;
    left:0;
    background:rgba(255,255,255,1);
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.transition{
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
}

.tr-header{
    background:rgba(255,255,255,0.0);
    border-bottom:1px solid rgba(255,255,255,0.4);
}

header.tr-header.sticky {
   background:rgba(255,255,255,1);
   box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.header-height-emulator {
    float: left;
    width: 100%;
    position: relative;
    z-index: 1;
}

.container{
    width:92%;
    max-width:100%;
    margin:20px  auto;
    position: relative;
    zoom:1;
    z-index:3;
}

.nav-holder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.scroll-nav  {
    float:right;
}

.scroll-nav  li {
    display:inline-block;
}
.scroll-nav  li a {
    background: #6dc77a;
    float: left;
    border-radius: 25px;
    padding: 10px 22px;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    border:2px solid   rgba(255,255,255,0);
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

.scroll-nav li a:hover ,
.scroll-nav li.actscroll a {
    border:2px solid   rgba(255,255,255,1.0);
}
<---------------end header--------------->

Далее создаем index.html(в основной папке) со следующим кодом:


<head>
    <!--=============== basic  ===============-->
    <meta charset="UTF-8">
    <title> My Company</title>
    <!--=============== css  ===============-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
</head>
<body>
    <!--================= main start ================-->
    <div id="main">
        <div id="wrapper">
            <div class="content-holder">
                <!--================= Header + Scroll navigation ================-->
                 <header class="transition tr-header" id="header">
                    <div class="container">
                        <div class="nav-holder">
                            <nav class="scroll-nav">
                                <ul>
                                    <li class="actscroll"><a href="#sec1">Главная </a></li>
                                    <li><a href="#sec2">О нас</a></li>
                                    <li><a href="#sec3">Наша продукция</a></li>
                                    <li><a href="#sec4">Наши технологии</a></li>
                                    <li><a href="#sec5">Где приобрести</a></li>
                                    <li><a href="#sec6">Поддержка</a></li>
                                    <li><a href="#sec7">Партнеры</a></li>
                                    <li><a href="#sec8">Контакты</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </header>
                <!-- End header -->
            </div>
        </div>
    </div>
</body>
</html>

Для красоты скачаем любую картинку, и добавим ее в новую папку "images". И разместим ее вверху страницы.


<body>
    <!--================= main start ================-->
    <div id="main">
        <div id="wrapper">
            <div class="content-holder">
                <!--================= Header + Scroll navigation ================-->
                 <header class="transition tr-header" id="header">
                    ............
                </header>
                <!-- End header -->
                <!--================= Photo home  ================-->
        <section class="is_overlay page-title-bg"  id="sec1" name="sec1">
                    <div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div>
                    <div class="overlay over-op6"></div>
                </section>
                <!-- section end -->
            </div>
        </div>
    </div>
</body>
</html>

И соответствующие классы в "style.css"


<---------------photo home--------------->
.page-title-bg {
    padding:250px 0;
    color:#fff;
    overflow:hidden;
}

.bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat:repeat;
}

.is_overlay{ 
    position: inherit; 
    display: block; 
    width: 100%; 
    height: 100%; 
}

.overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    background:#292929;
    opacity:0.4;
}
.over-op6 {
    opacity:0.6;
}
<---------------end photo--------------->

Следом создаем еще одну папку "scripts".


Я предпочитаю скачивать файлы библиотек, поэтому я скачала Jquery.min и поместила его в папку "scripts".


Так же для создания меню выбора языков, я скачала круглые иконки с флагами стран (в данном случае мне понадобилось всего 2ве иконки) которые я разместила в новой папке "flags".


И создала классы которые содержат данные иконки, чтобы не путаться я добавила еще один css файл, в соответствующуюю папку. "multilanguage.css"


.flag {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem
}

.flag-ru {
    background-image: url(../flags/russia.svg);
}

.flag-us {
    background-image: url(../flags/united-states-of-america.svg);
}

.flag:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.select-flag {
    -webkit-filter: brightness(205%);
    filter: brightness(205%);
}

.lang-dropdown {
    margin-right: 2rem
}

.flag-with-menu {
    display: flex;
    flex-direction: row;
}

.lang-menu {
    z-index: 1;
    position: absolute;
    background-color: var(--dark-element-color);
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.lang-first-init {
    display: none !important;
}

Эти все классы описывают наше языковое меню.


Не забываем подключать новые файлы к странице!!!


   <link rel="stylesheet" type="text/css" href="css/multilanguage.css" media="all">

Добавим наше меню на страницу в хедер.


              <header class="transition tr-header" id="header">
                    <div class="container">
                        <div class="nav-holder">
                            <nav class="scroll-nav">
                               .......
                            </nav>
                            <div class="lang-dropdown">
                                <div class="flag-with-menu" id="flag-menu">
                                    <div class="flag flag-ru" lang-value="ru-RU"></div>
                                </div>
                                <div id="lang-menu" class="lang-menu lang-first-init">
                                    <div class="flag flag-us" lang-value="en-US"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>

И так же классы анимации в "multilanguage.css"


.animation-lang-show {
    overflow: hidden;
    animation: 0.8s ease showBlock;
}

@keyframes showBlock {
    from {
        max-height: 0px;
        padding-bottom: 0rem;
        padding-top: 0rem;
    }

    to {
        max-height: 20rem;
    }
}

.animation-lang-hide {
    animation-timing-function: linear;
    animation-name: hideBlock;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    overflow: hidden;
}

@keyframes hideBlock {
    from {
        max-height: 20rem;
    }

    to {
        display: none;
        height: 0px;
        max-height: 0px;
        padding-bottom: 0em;
        padding-top: 0rem;
        margin-top: 0em;
        padding-left: 0em;
        margin-bottom: 0em
    }
}

Теперь займемся описание этого меню в JS.


Я буду давать максимально полные комментарии, на случай если кто то не понимает.
В папке "scripts" создаем новый файл "cookie.js"


В нем будет всего два метода: Сохранить куки и Взять куки с нужным именем


function setCookie(key, value) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
}

Подключаем данный файл на странице!


 <script type="text/javascript" src="scripts/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/cookie.js"></script>

Создаем файл который будет отвечать за работу нашего меню.


В папке "scripts" создаем новый файл "multilanguage.js"


$(document).ready(function () {
    var language = navigator.language || navigator.browserLanguage; //определяем язык браузера
    var userLanguage = getCookie("language") || language; //проверяем, есть ли нами записанные куки с выбранным языком, для этого устройства. На случай если человек не первый раз на нашей странице
    var isMenuClicked = false;
    var menu = $('#lang-menu'); //после мы часто будем к нему обращаться, поэтому добавляем в переменную

    replaceElementAndSelect(userLanguage); //делаем замену иконки, на выбранный язык или язык браузера

    //регистрируем клик по нашему флажку
   $("#flag-menu").click(function () {
        isMenuClicked = true;
        showOrHideMenu();
    })

    //добавляем метод для определения показывать или скрывать меню
    function showOrHideMenu() {
        if (menu.hasClass('lang-first-init')) {
            menu.removeClass('lang-first-init');
            menu.addClass('animation-lang-show');
        } else {
            if (menu.hasClass('animation-lang-show')) {
                hideMenu();
            } else {
                showMenu();
            }
        }
    }

    //добавляем методы для показа и скрытия меню
    function showMenu() {
        menu.removeClass('animation-lang-hide');
        menu.addClass('animation-lang-show');
    }

    function hideMenu() {
        menu.removeClass('animation-lang-show');
        menu.addClass('animation-lang-hide');
    }

   //регистрируем клик по флагу
    $(document).on('click', '.flag', function () {
        if (!isMenuClicked) { // проверяем открыто меню или нет
            var newLang = $(this).attr('lang-value'); //берем новое значение языка
            language = newLang;
            setCookie("language", language); //записываем для будущего использования
            languageChange(newLang); //меняем язык
            hideMenu();
        }
        isMenuClicked = false;
    });

    //тут происходит смена языка и самое главное мы отправляем эвент что была нажата кнопка смены языка, и его мы можем отловить в других скриптах
    function languageChange(lang) {
        replaceElementAndSelect(lang);
        $(document).trigger('onLanguageChange', [lang]);
    }

    function replaceElementAndSelect(lang) {
        var element = ".flag[lang-value='" + lang + "']"; // подставляем выбранное значение языка

        var selectLang = $(element).clone(true); //копируем элемент
        var defoultElement = $('.flag-with-menu').find('.flag').clone(true); // ищем выбранный элемент в меню

        //меняем наши элементы местами
        $(element).replaceWith(defoultElement); 
        $('.flag-with-menu').find('.flag').replaceWith(selectLang);

        //удаляем класс подсвечивающий выбранный язык
        $('.lang-dropdown').children().children().removeClass('select-flag');
        $(element).addClass('select-flag');
    }
})

Подключаем данный файл на странице!


 <script type="text/javascript" src="scripts/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/cookie.js"></script>
<script type="text/javascript" src="scripts/multilanguage.js"></script>

Вернемся к нашей странице.


Добавим несколько секций с любым текстом. Я для примера добавлю одну, чтоб сэкономить место:


           <div class="content-holder">
                <!--================= Header ================-->
                <header class="transition tr-header" id="header">
                    ..........
                </header>
                <!-- End header -->
                <!--================= Photo home  ================-->
                <section class="is_overlay page-title-bg" id="sec1" name="sec1">
                    ........
                </section>
                <!-- section end -->
                <section class="align-text" id="sec2" name="sec2">
                    <div class="content">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6 ">
                                    <h3>Заголовок о нашей компании</h3>
                                    <div class="clearfix"></div>
                                    <div class="separator color-separator flt-l"></div>
                                    <div class="clearfix"></div>
                                    <p>«Хабрахабр» — крупнейший в Европе ресурс для IT-специалистов, издаваемый компанией «ТМ». С момента появления в 2006-м году «Хабр» трансформировался из небольшого отраслевого сайта в глобальную профессиональную площадку, которую ежемесячно посещают более 8 миллионов уникальных пользователей.

«Хабрахабр» одинаково интересен программистам и разработчикам, администраторам и тестировщикам, дизайнерам и верстальщикам, аналитикам и копирайтерам, а также всем тем, для кого IT — это не просто две буквы алфавита.

Расширение тематики «Хабра» дало начало сайту-спутнику — Geektimes, на который переехали непрофильные хабы и значительная часть контента, не имеющего непосредственного отношения к разработке и программированию.</p>
                                </div>
                                <div class="col-md-6 ">
                                    <h3>Заголовок: Наша миссия</h3>
                                    <div class="clearfix"></div>
                                    <div class="separator color-separator flt-l"></div>
                                    <div class="clearfix"></div>
                                    <p>Данный сайт представляет собой платформу для информационного обмена между участниками пользовательского сообщества. Сообщество пользователей сайта является саморегулируемым, поэтому разобраться во всех нюансах работы проекта с первого раза получается далеко не у всех. Чтобы объяснить, как всё устроено, мы подготовили данный справочный раздел. Справа представлен рубрикатор справочного раздела. Для получения разъяснений выберите соответствующий пункт рубрикатора и ознакомьтесь с предложенной информацией. Если вам не удалось найти ответ на интересующий вопрос, пожалуйста, воспользуйтесь формой обратной связи.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
           </div>

И добавляем несколько классов в "style.css"


<---------------section--------------- > 
.align-text {
    text-align: left;
}
.align-text p , .align-text .separator{
    float:left;
}
.align-text h3 {
    font-size:16px;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    color:#666;
    padding-bottom:20px;
}

section {
    float:left;
    width:100%;
    padding:50px 0;
    position:relative;
    z-index:12;
    background:#fff;
}

.col-md-6 {
    padding-left: 0px;
    padding-right: 0px; 
}
<---------------section--------------- > 

Вот и все! Мы наконец подготовили нашу страницу для самого интересного! Как это все представить более красиво и сделать смену языка без перезагрузки станицы.


Вторая часть

Tags:
Hubs:
+11
Comments 37
Comments Comments 37

Articles