I am trying to imitate this tutorial about creating a simple Apple-themed breadcrumb found here:
http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
Even after looking at the updated example and downloading the source code from here:
http://www.lostsockdesign.com.au/apple-breadcrumb/index.html
I cannot tell how only the HTML and CSS "knows" which page it is currently.
Obviously, if your browser is pointed to "http://www.lostsockdesign.com.au/apple-breadcrumb/index2.html" the browser knows you are on this page, but what part of the HTML or CSS specifies that the breadcrumb should leave out the graphics for the subsequent pages, and fade out the current page graphic?
Sorry for the simple question.. xD
UPDATE:
OK, now that that's solved, anyone have a suggestion for the simplest way to effect a script to work with this tut?
It doesn't.
That tutorial is simply for styling, not for generating the breadcrumbs; you have to do that part yourself, through some sort of scripting or manually.
Re: Update
Breadcrumbs are essentially the current path down the tree that is your site. Start with a site map (not in the XML, SEO sense, but in the actual page structure of your site. For instance:
Home
JavaScript
Vanilla
Gallery
Lightbox
Dice Roller
jQuery
Cycle
Click Tracker
Blog
RSS
Web Development
Object Oriented CSS
Currying Functions in JavaScript
CSS Reset Files
Gaming
Review: Super Mario Bros.
Camping Strategy in Oregon Trail
So Your Mom Wants to Play Wii Golf
Portfolio
DEA Website
We <3 Kittens
Nobody Likes IE6
So, if you're on the page "CSS Reset Files", you follow the tree from the (not shown) root, and show every level you find in the breadcrumbs, resulting in this:
My Site -> Blog -> CSS -> CSS Reset Files
This data can be stored in the database and pulled out using the server side language of your choice, or it could be automatically generated based on directory structure using server-side or client-side scripts, or you could manually code them into each of your pages.
How you do it is entirely up to you, but this is the basic concept.
You don't use HTML and CSS (CSS3 has some limited features like this, but I don't think they're quite ready for prime time yet) to figure out what page you are on. Usually server side software (such as a CMS) is used to output the breadcrumbs, complete with CSS class names that indicate which page is the current one etc.
Related
Are iframes still widely in use today?
I am coding a site with divs, and I want everything to appear in the container div. Is it possible to do it without coding the header + nav into each page and have the content show at the exact same spot without using iframes?
I did a quick Google search and found a post that said it's not possible, but my site will have quite a bit of links.
As of right now, I am coding it with Tumblr, and the hashtags in the posts would act as links to a section of posts (Ex: #blog would retrieve every post under the "blog" link). What are some widely used ways to target links on a website?
If you are creating a multi-page website, it would be helpful to have the HTML content be generated dynamically or be built statically from template files. You don't want to manually update the same content across multiple HTML files.
Dynamic Pages
There are several options for dynamically generating HTML content depending on the software available to you. For example, PHP is a popular language for web development and is available through many web hosts.
Static Pages
It is possible to build static HTML documents from templates using something like Jekyll.
I'm not sure if I'm interpreting what you mean by "coding it with Tumblr" correctly or not, but I think you mean you're making a Tumblr site with their built-in HTML editing capability.
I think you'll have a very difficult time achieving the behavior you desire there. I think you're trying to create something resembling a single-page application. Tumblr probably just allows basic static HTML with little Javascript. The suggestion Kyle made about using PHP or something like that won't work because that code must be executed on a server, and Tumblr doesn't provide that capability to my knowledge.
If you really want this kind of functionality, you probably should get some paid web hosting and develop your web development skills. It's not a simple task, but it's fun!
Sorry if I underestimated you or anything. Just trying to read between the lines. It seems to me that you may be relatively new to web development given the content of your post, and I'm trying to nudge you in the right direction constructively.
I have to migrate a static HTML website to TYPO3. I know, I could read docus first, but I believe I will need to read some days first to only recognize which direction to run...
Do I have to learn TypoScript like
Default PAG
page = PAGE
page.typeNum = 0
page.20 = TEXT
page.20.value = HELLO UNIVERSE!
page.10 = TEXT
page.10.value = HELLO WORLD!
or is there another way to do it quickly? With markers?
thank you guys!
You will have to learn a little bit of TypoScript to do what you want. Sorry :-( But you won't have to learn that much, and what you do learn you'll be able to reuse when building other TYPO3 sites.
First thing: skip markers. Markers are a remnant of an old, deprecated templating system. The way you should be doing this is with TemplaVoila.
TemplaVoila works by giving you an interface to map TYPO3 content (or instructions to generate content) to blocks of markup in your HTML file. In other words, you take your static HTML file, then go through it and tell TemplaVoila "OK, that DIV is my sidebar, so put a list of all the site pages in there... that P is the footer, put a link to the privacy policy there... that DIV is the main content area, fill it with blocks of content created by the user," and so forth. This is a very powerful approach, because it means that if you work with other Web designers or graphic designers, they don't have to learn any special "magic tags" or markers; they can just give you well-formed HTML and with a few clicks you can turn it into a live template for a site. Pretty nifty.
There's a piece of TYPO3 documentation called "Futuristic Template Building" that explains pretty clearly how to go from a static HTML page to a TYPO3-ized site with TemplaVoila. Here's a direct link to the section of that doc that walks you through the process. (Don't be scared by the word "futuristic" into thinking that TemplaVoila isn't fully baked yet -- that doc was written six years ago, when TemplaVoila was pretty futuristic, but today it's quite mature and in use on TYPO3 sites all over the world.)
This should be enough to get you started, but if you hit roadblocks or can't wrap your head around it feel free to post your questions back to this thread and I'll help you out.
I'm reviving this, since a lot has happened since 2010.
There are multiple ways in TYPO3 to do the templating. All of them involve TypoScript, but in some there is only a minimal amount of TS needed.
Use "the old built-in way", doing all rendering in TypoScript and some HTML templates with markers in them. In this approach, you'd use the content elements provided by the core. Their rendering is defined with TypoScript in the core-extension "CSS Styled Content".
Use "the new built-in way". Here you'd also use the content elements provided by the core, and optionally self-defined ones. The rendering happens using the Fluid templating engine. You would do this using the core-extension "Fluid Styled Content". This is available since version 7.5.
Use a third party extension for content element rendering. I know of these:
Templavoilà - You probably should not use it, since it is not actively developed anymore, although there is a version claiming compatibility to TYPO3 7 LTS, but I don't know much about that.
FluidTYPO3 - This is a whole ecosystem of extensions with which you can define page templates and content element templates completely using the Fluid Templating engine (backend forms, backend preview and frontend rendering). It also provides a mechanism for nesting content elements.
DCE - Dynamic content elements. I don't know anything about them, you would need to read the docs.
Mask - TYPO3-core near wizard for own contentelements and pagetemplates. Uses database fields, not flexforms.
More extensions I don't know of.
It would be a bit much to explain all of these here in detail.
My current personal favorite is the FluidTYPO3 ecosystem, but I'm considering a switch to using Fluid Styled Content, because it is directly integrated into the core. I'm not sure if it supports nested content elements, so maybe one would need a separate solution for that (e.g. the extension gridelements).
I'm trying to create a theme for a CMS, but it's proving nearly impossible, as I have no understanding of PHP or ASP.NET. I can put a site together via CSS and HTML, but I want clients to be able to add and edit content themselves. I'm about ready to give up on designing one altogether and just use an existing theme.
I've had a go at trying to understand the inner workings of Wordpress, SilverStripe, Umbraco and Pixie, but the tutorials have left me confounded. Are there other CMSes I should be looking into for a more simplified theming process?
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
Anything but DotNetNuke.
I'd recommend giving Wordpress another try.
I'm no web developer, just a an average Java/C# programmer who needed a web site and has some basic knowledge of HTML and CSS. What I did was find a theme that was similar to what I wanted, then started tweaking it incrementally. My theme is pretty basic, but before long I got a pretty good grasp of "The Loop" and printing out category and page links and such.
How about Movable Type?
You can (and should) edit the templates via the web interface, they are divided into separate modules, so you can concentrate on one area of the site, styling is of course handled via CSS.
It took me a few hours without any prior experience with this CMS to completely port a Wordpress theme to MT - I found the documentation very helpful and didn't even have to look elsewhere.
An awesome thing about MT - it generates static pages based on the templates you defined. Meaning, very low load on the server, you don't need to query the database on every request, etc. You could probably do the same/similar by activating the cache plugin (or is it built in now?) in Wordpress, but here it's the default modus operandi so it's more stable and integrated with the CMS.
Drupal with the zen theme (or a "lighter" version of it: Starkish theme) seems like a popular choice (and well deserved, too). It gives you a good starting point, it has great documentation and many modules available.
PS: I've added this as an additional answer so that it can be voted upon separately from my other suggestion - I just could not stop myself from bringing up the Drupal + zen combo :)
I worked with Joomla, it is really easy to have a theme for it without knowing any programming language. When you install it using a simple installer, there will be a folder named templates. There are three simple themes each in its own folder. Just copy one of them,change XML data for that theme ( just to name it and have some details, no programming ) and change the contents of CSS and HTMLs. every where you see something unrelated to HTML like , copy them!! Names are descriptive. so you can guess what do they do. give it a try!
I'd really love to be able to just drop a chunk of code into the content area of a given HTML page, and make that region editable from a WYSIWYG front end that the client can log into. Is there such a thing?
The only system I've come across with this kind of functionality is Perch.
Just create your website using HTML/CSS as usual and chuck in a few small php tags where you want editable content. These areas are then added to an admin area for your clients to edit.
The only drawback is it costs £35 per site - I don't know if there's a free/open-source CMS with this functionality...
It's difficult to say which CMS will be the best one for you (maybe your question should be made into a community wiki question).
I have a little experience with mojoPortal, and found it to be easily customizable. There's a lot of documentation about how to skin your CMS and there a lots of complete skins that you can use as a starting point.
There is also a demo site, where you can see how the CMS works for an end-user.
Take a look at Joomla. That was the first CMS that I really used, and I still think its templating engine is better than most of the others out there.
Its template system essentially lets you build a standard web page, and then use some simple tags to define where the content and modules would go. You can override the output of most external components and modules without too much trouble, and the vast library of third-party extensions should help you add a ton of functionality to your site without much coding on your part. Joomla also has a fairly easy-to-use administrative backend, so your clients should like it too.
This page for themeing Wordpress helped me a lot:
Theme Development
UPDATE
Xichael,
If you know HTML and CSS pretty well, but you just don't want to spend time learning the Wordpress framework, then I think this is a good option for you (again, I can relate to your situation). Use Wordpress with the new Toolbox starter theme. It's super minimal.
Toolbox: An HTML5 WordPress Starter Theme
Here's an example of what it looks like. Just "View page source" and go to town on the CSS!
I've thought about writing my own very simple CMS just for handling pages, i.e. you have some sort of template, and then a <div> in the middle to drop in text from a WYSIWYG editor. You could even use XML as the data store to eliminate having to set up a database to store the page content.
It would sort of be re-inventing the wheel though, because there is so much polished CMS software out there already, but it wouldn't be that hard because it wouldn't have 99% of the features most systems have. However, what happens when your client wants to add something in the future that's already standard in an existing CMS or plugin?
If you are looking for a simple CMS tool, CMSimple is as basic as it gets. A small PHP based CMS system that does not even require a database or XML.
"CMSimple is the ideal tool for a single user to maintain a website."
Original version here: CMSimple.ORG
Original plus 2 enhanced versions here: Download CMSimple
117KB content manangement system
no database required; the entire site is stored in a single HTML file
built in WYSIWYG
no modules or widgets, no blog, no comments, etc., just basic pages
uses PHP (but no database)
Get themes here: dotcomwebdesign.com
I was looking at an HTML5 presentation and was wondering if anybody knew how the actual presentation was created. You can zoom in and out and view all the slides. You can also navigate with your keyboard.
Here's the site with the slideshow: http://slides.html5rocks.com/#slide5
First of all, it's not really mimicking PowerPoint. It's surpassing PowerPoint. :) Second, it's doing what the URL implies: rocking your world with HTML 5. Each slide is an example of markup and CSS (and Javascript) available in HTML 5. To find out all about how they do it, right-click on the page and choose "View Source" ... it will show you all the markup and scripting etc.
You can definitely do as Robusto suggests and view source and go from there.
But you might find it easier to get a more stripped version by going to http://studio.html5rocks.com/#Deck and downloading the sample from there. It's the same thing basically but has fewer external dependencies and fewer initial slides so it might be easier to work with. Basically, put the content of each slide in a <div class="slide">...</div> the way you see it with the four sample slides in the source code.
There is a very useful CSS3, HTML5 library called impress.js at http://bartaz.github.com/impress.js/
I'm designing a simple website with no dynamic content that I want to be light and portable — no PHP or other server-side scripting needed, or wanted. I'm running into a question that I've had a few times before.
I'd love to be able to write common elements (head, foot, navigation) once and write the individual pages on the site with content only, then run this mysterious utility to compile everything it into a set of HTML files ready for uploading. A page might be written like this:
Title: Our Services
Top Navigation: Yes
Scripts: jquery, lightbox
<p>
Example, Inc. offers a wide range of…
It'd be great if the engine also had logic that lets me include or exclude elements (like Top Navigation above) from each page, and automate tasks like labelling the current page in the navbar:
<a href="/services"{page == 'services' ? ' class="current"' : ""}>Services</a>
Are there any engines out there like this?
I'd head directly towards Template-Toolkit for this. It comes with the ttree utility for building a static site.
You can handle the last part of your question with something like:
[%
INCLUDE 'navbar.tt'
page = 'services'
%]
To be honest, this is where things like PHP come in handy... to include common elements
Option 1: Use a language and enjoy it.
Option 2: Use the language to make the site... but then point a crawler at your site to grab the generated "static" content. e.g. WinHTTPTrack
Webby is fantastic for exactly this.
Another great option is Jekyll.
Adobe Dreamweaver's Templates do what you need if a non free tool is fine for you.
Basically you create a Template page where you define which parts are editable, then you create all your pages based on the template. If you change the template and save it all the associated pages are updates.
The templating system also has the ability to define default attributes and change them in a specific page. You can use this for labeling the current page, though for this IMHO a couple of lines of jquery code are much better.
You could write a program in any language you are familiar with that outputs static html files. You could have a basic structure and then for the customized stuff, you include it from a separate file.