I'm learning to use PHP, CSS and XHTML. I would like to do a multiple site which have common style? How can I do some general background and how to import it to all my sites? I would like to have the following code in every page:
<div id="document">
<div class="nav">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</ul>
Try using include: http://php.net/manual/en/function.include.php
<?php include("standardpage.php"); ?>
or across the web like this:
include('http://www.example.com/mymenu.html');
For CSS stylesheets you can use:
<LINK rel="stylesheet" href="http://www.example.com/sharedstylesheet.css" type="text/css" />
Utilizing a PHP framework or template language is a frequently employed idea. The concept of an HTML template in which you plug computed values or dynamic content into is an especially powerful one. This can be done with PHP itself (which is a template language) or with something like Smarty (which is a simplified template language written in PHP).
The typically accepted approach is to not go with a separate templating language (even though this is still common in certain applications), but to instead utilize a PHP based framework. Four of the most common ones include:
Zend Framework
Cake PHP
Code Igniter
Symfony
With that said, however, in some applications (such as developing a CMS meant for implementation by other developers, a mailing list tool which accepts common templates, or other similar ventures) a separate template language to expose a limited set of PHP functionality can be useful. In such cases there are a number of choices, but Smarty remains the most widely used:
Smarty
You can end up writing your own framework, many people do, the idea is to separate business logic from presentational logic. This can be achieved in an infinite number of ways, but existing well-supported frameworks are a strong choice over rolling your own if you are not a guru. The reason is that they typically enforce a solid Model-View-Controller schema and offer several useful abstractions which makes setting up templates and dynamic websites much simpler than simply in-lining a bunch of PHP and hoping for the best.
Mixing business and presentation logic is the easiest way to completely garble any intention and render your online application an intractable mess. It is also a common anti-pattern new PHP developers fall into because the language makes it so easy to do this (and many other things) wrong. It is important to be aware of this and make use of such abstractions you have available to minimize coupling.
Related
I run a design firm and have frequent need for Drupal development. I'm looking for a bit of guidance on a Drupal workflow that will work best for my company.
My experience working with Drupal developers in the past has been great for back-end development, and chaotic for front-end development. Projects end up with multiple and inconsistent CSS styles, and doing quality control on the visual aspect is very time-consuming.
Moreover, I'm a front-end coder, and use HMTL/CSS/JS prototypes for all phases of projects. I would prefer if the front-end coding I do to was used by the developer instead of going to waste.
However, this workflow hasn't been compatible with Drupal dev partners so far. Because they use themes, and retro-fit them to the design I give them, they aren't able to use the HTML/CSS/JS work I do. Moreover, I have a responsive framework that I like (Foundation), and my developers want to work with the standard responsive Drupal theme (Omega). I don't like Omega because it isn't fluid.
Then there's things like my developer telling me they can't do a carrousel that uses CSS (background-image), because the available Drupal carrousel modules are all based on using the HTML img tag. Does everything have to be based on modules?
Going back to the HTML/CSS inconsistencies and the time-consuming design QA, I think this comes from trying to retrofit a theme. The code is very messy and it makes it hard to target elements for styling. It also makes it impossible for me to do my own CSS changes if I want.
So, in short, I'm looking for a completely different design workflow, and I'm looking for feedback on whether it's workable in Drupal without inflating costs.
Is it possible in Drupal to use front-end code (provided by me), throw in some PHP tags, and end up with cleanly-coded pages, instead of relying on themes? Would this reduce costs (because the HTML/CSS/JS is provided), or would it inflate costs (because it's easier to use a theme)? Are there any security issues involved? Are there update issues involved? In short, what's the big advantage with working with pre-fab themes?
I really, truly appreciate your comments.
We usually develop from the backend to the front end. Modules like Views add many div tags, classes and tags so the theme developer can make better use of them and fine tune the design.
I do not think that is a "messy" code unless you are doing all of the work in tpl.php files.
Modules simply processed the data. It should not heavily theme the output. For a better understanding, see the image below (from drupal.org):
If you want to do any database intensive work in the template level, you will have to load many stuff again that you could simply do in a module.
In my opinion, if your developer is not hardcoding the HTML stuff, he is doing it right.
Keep in mind that you can override most of the theme functions so you already have the flexibility if you want.
Is it possible in Drupal to use front-end code (provided by me), throw
in some PHP tags, and end up with cleanly-coded pages, instead of
relying on themes?
Yes. But you can't simply use slider-image.php like files for that. You will have to add necessary theme functions to and pass the variables to it. IMO, it's relatively more work if you need to completely rewrite the theming functions.
Would this reduce costs (because the HTML/CSS/JS is provided), or
would it inflate costs (because it's easier to use a theme)?
I do not think so. If you have multiple backend developers working on code, ask the theming team to make changes to HTML/CSS. CSS can make your site look worse, and a security bug can ruin your business, expose all your user information or even worse.
Are there any security issues involved?
Most likely. Default theme functions tend to come with much better security. Even though few bugs come out, they will get fixed soon by the community.
Are there update issues involved? In short, what's the big advantage
with working with pre-fab themes?
Because there is a whole lot of work that you can simply adopt. That will also block you from adopting others' CSS work though.
I work somewhere with highly stylized well thought out front end builds which are almost not compatible with the way Drupal theming is handled currently. Having front end developers track down bugs is also very problematic. It looks like there's some acknowledgement of this in Drupal 8 at least. At this point we frequently rework Drupal to work as an API and then build a lightweight PHP Framework app on top to pull content when we need it which gives us total flexibility to do anything we want with the frontend. Another alternative is to checkout Expression Engine where you are explicitly telling it what markup you want outputted and how you want your content to be placed in the markup.
The holy grail would be a very lightweight layer that was part of Drupal where we could use Twig to pull the content the way we want it and all HTML output was defined in Twig.
well I'm a php programmer who for a period create some php application by using codeigniter framework. Now I would pass to the next level using a framework more powerful and my choose is gone to symfony framework. I read good things about it and looking for some infos about it, it seems me a good next level. I saw that it uses a templates engine names Twig and since I come from codeigntiter I fell a little uncomfortable.now I would know which are the advantages in using twigs?is it really of help using it in web application?
In my short, subjective opinion, templating engines typically result in cleaner views, and in some engines' cases (some more than others), better enforcement of separation of concerns.
As far as discussions & articles go, there are many if you search for them. Here are a few references though:
What are the real advantages of templating engines over just using PHP?
PHP vs template engine
(older, and also could be biased towards Twig since it was written by Fabien)
http://fabien.potencier.org/article/34/templating-engines-in-php
Twig's website even gives you an overview of why it can be helpful:
http://twig.sensiolabs.org/
One thing to keep in mind regarding Symfony is that you are not locked in to using Twig. In my opinion, it's easier if you do, but you can just as easily tell Symfony you want to use straight PHP templates instead.
Twig is dead simple yet powerful templating language, and is just a bunch of shortcuts to what you'll do in PHP.
There is cool built-in tools like filters to avoid inline php common treatments on strings (for example), macros and possibility of extending the language. The syntax is very clean, and easy to learn.
There is a great documentation.
Recently our newest web designer asked me why we use ASP.NET for our website. Reading through his question to the real one, I started thinking about it myself. Why are we using ASP.NET for web development?
The problem we find so far is colaboration between the design team and developers. Typically our designers create some snazzy cool look crayon laced web pages, then show them off for approval in all their glory. Once approved, the developers rip the HTML out and shove it in to ASP master and detail pages, and huzzah! out comes pretty website.
Since Dreamweaver doesn't play nice with Visual Studio, this is the same process for even small tweaks and changes. I would prefer to just write the backend and let the designers draw the pretty pictures and fancy CSS. Our current websites have plenty of reason to use ASP on nearly every page, so I can't do half in HTML, the other half in ASP.
I have no aversion to doing something else, another language, CMS platform, some other random buzzword, etc...
What are your experiences with this design situation? Are we doing it the hard way? Should we consider alternate platforms and languages? Are there any good, proven ways to allow designers to work on ASP (while still using Dreamweaver)?
Start learning Asp.net MVC as soon as possible. Designers will love you for that. :) And you'll be up to date with new development technologies that will also make your solutions much more robust and less complicated.
But otherwise. Designers should be able to read XHTML fluently. Learning asp.net semantics shouldn't be too hard. Then give then Visual Studio where they can manipulate content. As long as they know how asp.net web forms work things should be fine. They'll probably be able to do majority of things using just CSS. I know I can. Sometimes I do have to check resulting HTML, but it works.
Aside from Wicket (a java web framework), I don't know of any framework or language that would allow designers to continue to work on the design once developers have started to add logic to it.
I would suggest two things though:
Use a MVC framework - ASP.NET MVC, Ruby on Rails, Django, etc since this allows for far more separation of presentation and logic
Keep your presentation layer as stupid as possible and use helpers as much as possible or even better, put the logic in the domain objects. The view should only show or get data with absolutely no logic for processing data, this will keep the pages much more designer friendly.
I find your question very interesting because no matter what kind of technology the project uses the interfaces between the different roles will always cause some friction. I am not sure if there is a technological solution to this communication issue because the designer and developer speak literally different languages.
Depending on the skillset of your designers and developers an additional layer might help you out. I do not know how ASPX works but i am sure there will equivalents to the concepts of other technologies.
In case you have mainly static content which can be expressed in XML than you could provide the backend which delivers the content in XML with a defined Schema and your designers could describe the transformation in XHTML and CSS via XSLT. Given that your designer are capable using XHTML and CSS the addtional effort to learn XML and XSLT is not that huge. I find this solution much powerful than template languages which try to emulate the richness of the serverside scripting language in their own limited constructs. In case you have dynamic elements on the clientside like DHTML, AJAX or you name it you could define your own xml tags which are transformed to richer client side objects after the designer did their work. I guess the designer will understand the usage of these special tags and you provide the proper translation into client side objects.
I used this approach with some coworkes based on PHP. PHP was only the driver for the transformation. The content was assembled into xml with special tags which were transformed into XHTML and CSS via XSLT. Once the objects and the transformation for the different objects is defined you build up a library which can help to shorten the developement cycle of new pages of you webapplication. The benefit of the extra work is, that you designer can change the layout of the page without ever touching you server side code.
Maybe this helps.
Consider using either Expression Web or SharePoint Designer. The latter is now free.
I know you specify dreamweaver, but have you looked at Blend? It plays very nice with Visual Studio and is quite a nice app. to work with.
I have been thinking of using a CSS framewrok as many web designers use it. They say that it is good, etc. But is there any real advantage of using a CSS framework like 960 Grid System or Blueprint? Will it make my life easier? Do these frameworks consider the devilish Internet Explorer?
Any insights will be helpful.
Many frameworks include Reset-Rules, which is a single stylesheet (Generally Meyers' or a derivation of it) that balances out the rendering of elements across multiple browsers. Now, if you decide to use a CSS Framework or not, you SHOULD use a Reset.
I've only really used 960, and I must say that I enjoy it. The cool thing is that your layout is laid out with classNames that contain numerical-values, meaning you could programmatically determine a new layout if you like - simple math. It also makes developing a complicated layout much faster in many cases. Nettuts did a video of 960 some time back called "A Detailed Look at the 960 CSS Framework."
Do you NEED a framework? No. Do they help? In many cases. At the very least, I would encourage you to download 960 and play with it, and from now on start using at least a Reset.
Example of 960 Markup and Class Names:
<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...
</div>
<div class="grid_3">
...
</div>
<div class="grid_2 omega">
...
</div>
</div>
<div class="grid_3 suffix_1">
...
</div>
</div>
It's a good idea not to confuse the concept of a framework with a type or instance of a particular framework. Some argue that because a framework (like 960 for example) doesn't suit a certain use case, you should avoid frameworks altogether. Crazy!
A framework is a tool that good developers use to get a job done. A skilled developer might even build their own framework for their own consumption. Abstraction is a powerful concept that every developer should master.
It's interesting to take a moment to consider a good definition of a framework: "An abstraction in which software providing generic functionality can be selectively changed by user code". It could perhaps be argued that CSS is in fact, a framework extending HTML.
I have played around with 960 and I recommend giving it a go but these days, I tend to make my own set of rules (a framework) using something like sass. There is a port of 960 and blueprint into sass, I think.
I recently worked on a large enterprise website and one of the first things I did was abstracted out the hex values from the CSS into a color palette so there was less redundancy in the CSS files. A month or so later the client asked us to rebrand the site for a different market which meant changing a few sprites and updating the color palette and the job was done. It took just a few minutes!
But to answer at least part of your question: Yes! There are advantages to using a framework. I would even go as far to say that avoiding them is a little naive.
PS: sorry if my answer is not specific but you did mention any insights would be helpful :)
I agree with what's been said so far. Those frameworks do speed things up. Yes, it is important to really know what's going on behind the scenes, but to answer your question, what are advantages of using a CSS framework. Here's my take on that:
By using a framewok you don't need to be a CSS expert to implement any design. This has been especially useful for me when I need someone else to implement a design, and an expert is not available.
It depends. If you are learning CSS or the project doesn't require a lot of styling, I think you shouldn't use a CSS framework. Also, if you want to create a very unique or specific styling, it won't help you a lot.
However, if you are experienced with CSS and the project is large, a CSS framework may help you to save time and problems.
And yes, they consider IE.
CSS frameworks can really help save time laying out your page with just a set of predefined classes. I think they are great and can really decrease the time you spend converting a design to html/css. I would recommend taking a look at a few that I use on a regular basis.
heymuscle
960gs
1140 grid
hope this helps.
Once you get used to them, CSS frameworks can seriously speed up the creation of crossbrowser websites.
IE support varies from framework to framework. Some support only IE8 and up. Others support old IE up to IE6.
I released my own CSS framework "Cascade Framework" a couple of months ago.
We are contracting an external consultant out to generate XHTML (Transitional) and CSS for most of the major pages of a new project we are currently working on.
I've been asked to put together a list of guidelines for them so that we can be sure that a certain level of quality can be expected. As a bit of technical background, we will be incorperating the raw HTML they provide into an ASP.NET web forms application (utilising the usual master pages / external stylesheets / jquery). Javascript should not be a consideration, but formatting and organisation of CSS should be.
I've made a start but quickly realised that this is probably not a unique situation and that a tried and tested list might be out there somewhere that I can at least use as a template! Has anyone got any experience of this?
From a technical standpoint, pages must pass validation is probably the first test I'd have.
I would expect the site to be able to be used by someone with JavaScript disabled, and someone using a screen reader (this is quite a good one as it should also highlight issues with inappropriately used tables and other things such as missing image alt tags, inconsistent use of header tags etc.).
One good test I always make for myself is opening the page and ctrl+scroll.
The zooming gives you an immediate idea about how flexible and liquid your design is.
In IE this tends to fail no matter what, but there you could also try to make the font bigger and see what happens (pay attention to buttons stretching vertically for example)
Give them a list of browsers (browser version and OS) you expect them to support.
Should the accessibilty guidelines be adhered? You could agree on supporing some of the points in the Checklist for Web Content Accessibility Guidelines. The list is actually quite usefull, since it will not only insure that your site works for people with disabilities but also for browsers without JavaScript, CSS, Images. The list also contains some general good practices for building sensible web sites.
Since you're using ASP.NET make sure that they only include one <form> per web page. Or at least, be prepared to make some workarounds, if you allow them to use more.
If you're planning on using AJAX show them ASP.NET AJAX Control Toolkit so that they don't spent time on things that have already been built.
I would insist on that they use some proven frameworks like YUI css reset and jQuery.
One thing that makes passing an HTML / CSS template between multiple front-end developers is proper structuring and indenting of the markup. The same way books are broken down into volumes, chapters, paragraphs, sentences, words, spaces, and periods, there is a hierarchical structure that makes HTML and CSS easy to read (and on the other hand a way of coding that makes things a total mess)
As a rule of thumb:
<body>
<div id="first">
<p>
Some text goes in here...
<p>
<ul>
<li>A list item</li>
<li>A list item</li>
<li>A list item</li>
<li>
<ul>
<li>
A link
</li>
</ul>
</li>
</ul>
</div> <!-- #first ends -->
</body>
This kind of adherence to structure can really cut down on time by making scanning code super easy for whoever is working on it– regardless of whether they wrote it or not.
Apart from validation the following points should be keep in mind
- Accessibility (Who are the audience)
- CSS based design (Where semantics are well designed)
- Be consistent with your naming convention (css and id naming. This will be beneficial in the long run when any change needs to be made, when a new css has to be applied etc).
Check out the following best practices from yahoo developer library...
http://developer.yahoo.com/performance/rules.html
Also since you are using ASP.net be careful when naming usercontrols as the client side ID that is generated could be quite long and unexpected(asp.net generates the id at runtime);
Some good info could be found at
http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html
Indeed, make sure that the page passes validation.
Also pay attention to semantics, the page should be in a logical order when CSS is disabled (which is the case for some browsers and screen readers). Make sure that headings are actually <h#> tags and that all images have appropriate alt tags. Also make sure tables are only used to display information and are not used for formatting. The menu should be constructed as a list not as divs (semantics).