Кривая верстка страницы
Полетел блок верстки, как выровнять его под общий стиль?
Первые блоки (точнее, таблицы) находятся внутри еще одной таблицы-обертки (с классом main-table), которая формирует ширину центральной колонки.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43310
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Вступление на путь верстальщика
Итак, ты прочел название и заинтересовался. Сейчас я немного сумбурно, но все же введу тебя в курс дела, если ты совсем в «в этом вашем вебе» не понимаешь.
Что же такое верстка?
Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается HTML5/CSS3, с помощью которых размечает страницу. Создает ее с самого зеро, то есть с пустого документа.
HTML – используется исключительно для разметки. CSS или каскадные таблицы стилей – для управления потоком документа, придания элементам, заранее созданным в разметке определенной формы, размещения их в том или ином порядке, манипуляций с текстом, размерами etc. Они идут в связке.
В итоге получается готовая страница сайта. Сайты верстают, чаще всего с psd макетов, которые предоставляет дизайнер. Макет разбирают в фотошопе. После верстки готовый документ не является завершенным сайтом. Это просто оболочка, причем статичная. Дальше идет обработка с помощью JS, подключение скриптов, работа серверных программистов и еще куча всего.
По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.
Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.
Есть еще бэкенд. Бэкенд – серверная сторона, отвечает за взаимодействие с сервером, непосредственно работу сайта, оперирование данными от пользователей и т.д. В этой пасте бэкенду почти ничего не посвящено. Материалов у нас очень мало, ткак не то направление. Если кто поделится, будем рады пополнить свои закрома.
Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:
На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание — попробовать можно, оно того стоит.
Полноценным фронтендерам, как специалистам нормального уровня, уже нужно добавлять кучу скиллов конкретно по их направлению. Тут что-то универсальное посоветовать сложно, так как направлений есть дохуя. Полюбому понадобится хорошее знание одного из языков программирования, что ориентированы на веб.
И это отмечу, далеко не предел, даже на начальном этапе расти есть куда. Вариантов масса. От псевдотрехмерных техник создания сайтов на параллаксе, до запила крутых приложений на JS, с перспективой перехода на мобильные платформы. Да что там говорить, даже игры умудряются пилить, и довольно удачно.
По поводу работы. Она есть. И места есть, и заказы есть, и конкуренция есть. Последняя причем есть везде. Если ты ноешь, что работы нет, значит плохо искал, либо живешь в глухом селе хуй знает где. Тогда сочувствую бро, тебе только в переезд или во фриланс.
Основные направления: фриланс или конторки.
О фрилансе ты наверняка слышал хоть немного. Есть местные или зарубежные биржи, где люди выкладывают свои заказы разных уровней. От «поправь шрифт на сайте для мобильных версий» до «запили мне рабочий аналог фейсбука за 30 долларов» (утрировано). Из зарубежных самый популярный – Upwork. Кстати в воркаче есть постоянно живущий тред по апворку, где можно узнать больше информации, советую читнуть тамошний фак.
Новичкам на фрилансе сложновато за счет сильной конкуренции (чаще всего вас просто будут игнорить заказчики), плюс при работе на зарубежных сайтах нужно знание английского, но это не значит, что не стоит и пытаться. Лично знаю людей, которые начинали работать с совсем уж мелочных заказов на какой-то пидорашкинской бирже, а затем перекатились на конкретный такой запил сайтов на апворке.
Конторки – местные кружки веб-макак локального или глобального уровня. Пилят от мелких сайтов торгашам с рынка, до довольно крупных продаваемых приложений (если тебе повезло в такую попасть со старта). Основная задача местных анонов – пробиться в одну из них. Собственно, материалы в треде как раз и предназначены для того, чтобы выбить ентри левел. Через несколько месяцев пребывания там, ты, если не конченый дебил, уже и сам будешь знать, что тебя ждет, что дальше делать и куда двигаться.
На фрилансе больше нужны люди оркестры, в конторках скорее необходим человек более узкой специализации. Но бывает всякое.
МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.
Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.
Необязательно вычитывать и проходить абсолютно все, что есть в пасте. Какие-то вещи тут повторяются, какие-то тебе и вовсе не нужны. Что-то возможно даже немного устарело. Чего-то не хватает. Сначала думай головой.
1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.
http://htmlacademy.ru/ — ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.
http://learn.javascript.ru/ — по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.
http://codeschool.com/ — тут платно, но есть бесплатные курсы, годные вещи про jquery и git
http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.
http://teamtreehouse.com — тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.
Интенсивы от академии:
Базовый интенсив HTMLacademy за 2015 год:
Продвинутый интенсив HTMLacademy за 2015 год:
Лично я бы советовал сначала браться за http://htmlacademy.ru/ . В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.
Курсы дадут понимание элементов верстки, но только разрозненное. Вряд ли ты сможешь после них сверстать полноценный сайт самостоятельно, это нормально. Для того и нужен базовый интенсив. После него ты сможешь делать фиксированные простенькие странички. Запили минимум 3 из представленных учебных макетов. Практика просто необходима.
Затем переходи на продвинутый интенсив. Твоя основная задача там — освоить продвинутые инструменты верстки и адаптивность. Сверстай парочку тамошних тестовых макетов применяя все вышеописанные технологии и приемы.
Дальше можешь выкачивать макеты с простор интернета и верстать уже их. Наращивание сложности приветствуется. Где не прописана адаптивность, тоже запили сам. Старайся в каждом новом проекте улучшать код. Черпай инфу из инета и литературы. Узнавай полезные приемы.
Не лишним будет ознакомиться с сетками на flexbox и прочими новыми фишками. Вот здесь уже можно проплатить, если есть желание, продвинутые курсы в академии. Месяц там стоит 300 рублей, и за это время ты вполне успеешь пройти все даже дважды. Это не то чтобы мастхев, но понимание работы ксс-анимаций, хороших практик верстки, различных продвинутых элементов в новой спецификации и т.д. там дается. Хотя я буду лукавить, если скажу что всю эту инфу нельзя найти в инете и в разрозненном виде.
Для работы понадобятся текстовые редакторы или среды разработки, тут уж решать надо самому.
Тут надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.
http://www.ozon.ru/context/detail/id/20279391/ — «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS» Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.
http://habrahabr.ru/post/240219/ — «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.
http://frontendbookshelf.ru/ — список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.
http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.
Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:
Появились новые тренировочные задания с ТЗ:
ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
2. Если вы дошли сюда, значит уже что-то умеете, теперь пойдут профессиональные штуки, очень полезные для общего развития
http://frontender.info — годный ресурс по фронт-енд тематике
http://habrahabr.ru/post/114256/ — чеклист верстки. Если ваше говно проходит хотя бы половину пунктов, вы без проблем найдете работу в своем задрищенске.
tympanus.net/codrops — тут есть годная еженедельная подборочка новостей из мира фронт-енда, рикаминдую
http://www.smashingmagazine.com/ — многое отсюда так или иначе переведено на русский, ресурс полезный для развития
http://css-tricks.com/ — тут можно найти много готовых шаблонов для решения часто встречающихся задач
http://ru.bem.info/ — БЭМ, методология фронт-енд разработки от Яндекса, рикаминдую прочесть доки, наверняка вы нихуя не поймете, но фраза «я прочитал конечно документацию БЭМ, но в силу своего уровня пока понял оттуда совсем немного» звучит на собеседовании гораздо лучше чем хлопание глазами. По БЭМу также немного поясняют в интенсиве академии.
http://goratchet.com/ — mobile first фреймворк от создателей бутстрапа.
http://getbootstrap.com/ — бутстрап. без комментариев, маст хэв. Популярный фронт-енд фреймворк, можно положить его в сонову вашего проекта или быстро накидать сайтец, если дизайн не важен.
http://www.ibm.com/developerworks/ru/ — очень неплохой ресурс от всем известной компании, есть там и статьи про веб-разработку.
http://sass-lang.com/ , http://lesscss.ru/ , http://lesscss.org/ , http://learnboost.github.io/stylus/ — тоже полезные шутки, значительно прокачивают ваш CSS. Так называемые препроцессоры. Я пользуюсь less.
http://codepen.io/ — ресурс с кучей интересных примеров кода.
Список полезных каналов на ютубе
3.Что делать дальше?
Загляни в програмач, там есть треды по JS и PHP. Читни тамошний фак, реши пару задачек и думай, что тебе хочется дальше делать. Здесь все-таки больше базовый фронт-енд и верстка, поэтому серьезные вопросы по программированию и инфу следует черпать там.
Запили себе портфолио, желательно на гитхабе. Там же можно через gh-pages отображать готовые странички из репов. По сути, имитировать хостинг, только он неполноценный. Впрочем, для заказчика и этого хватит.
Гайд от анона по гитхабу:
Постоянно пополняй портфолио, улучшай знания, развивайся. Пролистай вакансии в своем мухосранске. За его пределами тоже посмотри. Поймешь необходимые требования и направления развития. Можешь запилить резюме. Где это делать – решать тебе. Не бойся ходить на собеседования, разве что по знаниям будешь сильно отставать. Как минимум тебя направят в нужное русло, что-то подскажут.
Хорошие конторки всегда заинтересованы в притоке разрабов. Такие могут и под свое крыло взять, снабдить материалами, подкинуть кучу полезной инфы. И с нами поделиться не забудь.
Как правило, несколько месяцев хватает на то чтобы научиться хорошо верстать, а это уже претензия на трудоустройство. На Джаваскрипт уйдет больше времени, хотя хардкорный JS необходим для вакансий, что уровнем повыше будут(но не всегда).
ОБЩИЕ МАТЕРИАЛЫ БЕЗ ОСНОВАТЕЛЬНОЙ СОРТИРОВКИ
Дальше будет куча мала из всего, чего только можно. Но лучше бы тебе в ней порыться, найдешь множество полезного.
Макеты для верстки:
Гайды по форматированию кода:
http://mdo.github.io/code-guide/ — стайлгайд по форматированию HTML и CSS
CSS Style Guides http://css-tricks.com/css-style-guides/ — Статья со списком стайлгайдов
Ставить или не ставить закрывающий слэш? (англ.) http://www.colorglare.com/2014/02/03/to-close-or-not-to-clos. — статья-рассуждение по поводу закрывающего слэша в одиночных тэгах
Пояснение по блочной модели/сетках:
Хорошая статья про флоаты на английском All About Floats | CSS-Tricks — http://css-tricks.com/all-about-floats/
Фотошоп для верстальщика :
Улучшение и полировка кода, полезные приемы:
Progressive Enhancement или всё-таки Graceful Degradation — http://habrahabr.ru/post/157115/
Так ли дорого прогрессивное улучшение? — http://habrahabr.ru/post/163877/
Туториал: Progressive enhancement на примере формы входа — http://htmlacademy.ru/demos/1
Progressive Enhancement: практичный подход к современной кроссбраузерной разработке. Видео доклада и презентация. — http://tech.yandex.ru/events/yac/2012/talks/373/
Тесты поддержки новых возможностей в браузерах
Набор полифилов и рекомендаций
Сборник CSS3 анимаций
Генераторы CSS3 свойств
Стартовый шаблон страницы
Наборы веб шрифтов
Работа с префиксами
Продвинутый валидатор ХТМЛ
Замеры скорости работы сайта
Таблица UTF-8 символов
Паттерны для фонов
Введение в JavaScript:
Библия и 9 заповедей начинающего версталы от господа бога Гугла
Тут ещё немало полезной инфы, актуальной, вдруг кому пригодится https://otzyvmarketing.ru/profession/website-html-editor/
Спасибо за пост, начал свой путь верстальщика (15.08.2020)
Пните меня через год, надеюсь я выдержу
Актуально в 2020?
Благодарю! Сохранил этот клад себе.
Социальная инженерия глазами жертвы
Простые правила, которые помогут вовремя распознать фишинговые атаки и избежать их последствий, а также краткий обзор основных видов таких атак
Большая часть компьютерных атак становятся успешными благодаря социальной инженерии. Ежедневная рутина сопровождается прочтением десятков писем, среди которых легко пропустить единственное «поддельное».
Мы провели более 20 успешных проверок, в которых использовалась социальная инженерия. Раз за разом один результат – удивление и фраза «мы знали о таком, но сами не видели». Банальные и базовые ошибки в работе сотрудников и недоумевающий взгляд администраторов.
Таким образом, получилось сформулировать задачу – наглядно указать, на что обратить внимание в ежедневной работе, чтобы не стать жертвой таких атак.
Кому и как это использовать?
Администраторам и специалистам по ИБ – пожалуйста, используйте материал как брошюру для обучения сотрудников. Информация для вас лично указана отдельной сноской.
Сотрудникам предприятий – ознакомьтесь и знайте врага в лицо. В статье только нужная в работе информация. Не обращайте внимания на заголовки-термины (названия атак), это технические детали. Сноски для администраторов и специалистов безопасности также смело пропускайте.
Общие правила при прочтении писем
Само по себе прочтение поддельного (фишингового) письма ничего опасного за собой не влечет. Но переход по ссылке в письме или открытие документа приведут к серьёзным последствиям.
Мы получили следующее письмо:
Предупреждения на этапе прочтения письма
Предупреждения почтового клиента – это не нормально:
Это еще не делает письмо фишинговым, но обязано насторожить.
Важно!
Такие предупреждения – один случай на сотню. В большинстве случаев никаких предупреждений не будет:
Адрес отправителя
Мы знаем, что наш почтовый адрес — zubilin@originsecurity.ru.
Адрес отправителя — originsecurity@mailer.xyz.
Первое правило:
ВСЕ, что написано ДО знака «@» – неважно!
Письмо отправили не ваши коллеги, если есть различие хоть в одном символе после знака «@».
Такое письмо необязательно фишинговое, но уже нельзя слепо верить написанному, сразу же открывать вложения и переходить по ссылкам.
Важно!
originsecurity.ru и 0riginsecurity.ru, например, являются разными именами. Злоумышленник использует такие способы маскировки, как: замена буквы «о» на цифру «0» или буквы «l» на цифру «1», две буквы «rn» на одну «m» и наоборот и т. д.
Как видно – письмо отправили не сотрудники финансового отдела, как написано в тексте. После «@» имя другого предприятия. Это уже повод обратиться в отдел информационной безопасности или к другому администратору, который подскажет куда обратиться и что сделать.
Для администраторов и специалистов ИБ:
В статье мы часто просим сотрудников общаться к вам за помощью. Создается иллюзия, что у вас прибавится сотня лишних звонков и обращений, попади инструкция к сотрудникам. Спешим обрадовать – инструкция освобождает вас от лишней работы.
Во-первых, описанные маркеры действительно стоят того, чтобы на них обратили внимание. Обращений много не будет. Во-вторых, проще отреагировать на обращение работника, чем устранять последствия заражения на предприятии.
Далее.
Да, как вы могли возразить, адрес отправителя можно подменить. В этом случае претензия к настройкам безопасности почтового сервера. Даже примитивные почтовые фильтры и антивирусы для почтового сервера видят по служебным заголовкам, что адрес отправителя подменили. Такие письма автоматически обязаны помещаться в спам.
Подпись отправителя
Взгляните на подпись. Злоумышленнику часто неизвестен формат внутренней переписки.
Подпись в фишинговом сообщении будет отличаться от общепринятой.
В случае несоответствия обратитесь к администраторам, высказав свои подозрения.
В случае несоответствия обратитесь к администраторам, высказав свои подозрения.
Вложение в письме
Если на компьютере установлен антивирус – это ни в коем случае не защищает вас на 100%.
Внимательность – лучшее средство защиты.
Следующая задача – посмотреть на имя файла вложения:
Формируем новое правило:
Важно только то, что написано после ПОСЛЕДНЕЙ точки.
Мы указали только популярные форматы. Если файл вызывает подозрения, то лучше перестраховаться и получить рекомендацию администратора.
Для администраторов и специалистов ИБ:
Аналогично предыдущей заметке — если почтовый сервер пропускает потенциально опасные расширения во вложениях, то это вопрос администрирования почтового сервера. Настройте защиту так, чтобы такие вложения не доходили до сотрудников.
В подготовке правил фильтрации почтовых вложений помогут уже существующие наработки. Так, автор Oletools собрал в одном месте расширения исполняемых файлов (https://github.com/decalage2/oletools/blob/master/oletools/rtfobj.py, 280 строка).
В дополнение определите, нуждаются ли сотрудники в постоянном отображении расширения файлов. С одной стороны, безопасность предприятия, с другой – для некоторых это может стать проблемой при переименовании файлов.
В нашем случае формат вложения «.exe». Уже 2 серьезных триггера, смело обращаемся к специалистам по безопасности или администраторам. С вероятностью близкой к 100% письмо фишинговое.
Документы Microsoft Office
Если потенциальному злоумышленнику удалось убедить вас открыть документ Microsoft Office – запомните еще одно простое правило:
Если источник недоверенный, как бы вас не просили – НИКОГДА не нажимайте на кнопку
сверху. На любую кнопку сверху.
Ни «Разрешить редактирование», ни «Включить содержимое», ни что-либо еще.
Формулировка на таких кнопках не передает сути и масштаба угрозы. Равносильно кнопке «Заразить компьютер».
Попытка убедить нажать на кнопку сигнализирует о вероятном фишинге. Сообщаем соответствующим людям.
Для администраторов и специалистов ИБ
Мы не рассматриваем сценарии, когда атака направлена на эксплуатацию уязвимостей MS Office. Ведь у ваших сотрудников установлена актуальная версия ПО и автоматическим его обновлением занимается сервер WSUS.
Ссылки в тексте
Просьба перейти по ссылке и ввести свои данные – главное оружие в фишинге.
Вы переходите по ссылке в письме и видите сайт вашего предприятия.
Первое, что мы проверим – соответствие адреса сайта в адресной строке адресу сайта вашего предприятия:
Внимание на строку, отмеченную красным. Строчка, отмеченная зеленым ничего не значит. Злоумышленник способен написать там что угодно!
Различие хоть в одном символе сигнализирует об опасности сайта (сайт-оригинал goSuslugi.ru, в примере же ссылка на goZuslugi.ru) – закрываем сайт и обращаемся к администратору.
Правило для обращения со ссылками:
Просьба ввести учетные данные (авторизоваться) на сайте по ссылке – признак фишинга. Не вводите свои данные на сайтах из писем, когда не уверены в отправителе.
Замочек возле сайта
Иллюзию безопасности сайта создает замочек возле него (обычно зеленый или серый).
Запомните раз и навсегда:
Никакой замочек возле сайта не является гарантией безопасности!
Важен только адрес сайта. Ничего больше.
Мы рассмотрели общие правила чтения электронных писем, которые помогут распознать фишинг. Перейдем от общего к частному. Краткий обзор существующих угроз.
Виды почтовых атак. Фишинг целевой
Это случай, рассмотренный ранее:
Атаки нацелены на сотрудников предприятия, имеют определенную идею и часто хорошо подготовленные вредоносные вложения и сайты.
Для администраторов и специалистов ИБ
При обнаружении таких писем собственноручно или при получении информации от сотрудника рекомендуется:
1. Выполнить почтовую рассылку сотрудникам предприятия с предупреждением о фишинге. Дать в письме инструкции и запретить открывать вложения или переходить по ссылкам, вводить учетные данные;
2. Определить получателей писем по фишинговому почтовому домену;
3. Если масштабы проблемы ограничены несколькими получателями, лично обсудить рассылку (кто что открыл, куда перешел и т.д.);
4. Заблокировать утекшие учетные данные при их наличии;
5. Добавить домен в черный список на почтовом сервере или средстве защиты;
6. Определить наличие заражения, локализовать зараженные компьютеры, произвести реагирование на компьютерный инцидент. При отсутствии компетенций обратиться к специалистам.
Виды почтовых атак. Фишинг массовый
Такие атаки берут не качеством, а количеством. Рассылаются во множество предприятий и склоняют сотрудника к действию под давлением на страх, «халяву» и т.д.
Бесплатный сыр только в мышеловке. Поговорка точно описывает метод защиты от этого вида фишинга. Есть и дополнительное правило:
Запрещено даже вчитываться в такие письма. Злоумышленники умело управляют эмоциями жертв.
Виды почтовых атак. Вейлинг
Фишинговые атаки на конкретного человека на предприятии. Крайне тщательно подготовленные вредоносные вложения и тематика. Злоумышленник изучает жертву, либо знает о деятельности жертвы (направляет фишинговое письмо на тему закупок по адресу zakupki@originsecurity.ru, например).
Для администраторов и специалистов ИБ
Если сотрудник вынужден работать с большим количеством входящей корреспонденции – следует ограничить компьютер сотрудника на уровне сети, чтобы избежать заражения сети предприятия.
Виды телефонных атак. Вишинг
Часто мы при проверках не ограничиваемся одной электронной почтой. На ваш мобильный или рабочий номер может поступить звонок. Сам факт ответа на неизвестный номер безопасен. Но…
Если неизвестный человек звонит на мобильный и интересуется рабочими вопросами (процедурой входа в здание предприятия, наличием охраны, рабочими программами, ФИО сотрудников, и чем-либо еще по работе) НЕ ВАЖНО кем он представился – спросите ЕГО рабочий телефон (свой не давайте) и сообщите, что готовы обсуждать рабочие вопросы только по рабочему телефону. Так же уточните как к нему обращаться и из какого собеседник отдела.
Злоумышленник может заговаривать зубы и даже угрожать (увольнением, лишением премии и т.д.). Кладите трубку с фразой: «Я не могу обсуждать это по телефону, всего доброго». И заявляете о своих подозрениях специалистам информационной безопасности или администраторам. Никаких претензий или штрафных санкций к вам после такого заявления не может быть применено.
Для администраторов и специалистов ИБ
При поступлении жалоб выясните, существует ли на предприятии человек, которым представился потенциальный злоумышленник и определите легитимность звонка. В случае атаки сделайте рассылку по всем сотрудникам вашего предприятия для уведомления о поступлении звонков данного характера и запретите обсуждать рабочие вопросы с неизвестными собеседниками.
Виды физических атак. Подбрасывание носителей информации
Подобранные (на территории предприятия или в домашнем подъезде, неважно) носители информации (флеш-карты памяти, диски и т.д.) запрещено подключать к компьютерам предприятия.
Популярная атака – раскидать флешки (или что проще – диски, подписанные «Зарплата кадры 2023») по периметру предприятия, в надежде на любопытство жертвы. Сразу при подключении такого носителя компьютер заражается, и злоумышленник проникает в сеть.
Если вы не удержались и решили, что информация просто не может пройти мимо вас, а после подключения носителя или запуска документа компьютер стал странно себя вести, например, на мгновение появилась командная строка (скриншот ниже), лучше перестраховаться и обратиться к администраторам.
Для администраторов и специалистов ИБ
Исследование подобных устройств и носителей должно проходить на изолированных от сети компьютерах или виртуальных машинах.
Виды физических атак. Подключение носителей информации сторонними лицами
Пройти пост охраны дело техники. Находясь на территории предприятия злоумышленник просит случайного сотрудника распечатать документ с его компьютера. Сотрудник своими руками подключает флеш-карту памяти, открывает зараженный документ и заражает сеть.
Злоумышленник покидает место проникновения с напечатанными документами и довольной улыбкой.
Метод противодействия прост – ведем человека к администратору и если тот посчитает нужным, то распечатает документ. Или же правило:
Не позволяйте подключать неизвестные устройства и накопители информации к своему
рабочему компьютеру.
Заключение
В заключении сформулируем еще одно, последнее правило:
Не пересылайте потенциально опасный документ коллегам!
Обычно это происходит со словами: «У меня не открывается, попробуй ты». Мы сталкиваемся с такой инициативой на каждом третьем аудите. Будьте внимательней.
То, что на первый взгляд кажется объемным справочником – на деле перечень простых правил, которые помогут распознать большинство атак с использованием социальной инженерии.
Даже если вы попались на уловку злоумышленника, сообщили какую-либо информацию, открыли документ или ввели учетные данные – ОБЯЗАТЕЛЬНО сообщите об этом в отдел информационной безопасности или администраторам. Таким образом вы снимите с себя ответственность, а специалисты смогут быстро отреагировать и не дать злоумышленнику использовать полученную информацию.
Для администраторов и специалистов ИБ
Данная шпаргалка поможет сотрудникам вашего предприятия противостоять фишинговым атакам. Регулярно проводите тестовые фишинговые рассылки своими силами. Если сил, времени или компетенций не хватает – обратитесь к руководству с просьбой о привлечении специалистов в данном направлении.
Чтобы ничего не забыть, сделали для вас плакат-напоминание. Печатаем, вешаем на стену,
пользуемся. Оригинал по ссылке
Ответ на пост «Советы тем, кто реально хочет стать программистом»
в IT котируются две вещи: мотивация, мозги и умение считать до трех)
А если серьезно — лучше в IT идти менеджером\QA и т.п., чем программером. Если человек не стал программером к сознательному возрасту, то зачем тратить столько сил, когда можно получить результат (деньги и интересную работу) проще?
Но, все же, если прям в программеры, то вот мой список в порядке убывания приоритета:
1. Определиться, в какой области программить: фронт? бэк? низкоуровневые котроллеры? хайлоад? бигдата? геймдев (фронт? бэк? ии?). Для каждого пункта свой набор требований и дальнейшие пункты
2. Определиться, какое количество ресурсов ты готов на это потратить. Это хобби, потенциально могущее перерасти в работу? Это сфера деятельности? Ты свободен как ветер и можешь позволить себе экспериментировать, или у тебя семеро по лавкам и зарплата тебе нужна вот прям через месяц? Ты можешь убить полгода на то, что не выгорит?
3. Исходя из п.2 трезво оценить п.0: качество своих мозгов и длину шила в попе. Одно, в принципе, компенсируется до некоторой степени другим. Т.е. человек после ядерной физики даже без особой мотивации освоит, условно, питон для бигдаты или С для контроллеров. Человек, который (мое увожение) смог соскочить с иглы или дочитал Улисса, в состоянии освоить рихтера и пойти джуном в c#.
Если же и с тем, и с другим швах, то стоит подумать о своих сильных сторонах. Умеешь рисовать — рисуй персонажей. Умеешь систематизировать — иди в аналитики. Умеешь работать с людьми. ну вы поняли
4. В IT очень быстрый фидбек. Не плитку класть, конечно, но и не работы уровня нобелевки, когда человек полжизни работает на свое имя, а потом имя на него. Тут ты сегодня чего-то стоишь, а завтра пролетаешь, как фанера над Парижем. Ты либо тащишь, либо вседавайпока. Плюсы такой ситуации — шанс есть у каждого. Минусы — расслаблять булки не получится. Люди без поинтов из п.3 тупо не задерживаются в IT, вне зависимости от специализации.
5. В зависимости от выбранного на п.1 направления, прокачивать соответствующие скилы. Например, в моей области (c#, микросервисы, бэк) знание алгоритмов сортировки ну никак не поможет работе. А вот понимание, на каком уровне модели OSI реализуется TLS — очень даже. Умение написать обход дерева пригодится едва ли, а понимание отличия асимметричного шифрования от симметричного — более чем. Даже знание принципов ооп (король умер, да здравствует король) не так уместно, как, например, навык профилирования SQL-запроса. А уж сколько я видел менеджеров, которые перт-диаграмму даже в уме не строят (не надо так).
6. И да, самое главное — это получать удовольствие от того, что делаешь. Иначе тут вообще никак, спечёшься. А для этого нужно понимать, что доставляет тебе удовольствие, понимать себя (тут уместны аналогии с сексом). Меня, например, штырит от состояния потока. Про это сказано много, по делу и не, но вкраце: в потоке качество твоей жизни подпрыгивает. С этим мало что может сравниться. Как сказал один коллега, ты получаешь кайф, а тебе за это еще и деньги платят) А если у тебя уже есть в своей области поток, подумай хорошенько, стоит ли его терять!
Ответ на пост «Советы тем, кто реально хочет стать программистом»
Принцип подстановки Лисков на паровозиках: у васть есть базовый класс Паровозик. От него наследуются (т.е. развивают идею Паровозика), четырехколесный Светлячок, восьмиколесный Муравей, шестнадцатиколесный Верблюд и восьмиколесный Стрела. При этом у вас есть водонапорная станция, которая умеет заправлять водой, станция с углем и рельсы. Каким бы ни был паровозик, он ездит по рельсам, станции умеют заправлять его водой и углем, при этом они не задумываются, что это за паровозик. Потом вы придумываете электровоз, но он не может развивать идею паровозика, поэтому вы решаете, что сделаете базовый класс Поезд, от которого наследуется Паровозик и Электровозик, с Поездом умеют взаимодействовать рельсы, с Паровозиком — водонапорная станция и станция с углем, а ЛЭП умеют взаимодействовать с Электровозиком.
Кажется, кто-то умный сказал, что если ты не можешь ребенку объяснить сложную вещь, ты ее не понимаешь.
10 ошибок начинающего верстальщика и как их избежать
Глеб Летушов, редактор-фрилансер, написал статью специально для блога Нетологии о том, какие ошибки совершает начинающий верстальщик и как их избежать. Статья для конкурса блога.
Когда пытаешься сверстать первый сайт, то не обращаешь внимание на какие-то мелкие ошибки и недочеты. К сожалению, если их вовремя не заметить и не убрать, то они перейдут от одного сверстанного сайта к другому.
Чтобы не переучиваться в дальнейшем, обратите внимание на распространенные ошибки.
1. Неправильные имена классов
Начинающие верстальщики дают классам сокращенные или ничего незначащие названия и даже пишут их кириллицей.
Как избежать: называйте классы английскими словами, отражающими их суть. Слова не сокращайте. Нельзя использовать имена, начинающиеся с цифры или дефиса, после которого стоит цифра.
2. Использование идентификатора #id для описания стилей блока
Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.
Идентификатор #id также используется, чтобы передавать информацию в JavaScript. Поэтому можно запутаться среди разных #id, потому что некоторые используются для скриптов, а другие — для оформления.
Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.
3. Описание стилей для элементов внутри атрибута style
Когда только сталкиваетесь с html-разметкой, то непонятно, как связаны html и CSS и как задать нужные стили в CSS. Чтобы упростить задачу, начинающие верстальщики не трогают CSS-файл, а задают оформление элемента внутри атрибута style в html.
Возможно, для одного элемента такой способ подойдет. Но проблемы начнутся на больших сайтах, где одним классом задается оформления нескольких элементов.
Как избежать: задавать стили для каждого элемента в СSS-файле.
4. Использование тега абзаца <p> для разметки
Браузер по умолчанию добавляет к <p> некоторые внешние отступы, чтобы параграф текста выглядел отдельным блоком. Чтобы облегчить работу и не добавлять отступы к изображению с помощью стилей, некоторые верстальщики оборачивают его тегом <p>…</p>.
Как избежать: для разметки страницы использовать специальные теги <div> и <span>, прописать нужные стили для этих тегов.
5. Много изображений в высоком разрешении на странице
Страница, которая перегружена изображениями с большим весом, долго загружается. Пользователям надоедает ждать полной загрузки и они просто закрывают страницу сайта или пытаются ее перезагрузить. Если открыть такую страницу с телефона, то, помимо долгого времени загрузки, она потребует большого трафика.
Как избежать: оптимизировать изображения, сжать их, уменьшив вес файла с помощью графических редакторов. Можно проработать структуру страницы, и, если изображение не несет смысловой нагрузки, удалить его.
6. Не сброшены изначальные настройки
Каждый браузер по умолчанию использует свой стиль в основных HTML-элементах. Если не сбросить настройки, то для этих элементов браузеры выставят разные отступы. Из-за чего одна и та же страница в нескольких браузерах будет выглядеть по-разному.
Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:
Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.
7. Использование блочного элемента внутри строчного
В HTML существует два типа элементов: блоки и строки.
С помощью блоковых элементов выстраивается структура страницы. Это <div>, <ul>, <h1>, <h3> и другие элементы. Их свойство по умолчанию — display:block.
Строчные элементы, к которым относятся <span>, <li>, <a>, <label>, используются внутри блоковых. По умолчанию их свойство задается как display:inline.
Что такое верстка сайта: виды, методы, инструменты
Верстка — формирование структуры будущего сайта в HTML-документе и перенос дизайнерского наброска в такой документ. Перенос макета в веб-страницу происходит благодаря использованию HTML, CSS, JavaScript и клиентских сценариев. Цель верстки сайта — сделать так, чтобы макет был перенесен в реальный сайт максимально точно и близко дизайнерской задумке, с сохранением расположения текста, заголовков, изображений, других медиафайлов, таблиц. В английском языке термин «верстка сайтов» как таковой отсутствует, но вместо него применяется термин Front-end Web Development. Однако, стек технологий фронтендера гораздо шире, чем у чистого верстальщика, который оперируют только HTML и CSS. Фронтендер же — знает большое количество фреймворков, умеет писать код на JavaScript (как минимум), разбирается в AJAX-запросах, знает React, метаязык Sass, а еще PHP, HTML5, Node, Webpack.
Простыми словами, верстка сайтов — это процесс переноса макета на реальную веб-страницу с сохранением первоначальной структуры дизайн-макета.
Пример верстки сайтов привести затруднительно, так как это будет просто код. Например, вот один из способов, как можно разметить шапку сайта:
А это пример верстки сайта — работа с CSS-файлом: задание отступов, полей, обтекания и других параметров, которые изменяют визуальную часть HTML-кода. Без стилей настроить визуальное представление HTML-кода невозможно.
Начало файла «стилей»
Учитывайте, что HTML-файл и файл стилей удобнее всего редактировать, когда они оба выводятся на экран. Например, вот так:
Без верстки перенести дизайнерский макет в условия веб-страницы — невозможно
Этапы верстки
Последовательность верстки сайта, как правило, не отличается (хотя вариации могут встречаться). Вот типичные этапы верстания сайта:
- Перенос дизайн-макета в гипертекст.
- Настройка CSS сайта.
- Внедрение интерактива. Может производиться с использованием JQuery, CSS3, и конечно JavaScript.
- Перенос сверстанного шаблона в условия сайта. Интеграция может производиться в самописный движок или в готовую систему управления контентом (cms).
- Тестирование верстки. На этом этапе специалист оценивает, как ведет себя сайт в разных браузерах и на разных устройствах.
Далее мы не будем разбирать каждый этап слишком подробно, а сосредоточимся только на тех шагах, которые осуществляет непосредственно верстальщик.
Что делает верстальщик на каждом этапе работы
Итак, вот последовательность действий, которую выполняет верстальщик, создавая верстку сайта с нуля:
(намеренно даем ее в упрощенном виде, чтобы не запутать начинающих)
- Формирование пустого HTML-файла. Здесь у нас будет структурное содержимое документа.
- Формирование пустого CSS-файла. Здесь у нас будут «стили» для HTML-файла.
Так выглядит работа верстальщика со стороны
Специалист-верстальщик производит следующие манипуляции:
- Указание кодировки, TITLE, путей к CSS — в head-теге.
- Добавление содержимого. Удобнее всего стартовать с компонентов, которые будут находиться в левом углу сверху (это хедер или шапка) и постепенно направляться в правый нижний угол. Однако, этот подход не является обязательным, но так работать легче.
- Написание структуры будущей страницы в HTML-файле.
- Присвоение классов и ID всем созданным элементам.
- Настройка стилей. В этот файл добавляются свойства и правила, согласно которым будет отображаться содержимое HTML- документа. При добавлении содержимого в этот файл лучше придерживаться определенной логики. Например, сначала задать бэкграунд страницы, затем — выбрать главный шрифт. Другими словами, идти от большего к меньшему.
- Настройка внешнего вида отдельных блоков — происходит уже на втором этапе стилизации. Это может быть настройка местоположения лого, цвета рамки, стиля сайдбара, виджетов или стиля подвала.
- Работа со скриптами. Стандарт для верстальщика на этом этапе — JavaScript. При помощи этого языка задается функциональный элемент сайта и поведение конкретных элементов на странице
- Проверка выведения верстки. Для этого можно использовать онлайн-сервисы, например, Markup Validation Service W3C. О нем и других сервисах подробнее, а также зачем проверять верстку — мы расскажем, но чуть позже.
Виды верстки
В 2023 году распространены пять видов верстки:
Адаптивная. Этот вид верстки умеет адаптироваться к особенностям пользовательского экрана. В итоге — сайт удобен для просмотра абсолютно с любого устройства. Если затрагивать техническую сторону, то сайт верстается под несколько разрешений (минимум четыре), которые чаще всего используются на десктопах, смартфонах, планшетах и ноутбуках. При этом — используются так называемые брейк-поинты — точки слома при достижении которых верстка сайта автоматически трансформируется, чтобы контент оставался читаемым.
Так ведет себя адаптивный макет на трех разных экранах
Для мобильных устройств. Этот тип адаптации макета подразумевает отдельный сайт на самостоятельном поддомене, который выглядит приемлемо только с мобильных устройств. И пользоваться таким сайтом также удобно только со смартфонов. Сайт с мобильной версткой всегда дешевле, чем с адаптивной. И если не планируется, что на сайт вообще будут заходить с десктопа, то мобильное верстание может стать отличным решением.
Мобильная В. хорошо выглядит только на смартфонах
Фиксированная. Устаревший подход, который предусматривает формирование макета с фиксированными значениями компонентов. Размер, при этом, указывается точный, например, в пикселях.
Макет фиксированный и страницу неудобно смотреть на всем, что отличается от экрана десктопа
Отзывчивая или Responsive. Этот тип можно спутать с адаптивным, но на практике — это вообще разные виды верстки. Отзывчивые макеты не «ломаются» на конкретных брейк-поинтах, как адаптивные. Отзывчивый макет — плавно меняется между заданными точками и до последнего сохраняет стабильный вид страницы. Таким образом, сочетаются подходы адаптивного и резинового макетов.
Сравнение адаптивной и отзывчивой В.
Резиновая. Такие макеты подразумевают настройку ширины блоков в процентном соотношении от ширины пользовательского экрана. Сайты на резиновом макете могут хорошо отображаться на разных типах устройства и в 2023 году. Но этот подход постепенно вытесняется адаптивной и отзывчивой версткой.
Резиновый макет умеет подстраиваться под размер экрана пользователя
Методы верстки
Говоря о верстании веб-страниц, нельзя не упомянуть конкретные методы, которые используются для переноса дизайн-макета в документ. Не стоит путать методы с видами — это разные термины. Итак, в 2023 году активно используются четыре метода верстания страниц: фреймы, табличный способ, блочный способ (div-контейнерами) и слои. Каждая техника имеет свой набор достоинств / недостатков. Давайте посмотрим, какие именно.
-
Верстание фреймами — убирает повторы в коде и делает итоговый файл гораздо легче по размеру, но такие страницы плохо индексируется ПС (ведь они не имеют уникального адреса).
Валидность. Проверка верстки: зачем и как делать
Чтобы сайт был удобным для пользователя и соответствовал критериям поисковых систем, необходимо проводить валидацию верстки. Для проверки наличия формальных ошибок в коде HTML и CSS — можно использовать один из многочисленных валидаторов. Например, валидатор W3C:
По сути валидация — это нахождение формальных ошибок в HTML-коде страницы и в «стилях»
Вообще валидация, в некотором смысле, становится анахронизмом. Даже на крутых сайтах валидатор покажет десятки и даже сотни ошибок.
Даже на сайте «Яндекс.Метрики» валидатор W3C нашел десятки ошибок
Тем не менее, фатальные ошибки в коде могут привести к тому, что краулерам Google и «Яндекс» не удастся обнаружить важные элементы на вашем сайте. Устранять абсолютно все ошибки и рекомендации валидаторов — точно не стоит. Но обратить внимание на критические и фатальные проблемы в коде — нужно обязательно.
Инструменты для верстки
Кроме отличного знания HTML и CSS, (а также фронтенд-стека, если это действительно крутой специалист), хорошему верстальщику понадобятся сопутствующие инструменты. Вот восемь главных инструментов верстальщика в 2023 году:
- Редактор: Live Server, Emmet. Очень желательно — что-то специально для выравнивания, например, Prettier
- Проверка на ошибки, валидация: Perfect Pixel и validator.w3.org
- Проверка кроссбраузерности: browserstack.com и lambdatest.com.
У BrowserStack есть целых три инструмента для тестирования верстки сайтов
Примеры использования fontawesome.ru
Ошибки
Мы собрали самые частые ошибки, которые допускают начинающие (и не только они) верстальщики — при переносе макета на страницу: