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

Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на 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 (в основной папке) со следующим кодом:



    
    
     My Company
    
    


    
    













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



    
    


И соответствующие классы в «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;
}


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


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


   


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


              


И так же классы анимации в «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;
}


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


 
 


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


В папке «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');
    }
})


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


 
 


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


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


           
........

Заголовок о нашей компании

«Хабрахабр» — крупнейший в Европе ресурс для IT-специалистов, издаваемый компанией «ТМ». С момента появления в 2006-м году «Хабр» трансформировался из небольшого отраслевого сайта в глобальную профессиональную площадку, которую ежемесячно посещают более 8 миллионов уникальных пользователей. «Хабрахабр» одинаково интересен программистам и разработчикам, администраторам и тестировщикам, дизайнерам и верстальщикам, аналитикам и копирайтерам, а также всем тем, для кого IT — это не просто две буквы алфавита. Расширение тематики «Хабра» дало начало сайту-спутнику — Geektimes, на который переехали непрофильные хабы и значительная часть контента, не имеющего непосредственного отношения к разработке и программированию.

Заголовок: Наша миссия

Данный сайт представляет собой платформу для информационного обмена между участниками пользовательского сообщества. Сообщество пользователей сайта является саморегулируемым, поэтому разобраться во всех нюансах работы проекта с первого раза получается далеко не у всех. Чтобы объяснить, как всё устроено, мы подготовили данный справочный раздел. Справа представлен рубрикатор справочного раздела. Для получения разъяснений выберите соответствующий пункт рубрикатора и ознакомьтесь с предложенной информацией. Если вам не удалось найти ответ на интересующий вопрос, пожалуйста, воспользуйтесь формой обратной связи.


И добавляем несколько классов в «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--------------- > 


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

© Habrahabr.ru