Каталог статей по Web-программированию 


Загрузка изображений. Jquery, PHP

Опубликовано

Загрузка изображений неотъемлемая часть любого веб-приложения, и веб-разработчик всегда старается сделать ее наиболее удобной для пользователя.

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

Отправка изображения на сервер, без перезагрузки документа

Создайте страницу, в заголовке подключите библиотеку jquery, в тело документа вставьте форму с уникальным идентификатором id="formupload".

Подробнее..

Обрезка и изменение размеров изображения с помощью класса Imagick

Опубликовано

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

Отличным решением является встроенное PHP расширение Imagick, нацеленное на работу c изображением, использует ImageMagick API. В арсенале класса Imagick присутствует богатый перечень методов для создания, редактирования, компоновки изображений, в статье я рассмотрю два наиболее востребованных:

  • cropImage() – урезка изображений;
  • thumbnailImage() – изменение размера изображений;

Урезка изображения cropImage()

cropImage(width, height, offset x, offset y) – метод урезает часть изображения. Первые два параметра метода (width, height) указывают ширину и высоту урезаемой области, вторые два параметра (offset x, offset y) позицию места, откуда начинается урезка, относительно начала картинки, возвращает булево значение true в случае успешной урезки.

Подробнее..

header элемент HTML5

Опубликовано

Элемент header также как остальные элементы (main, article, side, nav и т.д.) входящие в HTML5, интересное нововведение в плане верстки документа. Их использование превращает вашу веб-страницу в семантически организованную систему, помогая поисковым машинам детально распознать контент документа.

Название элемента header уже подсказывает, что предназначен он для предоставления вводной информации:

  • заголовки h1-h6;
  • логотип img;
  • навигационная панель nav;
  • список определений dl;

Header как элемент представления реквизитных данных о странице

На большинстве вебстраниц header является первым элементом в структуре документа, своеобразная его шапка, и несет информацию, дающую краткое представление о ресурсе: название сайта, его девиз, логотип, панель навигации и т.д.

Подробнее..

Как заставить понимать новые HTML5 элементы браузер IE версии 8 и ниже

Опубликовано

В HTML5 добавлено множество новых элементов разметки: main, header, article, aside, footer, section и т.д.. Основная цель нововведений помочь поисковым системам лучше понять контент вашего веб-сайта.

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

Так как же ведет себя IE8, по отношению к нововведенным элементам? А ведет он себя очень скверно, попросту игнорируя их, и если вы создадите документ с примерно таким содержимым, как показано в листинге 1, (обратите внимание на CSS стиль, который должен оформить элемент <article>), то, как видно из рисунка 1, они к элементу попросту не применятся.

Подробнее..

Назначение событий для отсутствующих элементов в документе Jquery

Опубликовано

Была ли у вас необходимость добавлять события (click, hover, change и другие) для пока не существующих элементов в документе, но планируемых в будущем внедрить их в него (например, добавляя новый элемент с помощью метода .append()) или подгружать часть документа при помощи функции $.ajax.

Если да, то вы наверняка сталкивались с проблемой - используя стандартные обработчики такие как .click() .hover() .keypress() и т.д., которые вешают событие на уже присутствующие элементы в структуре документа, но не могут прикрепить событие на элементы, которых пока в ней нет.

Для таких случаев в библиотеке предусмотрен обработчик .delegate(), прикрепляющий событие для уже существующих элементов, а также для элементов, добавляемых в будущем.

Подробнее..