Что такое красивый код, и как его писать? Красивый код на PHP.

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги

и
• .

  Как оговаривалось в предыдущих публикациях, парный элемент

  создает маркированный список, а
  • — один элемент списка. Для наглядности давайте напишем код простого меню:

    Навигация сайта

    • Главная
    • Новости недели
    • Технологические достижения
    • Чат

    Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

    Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

    Бывают горизонтальные, вертикальные и выпадающие меню. Иногда панель навигации оформляют в виде изображения. Так как сегмент технологий расширился, веб-сервисы делают адаптивными, т.е. структура страниц автоматически адаптируется под размер экрана девайсов. Рассмотрим же перечисленные группы меню.

    Создадим-ка горизонтальную навигационную модель

    Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).

    В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?

    Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

    К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или были созданы специальные префиксы:

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    А теперь полученные знания применим к написанию примера.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Главная О компании Продукция Контакты

    Главная
    О компании
    Продукция
    Контакты

    А теперь вертикально. Я сказал вертикально!

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

    Для этого я воспользовался еще одним свойством css border-radius .

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

    Главная
    О компании
    Продукция
    Контакты

    Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

    Подпункты в меню: выпадающий список

    Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

    

    Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

    Главная Продукция Конфеты Торты Печенье Контакты

    • Главная
    • Продукция
      • Конфеты
      • Торты
      • Печенье
    • Контакты

    В данном примере я разделил единицы меню на два класса:

    1. m-menu
    2. s-menu

    Первый класс отвечает за основное меню, а s-menu – за подменю.

    В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

    Так, при помощи:hover указывается, как будет вести себя элемент при наведении на него курсора.

    При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

    Изначально подменю было задано display: none , что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover , значение свойства display меняется на block и поэтому открывается выпадающий список.

    Как видите, реализация такого приема очень простая.

    Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!

    С уважением, Роман Чуешов

    Прочитано: 1010 раз

    Я приведу основные правила, которые нужно соблюдать при разработке кода, что бы через неделю можно было взглянуть код и определить, какая функция что делать. Еще одним преимущством написания читабельного кода, это простота поиска и устранения ошибок. Сразу скажу, что примеры которые я помечаю как «некорректный», означают не то, что они не работают, а то, что они неккоректны с точки зрения разработке читабельного кода.

    1. Выносите переменные за скобки

    Всегда при выводе на экран текста, переменные в строке необходимо выносить за скобки. Это не только удобно для просмотра, но и эффективно, так как при этим вывод на экран осуществляется быстрей.

    Пример некорректный:

    echo "Value is $val"

    Пример корректный:

    echo "Value is ".$val

    2. Обязательно используйте комментарии

    Каждая функция по возможности должна быть описана небольшим комментарием. Каждый фрагмент, если вы считаете что он достаточно сложный для понимания, должен быть описан небольшим комментарием. И вообще, комментарием должно быть описано все, что вы считаете необходимым. Выбор вида комментария вы должны определить для себя сами. Это может быть одна текстовая строка, или блок строк, в котором описано назначение функции, информация об ее авторе и т.п.

    3. Используйте сокращенный вид функции echo. Например, запись вида

    можно спокойно заменить на

    4. По возможности выносите большие блоки HTML за пределы конструкций php. Не злоупотребляйте функцией php.

    Пример некорректный:

    "; echo "Number before is ".($i - 1); echo "
    "; } ?>

    Пример корректный:

    Number is
    Number before is
    

    Обратите внимание, что тут открывается две конструкции php, а между ними вставляется HTML текст. Возможно, по данному примеру и не видно явного преимущества выноса текста за пределы php конструкции, но на самом деле, когда вам придется иметь дело с таблицами, подобное правило может очень пригодиться.

    5. Код должен быть выровненный относительно блоков.

    Пример некорректный:

    Запомните, php это вам не паскаль с его блоками begin…end. Здесь блок должен открываться в той же строке, где он начался, а закрывается выровненным, относительно начала блока:

    6. Упрощайте сложные конструкции. Разбивайте их на простые.

    Пример некорректный:

    $res = mysql_result(mysql_query("SELECT Num FROM db"), 0, 0)

    Пример корректный:

    $query = mysql_query("SELECT Num FROM db"); $res = mysql_result($query, 0, 0);

    7. Используйте больше пробелов и пустые строки.

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

    Пример некорректный:

    Пример корректный:

    8. Используйте сокращенные виды математических и строковых операций.

    Помните, что +1 всегда можно заменить на ++, а +n на +=n.

    Примеры замен:

    $i = $i + 1 эквивалентно $i++
    $i = $i — 1 эквивалентно $i—
    $i = $i + $n эквивалентно $i+=$n
    $i = $i."hello" эквивалентно $i.="hello"

    Хорошо Плохо

    Сделайте программный код красивым

    В общем-то, программному коду совсем не обязательно выглядеть красиво - нужно, чтобы он легко читался. В этом разделе предлагается несколько простых рекомендаций по оформлению программного кода для того, чтобы вам было легче расшифровать свой же программный код завтра, через неделю или в следующем году, если это потребуется.

    Отступы в программе

    Запомните: следует выработать правила использования отступов и неуклонно их придерживаться. Компилятор VBA игнорирует все пробелы в начале строк, так что вы можете смело использовать отступы для наведения порядка. Сравните следующие два фрагмента программного кода и решите, какой из них легче понять:

    If intA = 27 Then

    objCbar.Visible = True

    If intA = 27 Then

    If txtChooseColor.Text = Беж Then

    For Each objCbar In CommandBars

    If objCbar.Name = Моя панель инструментов Then

    If objCbar.Visible = False Then

    objCbar.Visible = True

    Оба эти фрагмента дают один результат, но отступы во втором фрагменте позволяют сразу сказать для каждого из операторов End If, какой из расположенных выше операторов If. . .Then будет ему парой. В результате легче отследить путь выполнения программы в зависимости от сложившихся условий.

    Из книги Искусство обмана автора Митник Кевин

    «Сделайте это сейчас» Не каждый, кто использует тактику социальной инженерии, является идеальным социальным инженером. Любой, кто владеет внутренней информацией компании, может принести опасность. Риск тем больше для тех компаний, которые хранят в своих файлах и базах

    Из книги Интернет-разведка [Руководство к действию] автора Ющук Евгений Леонидович

    Программный комплекс «Intellectum.BIS» Основное предназначение продукта – обеспечение экспертов-маркетологов и аналитиков инструментарием обработки информации для выполнения бизнес-исследований в целях обеспечения информацией руководства для принятия управленческих

    Из книги Журнал "Компьютерра" №705 автора Журнал «Компьютерра»

    Сделайте тише Автор: Владимир ГуриевВ августе 2007 года я побывал на Hungaroring, венгерском этапе Formula 1. Все знакомые - а особенно фанаты Formula 1 - мне, разумеется, завидовали, и я, как честный человек, старался не обманывать их ожиданий и на вопросы типа "ну как оно там?"

    Из книги Язык программирования С# 2005 и платформа.NET 2.0. автора Троелсен Эндрю

    Программный код агента Если открыть сгенерированный файл агента, вы найдете там тип, который получается из System.Web.Services.Protocols.SoapHttpClientProtocol (если, конечно, вы не указали другой протокол связи с помощью опции /protocol).public partial class CalculatorWebService: System.Web.Services.Protocols.SoapHttpClientProtocol { …}Этот

    Из книги TCP/IP Архитектура, протоколы, реализация (включая IP версии 6 и IP Security) автора Фейт Сидни М

    2.2.4 Программный интерфейс RPC Хотя и не так широко распространенный, как socket, программный интерфейс вызова удаленных процедур (Remote Procedure Call - RPC) для соединений типа клиент/сервер достаточно часто используется в различных системах. Первоначально он был реализован в

    Из книги VBA для чайников автора Каммингс Стив

    Сделайте паузу! Ключ к отладке программы кроется в режиме паузы VBA. Режим паузы - это временная остановка выполнения программы на некотором операторе в программном коде. Поскольку в этом случае программа еще живет", вы получаете возможность проверить текущие значения

    Из книги Интернет для ваших родителей автора Щербина Александр

    Сделайте ваш выбор В последнее время наблюдается устойчивая тенденция отказа от почтовых программ. Многие опытные пользователи даже не знают об их существовании. Это объясняется тем, что наличие повсеместного и быстрого доступа к Интернету компенсирует недостатки

    Из книги Удвоение продаж в интернет-магазине автора Парабеллум Андрей Алексеевич

    Сделайте процесс заказа логичным Большинство пользователей путают непоследовательный (нелинейный) процесс оплаты – непонятно, как купить товар, или вызывает сложности сама покупка. Если в вашем интернет-магазине при оплате заказа есть такие подшаги, как «Создание

    Из книги ПК без напряга автора Жвалевский Андрей Валентинович

    Сделайте текст красивым, или Форматирование Пользователи компьютеров – люди несентиментальные. Они стесняются слов «навести красоту в буквах» или «сделать текст красивым». Вместо этого они используют выражение «форматирование текста», а иногда, когда речь идет о

    Из книги Ubuntu 10. Краткое руководство пользователя автора Колисниченко Д. Н.

    23.2. Программный сбой Прежде всего, нужно выяснить и по возможности устранить причину сбоя. Если это сугубо программный сбой, то причины две: неправильная настройка программы (или системы) и ошибка

    Из книги Монетизация сайта. Секреты больших денег в Интернете автора Меркулов Андрей

    Сделайте так, чтобы вашу статью дочитали до конца Решение поставленной задачи кроется в умении лаконично рассказать о проблеме клиента в первых двух абзацах статьи. Однако это будет совершенно невозможно без предварительного изучения интересов целевой аудитории,

    Из книги Операционная система UNIX автора Робачевский Андрей М.

    Программный интерфейс TLI При обсуждении реализации сетевой поддержки в BSD UNIX был рассмотрен программный интерфейс доступа к сетевым ресурсам, основанный на сокетах. В данном разделе описан интерфейс транспортного уровня (Transport Layer Interface, TLI), который обеспечивает

    Из книги Цифровая фотография от А до Я автора Газаров Артур Юрьевич

    Программный режим Обозначается буквой Р. Это, в общем-то, автоматический режим, но в отличие от Авто он позволяет вам вносить свои изменения во многие выбранные камерой параметры: менять светочувствительность ISO, баланс белого, выбрать режим и точку автофокусировки,

    Из книги Взрыв обучения: Девять правил эффективного виртуального класса автора Мердок Мэттью
    Из книги Linux и все, все, все... Статьи и колонки в LinuxFormat, 2006-2013 автора Федорчук Алексей Викторович
    Из книги автора

    Сделайте мне … хорошо LinuxFormat, #104 (апрель 2008)Вековечная мечта пользователей Linux – чтобы все работало «из коробки», похоже, близка к осуществлению. Что можно наблюдать на примере альфа-версии Kubuntu – 8.04. Устанавливаемая, как и раньше, сполпинка, что в варианте Desktop, что в

    Порой наш код не всегда бывает идеален. А так хочется, чтобы он был не только рабочий, но и красиво оформлен и отформатирован. Время - это наш главный враг, оно редко позволяет следить нам за правилами оформления кода. Мы стараемся побыстрее закончить верстку, или описать десяток css-стилей, и делаем это в ущерб читабельности. В этой статье я приведу список сервисов, которые помогут вам отформатировать ваш код так, чтобы на него было приятно смотреть.

    Довериться программе или делать все ручками?

    Наверняка у вас возникал вопрос: как сделать код читабельным? Может ли программа грамотно расставить все отступы и переносы строк так, чтобы человеческий глаз получал он вида кода лишь эстетическое удовольствие? Конечно, может! Не стоит заблуждаться, что, раз работу за вас делает, по сути, робот, то сделана она будет "грязно". Сервисы, которые будут представлены в статье ниже, не раз спасали меня. Например, в ситуациях, когда необходимо было скопировать тот же html код с другого сайта, а теги при вставке оказывались просто в каком-то хаотическом порядке расставлены по строкам: куча табуляций, не логические переносы строк, абсолютно не видно никакой вложенности! Наверное, многим такое знакомо. И очень хочется, чтобы на своем сайте у вас было по-другому: аккуратно и хорошо читаемо. Ведь, в первую очередь, мы делаем это для себя, для удобства дальнейшей поддержки того или иного кода.

    Давайте же отформатируем ваш код

    Меньше слов, больше дела. Как показала практика, форматирование кода онлайн происходит достаточно просто. Вам нужно лишь скопировать ваш "грязный" код и вставить его в специальные текстовые поля на одном из указанных сайтов. Затем нажать кнопку, немного подождать и - вуаля! Вы получаете прекрасный, отформатированный и легко читабельный код.

    Вот список всех известных мне "пурификаторов" кода для различных языков.