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

 

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

Автор: admin от 20-02-2018, 06:35, посмотрело: 292

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



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



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



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



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



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























[/code]

Для красоты скачаем любую картинку, и добавим ее в новую папку "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--------------- > 


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



Источник: Хабрахабр

Категория: Программирование

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent