86272

Сайт – портфолио

Курсовая

Информатика, кибернетика и программирование

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

Русский

2015-04-05

547.94 KB

4 чел.

КОМПЬЮТЕРНАЯ АКАДЕМИЯ

КОМПЬЮТЕРНАЯ АКАДЕМИЯ

КОМПЬЮТЕРНАЯ АКАДЕМИЯ «ШАГ»

     

Дисциплина:

Web - мастеринг

КУРСОВАЯ РАБОТА

             Тема: «Сайт - портфолио»                                  

Выполнила:

    гр. СДУ- 1011

Нездийминога Анна

Проверила:

Ночевкина Инна

ОДЕССА 2011

План:

  1.  Введение.
  2.  Постановка задачи.
  3.  Концепция индивидуального решения.
  4.  Исходные материалы. (Изображения, шрифты, текстовая информация)
  5.  Этапы выполнения работы. Описание.
  6.  Полученные результаты.
  7.  Выводы
  8.  Приложение. (Распечатанная главная страница).

Введение

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

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

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

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

Постановка задачи

Основной поставленной задачей было разработка дизайна тематического сайта.

Приступая к курсовой работе, сначала был продуман план хода работы.

При разработке дизайна использовались изученные знания юзабилити сайта.

1) Название сайта в шапке, в левой части воспринимается гораздо логичней, чем в противоположной.

2) Наличие меню в виде списка ссылок, наличие важной информации в центре экрана. Цветовая гамма, изображения и графика.

3) Проектирование сайта. Применительно ко всему сайту в целом есть такое правило – интуитивно понятный дизайн. Любой сайт должен быть понятен пользователю с первого взгляда. Это правило достаточно плотно переплетается с правилами дизайн, направленный на пользователя. Вообще многие правила юзабилити переплетаются между собой, взаимосвязаны и, что естественно, всегда повторяют одни и те же принципы:

– не отходить от стереотипов,

– делайте понятный чистый дизайн,

– не перегружайте лишними элементами,

– соблюдать порядок и логичность.

4) Навигация на сайте. На этапе разработки будущего сайта важно не забыть про правило трех кликов. Структуру и навигацию сайта необходимо обязательно продумывать, чтобы до любого материала на сайте можно было добраться максимум в три клика. И тут даже смысл не в самих кликах, а в строгой упорядоченности материалов, которая и позволяет добиться выполнения данного правила. Для многих сайтов действительно бывает очень сложно продумать хорошую навигацию, во многом это зависит от тематики ресурса, и чем объёмнее сайт в глубину, тем сложнее все систематизировать.

5) Четкое и лаконичное название разделов и рубрик. Подсвечивание и выделение ссылок на фоне основного контента.

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

Концепция индивидуального решения

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

Темой было выбрано сайт - портфолио .

При верстке сайта  использован язык разметки XHTML. Стили CSS вынесены во внешний файл. В курсовом проекте в большой мере использовались  знания Flash и Action Script 2.

Сайт является кросбраузерным, одинаково выглядит и действует в таких браузерах, как Firefox, Opera, Internet Explorer 6, Internet Explorer 7. Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Код отвечает всем требованиям валидации.

Исходные материалы

К исходным материалам в данном проекте относятся: отрисовки фонов, персонажей, кнопок, рамок для галерей. Определен, под какое разрешение будет рассчитан шаблон  - 648*651 пикселей.  

Для сайта будет использована «фиксированная» верстка. Сайт с фиксированной версткой имеет неизменяющуюся ширину независимо от разрешения экрана пользователя.

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

В работе использовались три группы шрифтов: Hadvertica, Calibri, Mistral. Размер шрифтов от 12 до 14 пунктов. Цвет шрифтов - взят фирменный - голубой и сиреневый, для текстов - черный.

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

Этапы выполнения

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

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

3) Подготовка работ и фотографий для галереи, обработка и уменьшения до определенного размера, а также создания превью картинок.

4)Создание макета сайта в Photoshop постранично, чтоб иметь представления к дальнейшей работе.  При разработке дизайна продуманы такие мелочи, как написание, размер, цвет шрифтов, выравнивание текста. Они также являются частью дизайна и влияют на общее впечатление о сайте.

 

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

6) Использование action script для следующих элементов сайта: на главной станице перетаскивание информационной панели с помощью  drag and drop, использование команды stop(); для многочисленных кадров сайта, помещение информации в контактную форму и отсылка на e-mail информации, загрузка прелодера на стартовой странице. Переключение кнопок, переход на следующую страницу.

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

8) Подключен php скрипт к контактной форме, для отправки введенной информации на почтовый ящик.

9)  Публикация сайта, выбор необходимых параметров. Создание таблицы стилей для сайта и задание параметров для html страницы. Название сайта и картика favicon.

Полученные результаты

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

Выводы

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


 

А также другие работы, которые могут Вас заинтересовать

81730. Образ скучающего героя в произведениях отечественной классики 19 века 32.94 KB
  Лермонтов Герой нашего времени В романе Л. но и многих молодых людей того времени: жизнь была только цепь грустных и неудачных противоречий сердцу и рассудку Герой романа не всегда был циником скептиком духовно черствым человеком. Причину превращения Печорина в нравственного калеку автор видит в социальных условиях в которых воспитывался герой. И вот на страницах своего дневника герой приходит к страшному выводу: во мне душа испорчена светом Судьбу талантливого человека не нашедшего себе достойного применения в обществе его...
81731. Идейное содержание поэмы Н. А. Некрасова «Кому на Руси жить хорошо». Язык и стиль поэмы 33.13 KB
  Некрасова Кому на Руси жить хорошо. Достойным финалом эпического творчества Н явилась эпопея Кому на Руси жить хорошо; 1865 1877 Композиция этого произведения строится по законам классического эпоса оно состоит из отдельных относительно автономных частей и глав Пролог Часть первая. Внешне эти части связаны темой дороги: семь мужиковправдоискателей странствуют по просторам Руси пытаясь разрешить не дающий им покоя вопрос Кому на Руси жить хорошо В Прологе намечена и первоначальная схема путешествия встречи с попом помещиком.
81732. Нравственная проблематика прозы А. Солженицына (по рассказам «Один день Ивана Денисовича» или «Матренин двор») 34.36 KB
  Шухов не желая потерять человеческое достоинство вовсе не склонен принимать на себя все удары лагерной жизни – иначе просто не выжить. помогает ему выжить и сохранить себя человеком – не ставя перед собой вечных вопросов не стремясь обобщить опыт своей военной и лагерной жизни куда он попал после плена. островок естественной русской жизни а народный характер сумевший в этой смуте себя сохранить. В чем суть праведности Матрены В жизни не по лжи.
81733. Предыстория героя как способ его характеристики в произведениях отечественной классики 19 века 31.99 KB
  Не так легко понять этот характер трудно схватить даже внешний облик: не красавец но и не дурной наружности; не слишком толст но и не слишком тонок; нельзя сказать чтобы стар однако же и не так чтобы слишком молод; человек средних лет. Характер его показан в динамике история воспитания помогает Гоголю выявить многообразные условия – общественной среды семьи – под влиянием которых формируется характер человека. исследует характер подлеца его личные качества обстоятельства воспитания и среду.
81734. Герои и проблематика сатиры М.Е.Салтыкова - Щедрина 38.82 KB
  Первым отдельным изданием сказочный цикл вышел в 1886 году 23 сказки М. и те сказки которые не могли появиться в легальной русской печати по цензурным причинам. Сказки стали своего рода малым миром сжатыи изложением всего что создано писателем его наблюдения над идейнополитической жизнью страны психологией социальных групп сатирической энциклопедией творчества Салтыкова. Сказки опираются на традиции фольклора отсюда сказочные сюжеты образы события описания обстановки социальнополитическая направленность бытовых...
81735. Психологизм изображения внутреннего мира личности в лирике А. Ахматовой (на примере 3 – 4 стихотворений) 37.04 KB
  Ахматовой на примере 3 – 4 стихотворений Я научила женщин говорить так пишет А. Уже в ранних сборниках сформировались основные принципы лирики Ахматовой: сдержанность недосказанность внутреннее эмоциональное напряжение и скрытая страстность сжатость и сила афористичность и краткость психологическая достоверность в передаче чувств и взаимоотношений. Акмеистическое внимание к деталям внешнего мира к предметам обихода у Ахматовой связано с отражением внутреннего мира. С годами эти тенденции в стихах Ахматовой только усиливаются в...
81736. Мотив поиска истины в произведениях отечественной литературы 33.66 KB
  является проблема человеческого счастья проблема поисков смысла жизни. В жизни обоих можно выделить несколько этапов на которых меняется их мировоззрение в душе происходит определенный перелом. Он понял что в жизни есть нечто более важное чем слава. Медленно возвращается он к жизни к людям.
81737. Правда Раскольникова и правда Сони в романе Ф. М. Достоевского «Преступление и наказание». Роль евангельских мотивов и образов в романе 33.02 KB
  Все идущие оттуда идеи будь то буржуазный утилитаризм Лужина коммунистическое общежитие Лебезятникова наполеонизм Раскольникова носят разрушительный нигилистический характер. диспуты Раскольникова с Разумихиным и Порфирием сколько опровергает его постулаты на практике. Кроткая и жертвенная Соня живущая по евангельским заповедям подвигает Раскольникова на путь покаяния отказа от теории воссоединения с людьми и жизнью.
81738. Особенности творчества одного из современных отечественных поэтов второй половины хх века 41.92 KB
  Поэт ведет разговор с читателем и слушателем как бы один на один с глазу на глаз с абсолютной индивидуальной доверительностью. Окуджава снискал себе известность как поэт города. Изменения которые происходили в стране и порой далеко не в лучшую сторону не могли не сказаться на характере творчества поэта.