Using a Template for Web Page - asp.net

We have a fairly large public website and have recently redsigned it with a new layout. The problem now is that with our redesign we find ourselves constantly hardcoding the html layout for all of our pages. This is clearly not the best solution.
My question is what are some options on ways to share/inherit, in a sense, a web template that all our ASP.Net projects can pull from for the layout. Specifically the HTML side of the layout. Any changes made to this template will update all web sites that use it. I'm sure this exists but do not know how to approach it.

Master Pages is what you are looking for. See: http://www.asp.net/master-pages/tutorials
or http://www.asp.net/master-pages/tutorials/creating-a-site-wide-layout-using-master-pages-vb
That's the technical solution. Oftentimes, the bigger challenge in retrofitting sites that were built with numerous one-offs is determining which parts of your pages belong in the master page or content areas. Keep in mind that you can have multiple content areas and you can provide default content in a master page that can later be overriden in a content page. It's very flexible. Have fun!

The simplest approach I know is to create a header and footer file for every page. Include the header just after the <body> tag and the footer just before </body>. You content goes in between.
I prefer a more sophisticated approach with a templating system like Smarty, but that's PHP. I don't know what your ASP options are.

Related

Can app_offline.hml be localized?

We can use app_offline.html as a landing page for the period of a maintenance work. But is it possible to localize this page?
As far as I know and can think of, it is not possible to have localized versions of the app_offline page.
Asp.net is only looking for that page to bring the site down and since it is a static page there is not much options.
Simplest approach would be to display a page with the content in all languages. This is not very elegant but would be simple and efficient especially if the content is short and you only have few languages.
If you have too many languages and/or content is too large, you could also have several div each with the translated content and display the correct div by doing language detection in JavaScript.
If you want/need to have a more sophisticated solution, you could look at JavaScript Localization frameworks (l10n.js or l20n.js) to achieve the same thing.
If you go that route, remember that you will need another website to host all the necessary JS and resource files.

Sharepoint Site Pages Readfile

I have been tasked with creating a small website using SharePoint 2010 Site Pages via SharePoint Designer. I am bringing over my favorite html template, which loads and runs as expected (mostly), but I quickly ran into the following problem.
I typically use PHP to inject certain data into my page by reading directly from a local file. I have no experience with ASP, which appears to be the only method to accomplish this. I have searched the docs and so many sites but haven't found a clear-cut way to do this, and now my head is spinning. Can anyone help me with a simple process for reading a file into the middle of my html file as it gets served?
For example:
<html>
<body>
Here's my title
<inject file contents here>
Here's my footer
</body>
</html>
Thanks all, any help will be much appreciated!
You cannot do this out of the box. You will have to create a customised solution to do this, by implementing a custom controls for instance.
When you start using Sharepoint you need to change your mindset about whatever you used before. Believe me you don't want to pick a fight with Sharepoint, because the beast will win.
back to your problem I think you should be looking at Reusable Content.
Here is a description about it:
http://en.share-gate.com/blog/sharepoint-reusable-content-a-forgotten-beauty
Basically you have a list where you manage all your reusable content bits (sort of like your files).
And then in the Rich text editor for the page content you can then insert a snippet that inject your reusable content.
if the content changes all the places you are using the reusable content bits will also change.
So this behaviour is pretty much the same you get if using a file. Except it's the SharePoint Way.
Good luck

WordPress technical theme design

In a typical WordPress project I guess there are 3 parties. Party 1 is the graphic designer providing psd/pdf or html that party 2 (the developer) will create a theme from with probably some custom posts so party 3 (the client and content editor) can update the site without messing up the design and with no knowledge about HTML, JavaScript, Gimp or PHP.
This would tie the main theme of the site or it's specific pages in the php page(s) and if some minor design changes need to be made it needs to be done through editing php files.
I was thinking the following for a theme design:
(assuming a content only site without having complicated sales statistics and such)
Instead of "programming" the page.php to fit the graphic design and bring in specific (custom) posts and other data I would have the page.php bring in sub content. This so the graphic designer can create the page without having to program.
When images need to be provided then wordpress can pre scale/crop for different screen sizes.
The entire page should be created from the editor by the designer NOT the editor/client and not in page.php:
<html {{lang}}>
<title>{{title}}</title>
...
{{main-slider}}
JS and css are added through custom fields so they can be merged to one file.
Main slider post looks like this:
<div id="main-slider">{{main-slider-content}}</div>
JS and css can be provided to overrule page css or js and will be merged to one file.
And the main-slider-content is content that the editor can provide through a custom post provided by the programmer that will hold the editor's hand all the way and makes sure everything goes right.
Some of these fields can be set with custom fields values of the page (reverting to defaults if missing) some will be overwritten by the post (like language or title).
The type of sites that will be produced by this theme are used by small business owners who would like some web presence.
I have a couple of doubts about the design and hope someone with more experience with wordpress can shed some light on this.
When the editor/client edits a custom post like some slider content they cannot preview the item because that content is basically used on every page. Even if I find a way to list pages where the slider is used and show that one it won't show the new content until it's published. Previewing pages seems a bit complicated to implement.
It takes longer to generate the pages because content and sub content needs to be fetched from the database after parsing the content. I've tried to do this with DOMDocument before and used <div data-custom-content="main-slider"></div> but that is too slow so I'll try with regexp.
Because content isn't going to change that much I thought maybe APC cache the page after a first request and serve it from there. Delete the cache only when something is updated. On VPS the cache could be (probably would be) trashed when the site is inactive for a long time (which would be quite often). This means that requests take a long time to process when people try to view the pages.
Anyone with experience or helpful tips in this
[UPDATE]
I see that particular design and the html template will still have strong dependencies on each other. I am thinking now of trying out Twig. The benefit will be that re usable components are classes that can be added to the project and full content is controlled in the wordpress editor in a way that someone with no programming experience can still manage the content.
When data needed in the page is going to change a programmer is going to be needed though.
This is kind of what the Advanced Custom Fields Flexible Content system does, and the way you've styled your examples looks very like Smarty, a templating system that used to be very popular, and which is still used by a few systems like Prestashop.
In my experience, this removing the middleman kind of idea doesn't work. You either need a very extensive - and therefore bloated - initial theming system to flex to different projects, or you need a basic one which a developer will customise later - in which case the best you can achieve is moving the developer's role to a different phase of the project.
Overall, I think the best scope for this type of idea is for designers to learn a bit more code.

Creating a site from scratch, first thing to code, Master Page, header, menu or what?

I am to create a website with ASP.net, I have the design with myself. It is a normal website
It is my first time and I do not know to start from where.
I mean what are the steps, like first menu then master page or header, footer.....
Appreciate in order way answer.
Create a prototype in HTML. No master pages, no routing, no views, controllers, inheritance. None of that.
Make a prototype of the most complex page and of the simplest page. You'll then see how to organise your layout. I'm not going to speak about architecture of the application as the topic is too broad. I assume that all this is already in place and you are asking how to build your presentation layer.
Create a basic master page that would just have a wrapper. Inherit from that master page so that you have header, main content and footer. Then adapt this to your need by introducing further inheritance if needed.
In regards to views and controllers and stuff.
I'd create those in the following way:
View model
View
Controller
Routing
This is very basic and by no means a template that will always work, but hopefully it'll give you something to think about.

How do I provide easy editing of ASP .NET master pages for designers?

Scenario:
I have a pretty standard master page for all my pages. It includes the usual login forms and other dynamic lists to be extracted on each page. Webdesigners can already modify the central content place holder of each page. But still, the design and layout for the master page is still in my project and any modification to the design must be made in Visual Studio and the project re-compiled and re-deployed.
What is the best way to provide near-full access to designing the master page through a CMS? Some of the problems I can identify is the inclusion of any dynamic lists or specific controls such as a login form.
Thanks.
Unless you want to host your content within a portal I don't know of a perfect answer to this.
If the bits they design just amount to look and feel for the page then this can be controlled by css and you could allow them to create themes using different css files.
This is indeed an interesting question, and there is no perfect solution. I worked for an ecommerce shop with this issue, and frankly, I just asked the designers in many cases to provide me there html and css, then I would grab the html pieces and css and add them to my project. Yes this was tedious....
Then we we built a cms where the designers could copy and paste their html into html editors, and we would store those pieces of html in a database. My web app would grab those from the database at run time. This solve some issues, but not all, since it did not give them complete control of the design of the web page.
The bottom line is you need to standard as to how the designer will submit their work to you. If you have that, and you can count on the html and css, then you can star to think of possibly building a CMS around that. In this days of RAD, I have found it easier to just work with the html and css delivered to me and simply copy and paste the pieces into my master page and other pages as needed.
While this is not a CMS answer, you do have the ability to allow designers to open the master pages in Expression Web. I will not say it is the greatest tool in the world, but I have had designers work up the master page designs in Expression with good results.
There is a pain point, however. If the entire project is opened, the designer will see the code behind files as separate items, not like the treeview view seen in Visual Studio.
I imagine you could have the master page checked out for use with Expression through a CMS, but there is no built in way to do this, nor do I know of a third party tool to do this. Hopefully Expression Web 3 will make things easier.
If you have a CMS, you may be better to give it full control over page content. If there are things the CMS cannot do, you could look to write extensions or plugin modules for the CMS that your designers can then drop onto the page in the CMS's page editor.
If your CMS doesn't support plugin modules, you may be trying to force both the CMS and master pages to do things they were not intended to do.
If the above doesn't work in your situation, here's another thought: place inline frames on your master page that host pages that are edited in the CMS.
Hope that helps.
Would it be possible for you to put placeholders in the Master Page in place of the areas that designers should be allowed to edit? Since Master Pages are only editable in Visual Studio, it may be your only feasible option at this point in time. One problem with this approach is that the content put in the placeholders is unlikely to be valid, since you would probably have tags left open in one placeholder and closed in another.
<html>
<head>
<title></title>
<asp:PlaceHolder ID="headerContent" runat="server"></asp:PlaceHolder>
</head>
<body>
<asp:PlaceHolder ID="beforeContent" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="centralContent" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="afterContent" runat="server"></asp:PlaceHolder>
</body>
</html>
I know it's ugly, but it might give you the control you need (as long as you don't mind the XHTML validator warning you all the time). What you put in the placeholders could be your user controls or literal content or whatever, but you'd have to load it dynamically.
Thoughts?
EDIT: This won't work. The PlaceHolder is going to render <div> tags that would mess things up. Maybe you could extend PlaceHolder and override how it renders its HTML.
Interesting question,
been dabbling in that area myself a while ago.
How knowledgeable are these web designers when not in the realm of not-inside-Photoshop-or-flash?
If using a DIY-CMS, perhaps you can template the most susceptible objects, e. g. making a generic (as in whatever you feel like, not whatever they feel like ;-)) list and a way of entering design, if applicable.
As long as you have a thorough framework set up, that deals with the attributes available to the designers through the CMS, there shouldn't be any need for recompiling... but of course, I can easily see a developer (read : me) stumbling
into the gap of nitty-pitty-perfection....
I'm afraid the easiest, and only manageable, path is to standardize how the designers express their needs&wants to you...it just won't code itself...
Could you provide some examples?
Well, with a Web Application Project pages are not compiled until accessed (link is 2005 but it still applies). This means that the actual .aspx (and .ascx etc) page is deployed in its original state. A designer can update the format of the page on the server and the updates will be compiled the next time someone requests that content.
It would be relatively trivial to allow designers to download the current pages and upload replacements through your website's UI. However, it isn't very secure (and probably should never be done). It would be better to allow designers access to the virtual directory over the web so they can connect to it using a tool such as Expression Web. This way the designer can open the current website, edit pages, and push the results directly into production (scary tho that thought may be).
As I'm getting downvoted for having a correct answer, let me point out something.
Website projects compile codebehind and pages on demand. If you need to update code regularly, its an okay solution.
Web application projects can be configured to be updatable. All codebehind and classes are compiled into an assembly, and all aspx, ascx, etc pages are deployed and compiled on demand. This means that a designer can connect to the website, update the layout and static content, and see the changes on the next request.
This is my preferred method of deployment. I have a few web application projects out there in the wild, with updatable aspx files deployed alongside my dll. The idea being that users of the website can alter the UI without having to submit updates to me so I can recompile it for them.
a .master is just a text file. They can edit it however they like. There's certainly nothing they'd do to it that would require you to recompile the code just to view it. That's the big win with Master Pages in the first place: designers and other non-programmers can edit them manually without breaking anything.
Give them access to the file under source control and let them go nuts.

Resources