Ответы пользователя по тегу HTML
  • Оцените первую верстку из psd макета?

    soprun
    @soprun
    Software Architecture
    Начало хорошие :)
    Советы на будущие:
    Не используй position: absolute без необходимости.
    top, right, left, bottom - Это очень плохо.

    margin - это отступ от блока.
    Например есть горизонтальный список и необходимо у каждого элемента списка сделать отступ с лева и права.

    ...

    nav a:first-child {
        padding-left: 19px;
        margin-left: 128px;
    }

    К примеру у bootstrap есть класс container который центрует содержание страницы.

    ...

    .hero-shirt {
        margin: 67px 0 0 78px;
    }

    Здесь нужно было использовать padding, так как по логике элемент должен идти внуторь, а не изнутри.

    ...
    Так же очень важно использовать модульную сетку grid. Она помогает позиционировать элементы на страницы.
    ...

    nav a:after {
        content: "|";
        padding-left: 18px;
    }

    Лучше было бы использовать как то так:

    nav {
        /* ... */
    }
    nav ul {
        text-align: center;
        letter-spacing: -.3em; /* убирает пробелы между inline */
    }
    nav li {
        display: inline-block;
        letter-spacing: normal; /* нормализует пробелы */
    }
    nav li + li {
        border-left: 1px solid white;
    }
    nav a {
        display: block;
        color: white;
        padding: 0 10px; /* Но лучше использовать EM */
    }


    Не используй локальные шрифты!
    Ну для начало, это не легально..
    Есть специальные сервисы по хранению шрифтов. Они бесплатны и не нарушаешь права/лицензию и т.д.
    Google Fonts,
    fonts.com

    А вообще ты умничка и у тебя очень здорово получилась первая работа, желаю дальнейших успехов ))
    Ответ написан
    Комментировать
  • Связана ли адаптивная верстка с дизайном?

    soprun
    @soprun
    Software Architecture
    Адаптивный дизайн - подразумевает собой оформления веб-страницы таким образом что элементы могут перемещаться, сдвигаться и убираться не нарушая целостность композиции.

    Адаптивная верстка - это уже техническая составляющая. HTML и CSS разметка сделана таким образом что элементы имеют "плавность" и легок адаптируются по размер браузера, так же оптимизировано под загрузку мобильных устройств.
    Сжатие html, css, javascript и оптимизация изображений, как правило для дисплеев retina добавляются специальные правила, что бы на современных телефонах отображались более качественно.

    Кроссбраузерность
    Корректность работы зависит от программиста, если он хороший то этой проблемы не будет, так как опытный человек изначально создает кроссбраузерную верстку. (это на уровне подсознания)

    Связана ли адаптивная верстка с дизайном?
    Да! Если дизайн не подразумевает собой возможность "плавать" (визуально оставаться целостным), то возникают проблемы.
    Ответ написан
    Комментировать
  • Насколько безопасен POST запрос?

    soprun
    @soprun
    Software Architecture
    Насколько безопасен POST запрос?

    "Абсолютно безопасен" если нету дыр в Вашем приложении.

    Шифровать ли его дополнительно?

    А смысл?! Увеличиваете время отправки на шифрование и дешифрирование.

    Никогда нельзя доверять тому что приходит от пользователей! Всегда необходимо проверять данные, экранировать их и т.д.
    А идеальной и 100% защиты нет, всегда найдется умелец который смогёт :)
    Ответ написан
  • Изменение CMS под свои интересы?

    soprun
    @soprun
    Software Architecture
    "изобретение велосипеда" весьма шаткое понятие.

    CMS - это уже готовое решение проблем, то есть например "wordpress" установили на сервер, скачали нужный Вам шаблон и все..
    Так как многие вещи уже были написаны (имею в веду премиум шаблоны).

    А вот что касается творчества "разработки", лучше обратить внимание на фреймворки.
    Именно для этого они и нужны*
    Ответ написан
    Комментировать
  • Chrome или Firefox для веб разработки?

    soprun
    @soprun
    Software Architecture
    Мой основной браузер Chrome, для проверки кроссбраузерности использую другие то есть, Firefox и [цензура] IE.
    Opera, Chrome, Safari на webkit, так что между ними минимальная разница.
    Ответ написан
    Комментировать
  • Что мне надо знать, что бы создать интернет магазин?

    soprun
    @soprun
    Software Architecture
    Настоятельно рекомендую использовать готовое решение "CMS".
    Вы можете написать собственные модули, плагины и т.д. что бы научится работать с кодам.
    Для написания с 0 собственного интернет магазина понадобится кучу времени, проб, ошибок и т.д.
    Да и без понимания как работают сайты вряд ли можно создать что то человеческое.
    Ответ написан
    2 комментария
  • Как сделать форматированный вывод в LESS подобно SASS?

    soprun
    @soprun
    Software Architecture
    У меня все в одну строчку ( компрессия )...
    Красотой нужно любоваться в самом less, а css должен быть оптимизирован для пользователей ( то есть как можно меньше весил )
    Ответ написан
    Комментировать
  • Можно ли адаптивно сверстать данный макет?

    soprun
    @soprun
    Software Architecture
    Ну вообще я тоже придерживаюсь мнения

    А ваш макет рожден быть фиксированным. Хотите адаптивный, то думайте об этом перед созданием дизайна.


    Однако можно и его адаптировать, но с дополнительным затрат времени.
    Под под планшеты можно сделать без особого геморроя.

    И если есть Возможность делайте редизайн! И не заморачивайтесь с адаптацией текущего макета.
    Ответ написан
    Комментировать
  • Где вы используете размеры в em?

    soprun
    @soprun
    Software Architecture
    Еще она отлично масштабируется и ее использую для указания размера элементов.
    Что касается сетки то лучше использовать не EM, а REM так как размер считается по другому..
    Так же посмотрите на VH и VW...
    Ответ написан
  • Возможно ли защитить сайт от скачивания файлов с других ресурсов?

    soprun
    @soprun
    Software Architecture
    Так как "парсеры" других ресурсов читают html, можно сделать добавление ссылки через javascript ( имею в веду на страницу ссылка будет вставляться в определенный элемент).

    Так же создать простую систему токенов.

    Например у вас есть папка где лежат Ваши файлы "site.com/myfile/", все запросы к данной папки будут перенаправляться на файл обработки, где и будет проверяться "токен"..

    Ссылка будет выглядеть так:
    site.com/myfile/prog.exe?token=1234567890

    GET параметр "token" сравниваем с тем что будет в сессии пользователя, если все хорошо от открываем файл, если нету то и скачать нельзя...

    Как правило парсеры не хранят сессии и не смогут скачать файл...

    -------- Решение:

    Давайте с начало определимся с видом ссылки на файл.

    Можно сделать так:
    /myfile/img.jpg?b31598b111cf1c175e956830b764e3f1e6d0a364
    или вот так:
    /myfile/img.jpg?token=b31598b111cf1c175e956830b764e3f1e6d0a364

    Мне более симпатичен первый вариант.

    1. Необходимо в конфигурационном файле сервера сделать что бы все запросы по определенной папки открывали файл проверки.

    Например download.php
    По настройки для вашего веб сервера можно найти примеры водяного знака для изображений.
    Принцип точно такой же.

    Настройка .htaccess
    <FilesMatch "\.(gif|jpg|jpeg|png)$">
       RewriteEngine On
       RewriteCond %{REQUEST_FILENAME} -f
       RewriteRule ^(.*)$ /download.php?file=$1 [T=application/x-httpd-php,L,QSA]
    </FilesMatch>


    2. Необходимо создать сессию и ключ.
    session_name('session');
    session_start();
    
    define('token', "?" . hash('sha1', session_id() , false));
    # define('token', "?token=" . hash('sha1', session_id() , false));


    Придется добавить в ваши шаблоны константу "token" в конец ссылки.

    3. Проверка ключа download.php

    <?php
    
    session_name('session');
    session_start();
    
    # if( !empty($_GET['token']) && $_GET['token'] == hash('sha1', session_id() , false) )
    
    if (isset($_GET[hash('sha1', session_id(), false)])) {
        if (ob_get_level()) {
            ob_end_clean();
        }
    
        # $file = $_SERVER['DOCUMENT_ROOT'] . '/' . preg_replace('/%2F/', '/', urlencode(trim(preg_replace('%\?.*%i', null, $_SERVER['REQUEST_URI']), '/')));
        $file = $_GET['file'];
    
        if (!is_file($file)) exit("Файл не найден!");
    
        // заставляем браузер показать окно сохранения файла
        header('Content-Description: File Transfer');
        header('Content-Type: application/octet-stream');
        header('Content-Disposition: attachment; filename=' . basename($file));
        header('Content-Transfer-Encoding: binary');
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($file));
    
        // читаем файл и отправляем его пользователю
        readfile($file);
        exit;
    
    } else exit("Неверный ключ авторизации");


    Более короткий вариант:
    <?php
    
    session_name('session');
    session_start();
    
    if (!isset($_GET[hash('sha1', session_id(), false)])) exit("Неверный ключ авторизации");
    
    if (ob_get_level()) ob_end_clean();
    
    if (!(!empty($file = $_GET['file']) && is_file($file))) exit("Файл не найден!");
    
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename=' . basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    
    exit (readfile($file));
    Ответ написан
    5 комментариев
  • Как создать условие в php для проверки странницы?

    soprun
    @soprun
    Software Architecture
    Наверное самый простой способ:
    switch($_SERVER['REQUEST_URI'])
    {
        case '/register/':
            echo '/register/';
            break;
        case '/page/':
            var_dump('/page/');
            break;
        case '/user/':
            print_r(array('/user/'));
            break;
        default:
            echo 'Хьюстон, у нас проблемы!';
            break;
    }
    Ответ написан
    Комментировать