HTML Refactoring [was Re-thinking shelves]
Ramiro Algozino
> On Mon, Feb 14, 2011 at 4:04 PM, Ramiro Algozino <algo...@gmail.com> wrote:
>> 2011/2/14 Roberto Alsina <ral...@netmanagers.com.ar>:
>>> On 2/14/2011 3:56 PM, Ramiro Algozino wrote:
>>>>
>>>> 2011/2/14 Roberto Alsina<ral...@netmanagers.com.ar>:
>>>>>
>>>>> > On 2/14/2011 3:44 PM, Ramiro Algozino wrote:
>>>>>>
>>>>>> >>
>>>>>> >> Agree 100%, also I think we need to start using HTML tags correctly,
>>>>>> >> like<h1>,<p> and friends.. what do you think?
>>>>>
>>>>> >
>>>>> > Hmmmm... I think my HTML sucks? I have no idea of whether I used them
>>>>> > correctly on the templates o rnot.
>>>>> >
>>>>
>>>> Sorry, I didn't want to mean that. If we are going to use CSS, it
>>>> would be better if we use (i.e.)<h1> tag for BookTitles,<h2> for
>>>> Authors,<p> for tags and so on..
>>>
>>> No, I am really aware that my HTML sucks already :-)
>>> Honestly I have no idea what's good and what's bad.
>>>
>>
>> I'm not an expert either, so let's we say what's good! hehehe, now
>> seriously, I propose to make a convention on the html tags so we can
>> tune the CSS later, for example:
>>
>> Let's say the <h1> html tag is for the book title, then we can tune
>> the CSS so the <h1> tag has a 12px font and has red color.
>>
>> What do you think guys?
>
> We could check if there's any microformat [0] for this. I mean, if
> we're going define a format, we could check if there isn't a standard
> that we could use :-)
> Of course this makes sense mostly to have clean-meaningful code, but
> it's not critical since we won't be having other applications crawling
> our HTML, right?
>
> [0] http://microformats.org
>
Andres,
I don't think that a "microformat" is necesary yet, I try to explain
my idea with an example. Currently the template for the "About the
Book" view is something like this:
tpl = u"""
<html>
<body>
<div style="min-height: 128px; border: solid 3px lightgrey;
padding: 15px; border-radius: 15px; margin: 6px; -webkit-transition:
all 500ms linear;"
onmouseover="this.style.border='solid 3px lightgreen';
this.style.backgroundColor='lightgreen';
document.getElementById('submit-'0').style.opacity=1.0;"
onmouseout="this.style.border='solid 3px lightgrey';
this.style.backgroundColor='white';
document.getElementById('submit-0').style.opacity=1.0;" >
<img style="float: left; margin-right: 4px; max-height:
180px" src="${thumb}$">
<div style="text-align: right; margin-top: 12px;">
<b>${title}$</b><br>
by ${', '.join([a.name for a in authors]) or ""}$<br>
${for identifier in identifiers:}$
<small>${identifier[0]}$: ${identifier[1]}$</small><br>
${:end-for}$
<br>Tags for this book<br>
${for tag in tags:}$
<small>${tag}$</small><br>
${:end-for}$
<br>Files for this book<br>
${for fname in files:}$
<small><a href="${fname}$">${fname}$</a></small><br>
${:end-for}$
</div>
</div>
</body>
</html>
"""
What I say is change it like something like:
tpl = u"""
<html>
<body>
<div style="min-height: 128px; border: solid 3px lightgrey;
padding: 15px; border-radius: 15px; margin: 6px; -webkit-transition:
all 500ms linear;"
onmouseover="this.style.border='solid 3px lightgreen';
this.style.backgroundColor='lightgreen';
document.getElementById('submit-'0').style.opacity=1.0;"
onmouseout="this.style.border='solid 3px lightgrey';
this.style.backgroundColor='white';
document.getElementById('submit-0').style.opacity=1.0;" >
<img style="float: left; margin-right: 4px; max-height:
180px" src="${thumb}$">
<div style="text-align: right; margin-top: 12px;">
<h1>${title}$</h1>
<h2>by ${', '.join([a.name for a in authors]) or ""}$</h2>
${for identifier in identifiers:}$
<p>${identifier[0]}$: ${identifier[1]}$</p>
${:end-for}$
<h3>Tags for this book<h3>
${for tag in tags:}$
<p>${tag}$</p>
${:end-for}$
<h3>Files for this book<h3>
${for fname in files:}$
<p><a href="${fname}$">${fname}$</a></p>
${:end-for}$
</div>
</div>
</body>
</html>
"""
In this way, then we can set up the CSS and if we want to change, for
example, the font of the Book's Title we just have to edit the h1
entry in master.css. And it would be changed in every webkit view we
have, About, Shelves, etc..
Am I "delirating"?
--
Ramiro Algozino
Andrés Gattinoni
Ok, I agree. I have two suggestions:
- Define a class name for the containing div. In that way we define
the CSS for the H1 in the context of that div and we can still use H1
in other contexts with other properties. I think it's semantically
more appropriate.
- I would place tags and files as items of a <ul>, again for making it
more semantically accurate.
Ramiro Algozino
Yes, you are right! that would be better.. I'll start the changes in
the About the Book so we can see if it works ok.
--
Ramiro Algozino
Ramiro Algozino
By the way.. do I make a sepparated file with the template, say in a
templates folder, or do I leave it hard-coded?
--
Ramiro Algozino
Andrés Gattinoni
> By the way.. do I make a sepparated file with the template, say in a
> templates folder, or do I leave it hard-coded?
+1 for a templates folder
Ramiro Algozino
I've pushed the changes I've made into the issue35 branch. Now the
code, the html template and de CSS are lot cleaner! I'm using a
separated css file for the about the book view because I was having
trouble with master.css eventually I'll merge them.
Ideas are welcome.. :-)
--
Ramiro Algozino