Забери мусор с собой! / Хабр

«Забери мусор с собой!» — так называется сайт, который я сделал пару недель назад на выходных ^{(почти 2 дня делал)}, как раз к весеннему сезону, когда многие начинают выезжать за город на отдых.

Главная идея проста — убеждать людей, что природу нужно сохранить чистой. Для этого на сайте призываю всех убирать за собой (и не только за собой) мусор, а также на выбор предлагаются разные варианты плакатов в формате А4, которые можно распечатать на обычном принтере и приколоть канцелярскими кнопками к дереву, такая форма наглядой агитации:

изображения плакатов

Графика

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

Плакаты я нарисовал в векторном редакторе Inkscape, после чего сохранил в pdf файлы, которые посетители сайта могут скачать и распечатать. Редактор справился с этой задачей замечательно.

«Движок»

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

models.py

# coding: utf-8
import os
import settings
from django.db import models
from django.core.files.storage import FileSystemStorage

class OverwriteStorage(FileSystemStorage):
    
    def get_available_name(self, name):
        """
        Returns a filename that's free on the target storage system, and
        available for new content to be written to.
        """
        # If the filename already exists, remove it as if it was a true file system
        if self.exists(name):
            os.remove(os.path.join(settings.MEDIA_ROOT, name))
        return name

fs=OverwriteStorage(location=settings.MEDIA_ROOT)

class Poster(models.Model):
    title = models.CharField(max_length=100, verbose_name="Название плаката")
    thumbnail = models.ImageField(upload_to='images/posters',verbose_name="Иконка плаката")
    preview = models.ImageField(upload_to='images/posters',verbose_name="Превьюшка плаката")
    pdf = models.FileField("PDF файл плаката", upload_to='posters/', storage=fs)
    downloads = models.IntegerField("Количество скачиваний постера", default=0)
    wiki_youtube_title = models.CharField(max_length=100, blank=True, default="", verbose_name="Текст ссылки на википедию и ютуб")
    wiki_url = models.URLField("Ссылка на статью в википедии", blank=True)
    video = models.TextField("Код для вставки видеоролика", blank=True)
    youtube_url = models.URLField("Ссылка на ютуб-ролики", blank=True)

    def __unicode__(self):
        return u'Плакат "%s"' % self.title

    def get_absolute_url(self): 
        return "/poster/%d/" % self.id

    class Meta():
        ordering = ['id']
        verbose_name = "постер"
        verbose_name_plural = "постеры"


views.py
# coding: utf-8

from models import *

from django.shortcuts import render_to_response, get_object_or_404
from django.template import RequestContext
from django.http import HttpResponseRedirect

def index(request):
    posters = Poster.objects.all()
    return render_to_response('website/index.html',
                              {'posters': posters,},
                              context_instance=RequestContext(request))

def poster(request, poster_id, please_explain=False):
    poster = get_object_or_404(Poster, id=poster_id)
    return render_to_response('website/poster.html',
                              {'poster': poster,
                               'please_explain': please_explain,},
                              context_instance=RequestContext(request))

def download_poster(request, poster_id):
    poster = get_object_or_404(Poster, id=poster_id)
    poster.downloads += 1
    poster.save()
    return HttpResponseRedirect('/static/' + poster.pdf.url)

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

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

css

Т.к. я не дизайнер, для оформления использовал простейшие стили, а для работы с css используется фреймворк Compass. Он позволяет разрабатывать разметку сайта на основе сетки, что сильно упрощает таким как я создание более-менее кроссбраузерного контента (IE поддерживается «из коробки»). Одно время я отрицательно относился к css фреймворкам, но Compass поменял моё отношение.

В основе Compass два других фреймворка — SASS и Blueprint. SASS это фактически такой препроцессор для css файлов — там есть и переменные, и эквивалент функций и многое другое.

Исходный код *.scss файла компилится и получается обычный css файл, но с комментами. Его потом можно обработать любым компрессором и будет всё ОК.

Если надумаете ставить Compass в Ubuntu, последовательность такая (в 10.04 по крайней мере):

sudo apt-get install ruby rubygems rubygems-update
cd /var/lib/gems/КАКАЯ.ТО.ВЕРСИЯ/gems/rubygems-update-КАКАЯ.ТО.ВЕРСИЯ
sudo ruby setup.rb
sudo gem install compass

Что касается резиновости, blueprint и compass — почему-то последняя версия неоптимально компилирует mixin liquid. Неоптимально — в смысле просто дописывает его в конец файла, переопределяя вышестоящие стили, из-за этого css файл гораздо больше в размере. Чтобы победить это, можете в своём главном scss файле использовать такую конструкцию:

@import "blueprint/reset";
@import "blueprint/scaffolding";
@import "blueprint/liquid";
@import "blueprint/typography";
@import "blueprint/utilities";
@import "blueprint/form";
@import "blueprint/interaction";

@include blueprint-typography;
@include blueprint-utilities;
@include blueprint-liquid-grid;
@include blueprint-interaction;
@include blueprint-form;

Обещанные картинки

У моего друга есть сайт, и он предложил повесить на нём баннеры для привлечения внимания к сайту. Я решил, что надо найти какие-то интересные малоизвестные факты о животных, и использовать их в качестве текстов. Получилось ��от так:

Ваше мнение и участие

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

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