QuickStart basic layout/template for web development? - templates

I'm looking for a quick start or template, or something, to get a web site's basic layout done quickly and looking fairly professional, and then let me do the coding. I don't want a CMS, as this is for a highly customised reporting application, but I need something like frame header and two columns and frame footer. I can design the pretty reports for the wide right hand column myself, as the left hand column menu.

Something like YUI Grids CSS?
http://developer.yahoo.com/yui/grids/
or Blueprint CSS?
http://www.blueprintcss.org/
Or CSS boilerplate?
http://code.google.com/p/css-boilerplate/

you could use the BluePrint CSS framework or check out the CSS Templates

You don't mention what language you're using, but if it's Java, Appfuse is a really great tool for creating an entire (skeleton) web application project from a configurable template. This skeleton includes an initial HTML/CSS/Javascript UI that includes common elements such as a login page, an "add user" page, etc.

Depending on your IDE, Eric Meyer wrote a program called CSS Sculptor that you can use to quickly develop standards-based layouts. I've used it, and it's great.

Related

Template with TYPO3 v10

I would like to do a project with TYPO3 v10 I'm new with this CMS and I need to create different templates for different pages but I don't understand which code I need to change.
I already install a sitepackage from this site https://www.sitepackagebuilder.com/
It work well but I need to create my own templates and I want to edit the content of my templates in the back end administration like in the picture.
I hope I'm clear
thanks for help :)
I am not sure if there is a misconception in the question or if I have interpreted incorrectly. In any case, I hope this helps:
It is important to differentiate between content + template in TYPO3:
content
In the screenshot posted in the question, you see the TYPO3 backend, which is a view for editing content, administration etc. There you see the page module is opened in the left column (1), you see the page tree in the middle column (2) and the page layout for editing content on the selected page in the right column (3). Here, you can insert and edit the content, that will be displayed on a page.
Template
In TYPO3, the template is what makes up the automatically generated parts of the page such as header, footer, menu, breadcrumb etc.
It work well but I need to create my own templates and I want to edit the content of my templates in the back end administration like in the picture.
Editing the template in the backend with a Wysiwyg ("what you see is what you get") editor, similarly to editing the content is not really possible in TYPO3 AFAIK - at least not out of the box. For this, you would need a template builder. The only thing I have seen so far that comes close to this is toujou (I am not affiliated with them, just wanted to mention it). They have something which you could call a website builder. But AFAIK, you can't download it, they provide this as a service.
The sitepackage builder - as far as I know - pretty much just creates a sitepackage based on the bootstrap package extension which you would have to further modify by editing the files.
What you can also do is edit the TypoScript in the backend. Just go to the "Template" module in the left column. But, this made more sense in the past, because a lot more was done with TypoScript. Nowadays, you usually use a combination of Fluid and TypoScript and you can't edit the Fluid files in the backend.
While in the past, a lot more was done in the backend or could be done in the backend, everything is moving towards maintaining changes in files and extensions, where the template is maintained in a sitepackage. For some things both is still possible (backend and extension), e.g. backend layouts, TypoScript etc.
Moving the configuration + templates from the backend (and storing them in the database or as files) to a dedicated extension has several advantages:
Every configuration etc. is bundled into one extension, this makes it easier to install in another site, on a testsystem, exchange it etc.
the sitepackage can be put in a version control system (e.g. git) which has a bunch of other advantages such as easy rollback to a previous version, referencing issues etc.
The downside is that you need more technical expertise and there is a learning curve.
see also:
The Anatomy of Sitepackages
Sitepackage Tutorial
I understand that it might be pretty cool to assemble a template in the backend - just like you can do with the content. Maybe someone else knows how to do that with TYPO3.
You can also check out these resources which seem to go in the direction of what you are looking for:
TYPO3 extension mask (documentation)
T3terminal
in the official documentation you can find the structure of folders where the files for your layout are stored.
More details on fluid templating in this document
Now you want a possibility for editors to select between different page layouts. An often used way is to use the possibility to select different backend layouts and select a frontend layout accordingly.
This is shown in the video on this page or in the documents you can find if you uses the searches on that page.

Web Design - Templates vs Include

I am currently developing a website. I would like to separate content and presentation. I am currently using a Dreamweaver Template to achieve this. However, I find that Dreamweaver's edit regions are very limiting in the design view. I have found that the same goal can be achieved by including the header and footer of my website.
What are the pros and cons of using includes rather than using templates?
First, if I were to rephrase your question, it's more like asking "Should I by a wire frame of a kite or by the glue to stick together what I'm making?" And then, you ask about the pros and cons of buying the wireframe against buying the glue. There are far too many variables as you can see...
And back on your your question... At some point your template will use include files. And for a start, it's worth knowing what you're thinking... Let's look at some basics.
Web design - usually refers to making websites that aren't really interactive. They don't have server-side elements. So most of the site has 'static' contents. If this were the case, you're better off with DreamWeaver, particularly if you're not into html/css editing.
Web development/programming - starts off with something as elementary as mailing a form, to highly interactive sites like FaceBook. Here you'll need to use some server-side language, usually like PHP, ASP or JSP. The choices are many but you've got to choose your own platform or combination of them.
Now to the second option (above). If for example, you were building a site using PHP, one of the nice things you'll do is to include your header, footer and side panels that need to be repeated across all pages. This way, you'll eliminate the need to re-write those sections. But if you were using a program like DreamWeaver, it does this duplication for you. Yes, it physically copy-pastes those sections into every file that needs it. Of course the end result may not be any different. But as a developer, you will be tied down to the DreamWeaver platform or for that matter, any other specific platform.
On the other hand, if you get used to working with an editor like NotePad++ or GEdit, you may switch between editors at any time. But you have the task of hand-coding everything from scratch. But then again, since you would use include files to bring in your headers and stuff, you save development time as well.
I don't know how much of html/css or php you know, but here's one of my demos to show you how to hand-code a site. This ain't complete but you should get an idea.
Link to the video introduction
Link to the video on youtube

Where I can find some good UI templates to style my application?

I'm developing a GWT application and I'd like to make it look good.
Since I'm not a graphic designer I think I'm going to look for a user interface template and replicate it in GWT using CSS.
For example I like the theme of ExtJS/ExtGWT a lot, but I don't think I can replicate the graphics due to licence restrictions.
Anyone has any idea where to look for some themes I can use without getting in trouble?
P.S.: I don't like built-in GWT themes.
You can look at Twitter Bootstrap. There are 2 existing port in GWT :
http://gwtbootstrap.github.io/
http://nyao.github.io/bootstrap4gwt/

Integrating django apps in your own views

Let's say I'm writing a complex site in django with wikis, forums, ... or writing my own apps that I intend to reuse from different sites.
I really want to create, for example, a wiki page that has a forum at the bottom, or reuse my previously written wiki app with a different graphical layout.
What is the best way to structure my app to allow this kind of reuse?
So far, I have been giving apps their own urls in urls.py. This however does not work if I want to combine multiple apps together in a single page.
Additionally, most of the apps I found online come with their own templates, which has the full html, and do not separate the logic of creating / preparing a context from that of handling a request and generating a reply.
What is the best practice here? What do you do? edit the templates that come from applications you download online? refactor them to fit in your application?
what should I do for my own applications? structure them so they have a method to get the context, and a method to render it?
Django hasn't great support out of the box to component-oriented architectures. I find this problematic some times too. You'll face to problems here.
Architecture
Code
Architecture: As Django is not component oriented, all the apps aren't component oriented neither. The designers and coders for those apps haven't thought about that. So they've just built "views" to interface with their apps. You'll need to get something more "pluggable".
Code: Once you decide to build that, you'll have to find what support you have for that. Most Django apps are pretty well coded, so you won't have much code in views, but abstracted in other places. That way you could reuse that code and build your own components.
Example: Suppose you're working with a third-party Wiki app. That wiki has a view to display highest ranked Tags and other view to create a wiki entry. If the code is good enough (that I'm assuming it is because Django has a pretty good community), you could refactor that to use components. The view to create an entry must be using some Form, that you can plug in your own site. And the view to get highest ranked tags probably uses some utility function, or some Tag manager's method. In that case you could refactor it to your own needs.
Hope it helps.

Beginner: Do I have to use templates when implementing my own designs using CMS such as Joomla?

Brand new to CMS:
With Joomla or other CMS, If I want to use my own design, do I have to make it a template first using proprietary code of some sort = ie using some Joomla templating language - or is using my own design with Joomla simple and independent?
I am not sure the role "templates" play with Joomla and other CMS. I gather they can be used as a complete "pre-made" design where you just tweak it, but are they necessary as a base of some sort to using my own designs? I am proficient with HTML and CSS. I also have been playing around with various Jquery Plugin's for my UI.
Ideally I would like to create any design I can think of with any layout I create and use CMS simply for its database and plugins etc such as a blog or calender back end. I might use it for more features as I learn about them. Do I need to use a "template" or create a "template" to do this?
Thanks!
{edit}
You have to create a template (or change an existing one), how else will the CMS know where to add the information into as the template is a HTML, CSS and Javascript Page group devoid of information and some HTML Tags replaced with CMS Specific tags, which tells the CMS where to add the information. It also include certain files telling the CMS the Name, and othe information of the template.
The First step in creating a template is to have a design.
Do your design in HTML and CSS. (Preferably using the CMS Template folder/directory structure.)
For Joomla use the information in this post: How should I go about writing a Joomla! template?
In Joomla jQuery have to be used in compatibility mode.
The CMS will supply the information, you supply the design and tell the CMS
{/edit}
The Template is the design container, whether you create one from scratch or reuse a current template. I initially used one of the pre-installed templates (together with the documentation) to learn some of the complexities of designing the template. (ex. structure, and what is possible.)
Please also look at my answer to this question How should I go about writing a Joomla! template? as it is a pretty good beginners guideline for template designers in Joomla (Even if I have to say it myself) with a couple of other resources linked in as well.
A Joomla template is nothing but HTML layout stylised using CSS. So to create your own templates you need a good grasp on HTML and CSS.
Joomla, by default provides a couple of templates to start with.
If you are just beginning, creating your own template is not where you want to start...learn more about setting up Joomla. You have enough problems there :)
Joomla! 1.5: A User's Guide is a great beginner book. It takes you through learning Joomla, what templates are, how to make them, and even walks you through setting up WAMP so you can experiment on your local machine.
The templates only affect the styling of your site. If you are starting out, I would work on getting your content in place first and wait on templates until later on.
My experience has been revamping my two websites to use WordPress, then moving to ModX, then moving back to HTML. I believe that you don't need a template but it will make some things easier as it bundles a lot of stuff you'd otherwise have to do manually. --At least for WordPress. I'm not even sure we found a good ModX template but adapted [poorly] a WordPress one. ModX is a good but little known CMS.
With one of my sites I found that it was impossible for WordPress to handle the images, thus I began working with a plug-in developer to create a custom plug-in. He took about a year and it still wasn't useable. Also I hired some consultants along the way. Their biggest contribution was "to complexify things" so I couldn't make any changes myself without going back to them & paying hundreds of $ to change a phone # for example.
I chucked all that and redid everything in HTML5 with Javascript, css and a little php. People here on S.Overflow actually helped me with the coding. I have a 3rd simple site that I may go back to WordPress for but only to use some particular functions which might be a pain to program otherwise.
Here is one of my 2 HTML sites:
coinsandhistory.com