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(в основной папке) со следующим кодом:

<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--------------- > 

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

Вторая часть

FavoriteLoadingДобавить в избранное

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *