Прямо сейчас получите новый базовый видеокурс о работе в фреймворке CakePHP

Урок 1. PHP-фреймворки. Установка фреймворка CakePHP

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

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

Урок 2. Проходим тест «Hello, world!»

В этом уроке мы с вами пройдем т.н. тест «Hello, world!». Это достаточно условный тест, но, тем не менее, он позволяет определить, насколько фреймворк дружелюбен к разработчику, насколько просто и быстро он позволяет разрабатывать приложение. Суть теста заключается в следующей простой процедуре: необходимо создать страничку и вывести на ней значение переменной (традиционно это будет строка «Hello, world!», отсюда и название теста). Чем быстрее и проще будет выполнена эта задача, тем лучше. Посмотрим, насколько просто позволяет решить задачу CakePHP.

Урок 3. Получение данных из БД

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

Урок 4. Ассоциации и связи моделей

В этом уроке мы познакомимся с еще одной замечательной вещью, которую нам предлагает фреймворк CakePHP – ассоциации, определяющие механизм связей между таблицами. Это те самые связи между таблицами, которые могут быть известны вам по определениям «один-к-одному», «многие-к-одному» и т.д. Использую механизм связей, мы можем объединять таблицы БД, получая из них связанные данные. Механизм связей Кейка – это достаточно простая в использовании и мощная штука, которая позволяет буквально одной строкой кода получать необходимые дополнительные данные.

Урок 5. Добавление данных в БД

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

Основы оптимизации (ускорения загрузки) сайта

Урок 1. Оптимизация изображений .png

Из первого урока мы узнаем, что происходит при загрузки страницы. Так же в уроке мы поговорим о том, что одним из направлений, в котором нужно работать для ускорения загрузки — это снижение объема передаваемых данных в браузер посетителя. И поскольку до 90% общего веса страницы может составлять вес изображений, то оптимизация графики может дать существенное ускорение загрузки.

уроке мы разберем нестандартный прием, который позволит дополнительно оптимизировать изображения в формате png. А изображения в формате png, как вы знаете, самые тяжелые и наименее поддающиеся оптимизации. Поэтому урок будет особенно полезен.

Урок 2. Перестройка кода страницы для ускорения загрузки

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

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

Урок 3. Оптимизация стилей CSS

Третье направление в оптимизации сайта — это снижение количества http запросов..

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

В данном уроке мы рассмотрим несколько приемов, которые позволят нам снизить количество http запросов на сервер.

Создайте ваш уникальный шаблон Joomla с неповторимым дизайном

Урок 1. Создание файловой структуры

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

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

Урок 2. Локализация шаблона

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

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

Урок 3. Подключение стилей. Создание главного меню

В данном уроке мы с Вами немного поговорим об API Joomla и рассмотрим источники справочной информации по программному обеспечению Joomla. Вы научитесь подключать файлы стилей и формировать блок head. Узнаете что такое макеты и какова их роль в отображении элементов сайта.

По итогам данного урока мы с Вами выведем главное меню непосредственно из движка Joomla. При этом его внешний вид и структура будут полностью аналогичны верстке макета.

Урок 4. Вывод модуля левой колонки

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

Урок 5. Страница просмотра полного текста статей

Как и любой другой элемент шаблона Joomla — страница просмотра полного текста материала, формируется непосредственно в компоненте, а именно в Content. А вместе с тем и макет вывода данных также определен в компоненте. Поэтому в данном уроке Вы научитесь переопределять макет компонента Content по выводу полного текста на странице.

По итогам данного урока мы с Вами выведем контент сайта в центральной области нашего шаблона, при этом переопределим его макет таким образом, что данные будут выведены в точности как в версте макета.

Урок 6. Страница вывода содержимого категорий

На данном этапе мы реализовали все элементы, которые определены в верстке макета. Но сайт в целом не завершен, так как перейдя к странице просмотра содержимого любой категории. Мы увидим, что она отображается в соответствии с макетом движка Joomla, который ни как не похож на дизайн нашего сайта. Поэтому в данном уроке мы с Вами переопределим макет вывода содержимого категории.

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

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

Урок 1. Подготовка и проектирование интернет-магазина

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

Освоив данный метод, вы оградите себя от затратных «доделок» и «переделок» в интернет-магазине. Метод позволит вам с экономить кучу времени при дальнейшей разработке интернет-магазина.

Урок 2. Разработка дизайна интернет-магазина

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

Урок 3. Юзабилити интернет-магазина

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

Урок 4. Верстка макета интернет-магазина

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

Урок 5. Программирование интернет-магазина

Чтобы эффективно управлять интернет-магазином необходимо добавлять, редактировать, удалять товары. Менять цены, добавлять и редактировать необходимую информацию по работе магазина. Чтобы это можно было делать быстро и своевременно, необходимо установить интернет-магазин на CMS (систему управления контентом). В данном уроке мы рассмотрим, какие системы управления контентом бывают. Рассмотрим преимущества и недостатки каждой из них. Определимся с выбором CMS для интернет-магазина.

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

Урок 1. Создание базы данных. Единая точка входа

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

Урок 2. Создание логического ядра пользовательской части CMS

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

Урок 3. Создание и вывод основных страниц сайта

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

Урок 4. Вывод главной страницы админки

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

Урок 5. Добавление, редактирование и удаление статей

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

Урок 6. Редактирование пунктов меню. Авторизация пользователей

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

5 техник резиновой верстки сайта

Техника 1. Ширина элемента и свойство float

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

Техника 2. Создание резинового меню, используя списки

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

Техника 3. Выстраиваем элементы позиционированием

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

Техника 4. Центрирование элемента переменной ширины

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

Техника 5. Выравнивание блоков по ширине резинового блока

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

9 бесплатных видеоуроков по рисованию дизайна сайта с нуля, его верстке и установке на CMS WordPress

Урок 1. Подготовка к работе, расстановка направляющих

В этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не «налазили» и «прятались» друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.

Урок 2. Шапка сайта

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

Урок 3. Проработка меню, контента, правого блока и футера

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

Урок 4. Продумываем разметку страницы и нарезаем макет

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

Урок 5. Верстаем область основного контента

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

Урок 6. Устанавливаем слайдер, дорабатываем сайт

Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Также в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.

Урок 7. Создание темы WordPress. Часть 1

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

Урок 8. Создание темы WordPress. Часть 2

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

Урок 9. Создание темы WordPress. Часть 3

Фактически наша тема уже готова. Остались некоторые мелочи, которые мы и реализуем в последнем уроке.

Как создать свой первый профессиональный дизайн сайта с нуля

6 бесплатных видеоуроков покажут Вам, как нарисовать обалденный дизайн сайта с нуля. Если сейчас у Вас найдётся 5 минут, то через 2 часа вы будете прыгать от радости, создав свой первый профессиональный дизайн!

Урок 1. Разметка макета

Делаем продуманную разметку макета, для того чтобы все элементы сайта были чётко структурированы, чтобы не было такого, что шапка съезжает влево, правый блок прячется под контентом, а футер перекрывает левый блок.

Урок 2. Рисуем логотип и меню

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

Урок 3. Начало работы над композицией

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

Урок 4. Добавляем деталей в композицию

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

Урок 5. Доводим композицию до совершенства.

В этом уроке мы поработает над светом, тенями, рефлексами, цветовым тоном всего изображения, доведём мелкие детали до совершенства.

Урок 6. Работаем над контентом и подвалом

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