Introduction
HTML5 tools such as deck.js or reveal.js seem great for presentations, including scientific presentations where good-looking mathematics can easily be added with MathJax.
Closely related to scientific presentations are printed posters (examples), and I am wondering if it would be possible to use HTML & CSS to produce them. This seems to me to be a good idea because:
Images, tables, mathematics etc can all be easily included
Typical grid-based layouts are commonly in both posters and HTML/CSS
The content would be well-separated from the presentation, making re-use easier (e.g. between presentations and posters)
A copy of the poster could be shared on the web with little modification
The problem is that most CSS frameworks (e.g. Bootstrap) allow for fixed-width layouts but assume that the page will scroll down as far as necessary to fit all the content. On the other hand, for a poster the layout needs to behave similarly in the horizontal and vertical directions, with a grid which fills the exact dimensions of the paper.
Questions
Are there any CSS frameworks that allow easy layout of content on a fixed-width & fixed-height 2D grid?
Are any special techniques needed to get from the HTML page to, say, an A1 size PDF?
Edit:
I know about LaTeX and have used it to make presentations and reports. It's possible to use it for posters too, but my experience has been that it very quickly requires a lot more tweaking and knowledge if you need to alter the most basic poster layouts.
It is surprisingly straightforward to roll out your own CSS/HTML template for a printer poster. It is much easier than LaTeX with its weird defaults and obtuse treatment of graphics, layout, and color. And it is much neater than PowerPoint as it provides a lot more consistency and "reuse/programmability" in the creation of the layout.
First of all, you need to set the size of your paper:
body {
width: 48in;
height: 36in;
}
Then you need some generic layout:
<body>
<div class="poster">
<h1 class="poster-title">...</h1>
<h2 class="poster-authors">...</h2>
<h3 class="poster-affiliations">...</h3>
<hr class="fancy-line">
<div class="container">
<div class="row">
<!-- A bunch of Bootstrap columns (but here it would be a good place to
use CCS Grids too) -->
</div>
</div>
</div>
</body>
And if you like the defaults of a CSS library like Bootstrap, you can use it for most of the components (I particularly like the panels).
You can also use some newer flexbox styling for a neater layout
I have template based on those ideas that I would be happy to share (and a somewhat longer description of the tools I used)
And here is an example of a poster built with it
It is not a ready to use CSS framework, but importantly, it is just 20ish lines of custom CSS you can put on top of any CSS framework.
Why don't you try LaTeX. Its not html or css, but its code based and you can create the kind of example posters you shared and some really awesome presentations.
All you have to do is download LaTeXilla (Linux).
There are plenty of LaTeX poster templates available.
Related
I am having a hard time understanding the layout of HTML. In particular, none of the book or exercises I read went into detailed description about what div is actually for or how to visualise it when designing or building a website.
I am just starting out on HTML and I am trying to build pages like these below:
http://activatedrinks.com/index.php/fr/#/activate
http://www.captaindash.com/captain-dash-english-version
I understand I'd have to go into JS and Bootstrap but I just want to ask any experienced mentor here what is the best and easiest way to visualise the layout/structure of HTML when building them? Also if anyone could elaborate on the relationship of them as well would be helpful.
The <div> tag defines a division or a section in an HTML document. Dividing or subdividing a page into many sections or functional blocks. The <div> tag is used to group block-elements or use as a container for other HTML items or elements to implement CSS styles to many elements at once.
To understand more get additional information I recommend the following sites for you to visit:
https://www.lynda.com/
https://thenewboston.com/
http://htmldog.com/
http://www.codecademy.com/
https://teamtreehouse.com
https://css-tricks.com/
https://tutsplus.com
https://www.smashingmagazine.com
https://www.sitepoint.com/
https://www.tutorialspoint.com/
https://www.w3schools.com/
http://www.html-5-tutorial.com/div-tag.htm
In addition try to understand different Frameworks (Front-End or Back-End) at http://tutorialzine.com/2016/12/the-languages-frameworks-tools-you-should-learn-in-2017/. "Although frameworks makes programming faster and easier, unless you know how they works, they may become more of a problem than being helpful" by Tesseract.
I'm looking into css frameworks, mainly for resets, structuring my projects better, etc.
I found Html Boilerplate (which i'm using). I now see frameworks such as blueprint and 960gs, they claim a grid based layout. Could someone explain what a grid based layout is? How does it work?
I would recommend you reading Which CSS Grid Framework Should You Use for Web Design? over on NetTuts.
It goes into depth and answers the questions you have, as well as a comparison of some of the CSS frameworks out there.
They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.
Quoted from the link I attached with regards to print publishing layout grids. But in the context of the Web world (CSS) grid systems allow you to create complex CSS grid layouts instead of html table layouts.
A bunch of pre-defined CSS rule-sets, that you can use the class names from to organise elements into grids of various sizes.
The easiest way to grok the idea is to just try using something like blueprint of 960gs.
It makes it easier for you to place boxes in grids.
If you want to see how it works, I would recommend you to visit http://960.gs/ and click on the 'show grid' buttons above the images.
I want to design my webpage layouts only using div tags. But i'm not good at it. I need to understand the basic techniques to build re-sizable websites.
Can you suggest some good tutorials/ tips to kickstart.
There are not many better frameworks for liquid layouts than http://cssgrid.net/
It isn't so much a tutorial as it is a starting point for pre-designed websites, but works wonders in helping you understand building sites for different screen sizes (all the way down to phones).
Check out this link as well for testing purposes - http://www.resizemybrowser.com/
There are many sites with tutorials which cover this. Here are a few I would recommend you checking out:
http://www.colorplexstudios.com/articles/div_web_design_tutorial/
http://www.mardiros.net/liquid-css-layouts.html
Also try looking for tutorials on fluid/elastic layouts if you want dynamic/resizeable designs using div tags and css.
I know that you're asking how to get started understanding CSS-based layout.
I'd like to point out at this early stage that DIV tags simply serve as containers which have no semantic meaning. While they sometimes help with layout, you can often achieve the same results by thoughtful styling of the HTML elements themselves.
For instance, a UL is a block-level element and CSS treats it exactly the same as a DIV in that respect.
I strive to use a few DIV tags as possible in my layouts, preferring instead to exploit the box model of the HTML elements. This minimizes variables and results in much cleaner, more maintainable code for the future.
As you learn, get in the habit of working without DIVs where possible. You'll understand the HTML and the CSS much better in the long run.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
Given an HTML page that has a complex table-based layout and many tags that are duplicated and wasteful, e.g.:
td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.
Are there tools to aide the task of refactoring the page into a more compact form? For instance, a tool that automatically generates CSS styles and selectors? That converts tables into div layouts?
Just to give a sense of the order of the problem, the page I'm looking at is >8000 lines of HTML and JavaScript, which is 500Kb not counting images!
Update: In re. "give up and start from scratch" comments. What does that mean, in the real world? Print out the page, scan it, set it as the background image in Dreamweaver, and start with that? Seriously? Would that really be more efficient than refactoring?
Update: I'm not denigrating "trace it from scratch" nor did I mean to imply that Dreamweaver is by any means my tool of choice. I'm just very surprised that refactoring a layout is considered to be an intractable problem.
I agree with TimB in that automated tools are going to have trouble doing this, in particular making the relational jumps to combine and abstract CSS in the most efficient way.
If you are presenting tabular data, it may be reasonable to attempt to refactor the inline CSS to reusable classes.
If you have a lot of similar tables with inline styles you can gradually refactor the CSS by simple search and replace.
This will give you lots of classes that match a subset of similar tables and lots of somewhat similar classes.
Breaking this up into layout and presentation would be a good start, then overriding these with specific classes for each theme or semantically related item.
I would still recommend starting from scratch, it's probably going to be quicker, and you can recreate only what you need to present the page, and can reuse elements or collections of elements at a later date.
The time spent will also pay off significantly if the page is ever needed to be modified again.
But that's not at all likely is it? :D
I'm not aware of specific tools, only the generic ones of caffeine and Firebug, which anyone doing CSS work should be aware of.
I think that the problem is sufficiently hard that automated tools would struggle to produce good, maintainable markup and CSS.
It seems as if you are looking for more automated means of re-factoring an old table-based layout to CSS standards. However, I agree with some of the other comments to "start from scratch".
What this means to you is that you should try to rebuild (using CSS) the look that was achieved using an HTML table. If this concept escapes you, then I would suggest Googling for some beginner CSS tutorials, maybe even some focusing on teaching the concept of Table->CSS layouts..
Another tool to consider (that could possibly aid you even further) would be some sort of CSS "framework". I recommend Blueprint CSS for this, as it helps in the creation of grid/table-like layouts with minimal effort. Another good one is Yet-Another-Multicolumn-Layout, which has a really neat multi-column layout builder.
Don't just throw it in dreamweaver or whatever tool of choice and slice it up. Write the HTML first, in purely semantic style. eg, a very common layout would end up being:
<body>
<div id="header">
<img id="logo"/>
<h1 id="title">
My Site
</h1>
<div id="subtitle">Playing with css</div>
</div>
<div id="content">
<h2>Page 1</h2>
<p>Blah blah blah..</p>
</div>
<div id="menu">
<ul>
<li><a>Some link</a></li>
...
</ul>
</div>
</body>
Do the HTML in a way that makes sense with your content. It should be usable if you have no CSS at all. After that, add in the CSS to make it look the way you want. With the state of browsers/CSS now, you still probably have to add some decorators to the HTML - eg, wrap some things in extra divs, just to be able to get the content the way you want.
Once you're done though, you'll have a very flexible layout that can be modified easily with CSS, and you'll have a page that is accessible, to both disabled people and search engines.
It does take quite a bit of learning before you get the knack of it, but it is worthwhile. Resist the temptation to give up and go back to table based layouts, and just work your way through. Everything can be done with semantic HTML and CSS.
You denigrate this approach in your question, but I'd recommend taking a screen shot of your page in the browser whose rendering you like the best, declare that to be your reference, and start trying to recreate it. It's easier than you think. I've had to take skanky old table-based layouts and turn them into CMS templates done with modern techniques and it's not that bad a job.
I am tackling a similar problem at the moment, not quite as messy as what this sounds, but the product of really bad asp.net web forms, overblown view state, and deeply nested server controls that format search results from a database. Resulting in ~300 - 400K of markup for 50 DB rows - yeek.
I have not found any automated tools that will do a half way reasonable job of refactoring it.
Starting with a tool like visual studio that you can use to reformat the code to a consistent manner helps. You can then use combinations of regexs and rectangular selecting to start weeding out the junk, and stripping back the redundant markup, to start to sort out what is important and what is not, and then start defining, by hand, an efficient pattern to present the information.
The trick is to break into manageable chunks, and build it up from there.
If you have a lot of actual "tabular data" to format, and is only a once off, I have found excel to be my saviour on a few occasions, paste the data into a sheet, and then use a combination of concatenate and fill to generate the markup for the tabular data.
Starting from scratch means going back to the design drawing board. If you need to refactor such a monstrosity, then for all the time you will spend making it better, you might as well have done a full redesign.
If you want to get away from duplicated and wasteful tags, you need to escape Dreamewaver. A good text editor (jedit, emacs, vim, eclipse, etc.) is really all you need. If you customize your editor properly, you won't even miss Dreamweaver. (Emacs with nXhtml and yasnippets is my favorite.)