This is using MVC 4 with Visual Studio 2013:
I am wondering on how I would approach changing the text of my website dynamically through the click of a button. This is also the same for contrast. I am wondering if there's any plug ins or approaches I can take to do this?
Heres an example of it being implemented correctly : http://www.bbc.co.uk/accessibility/guides/change_colours/#
Giving different text sizes and contrasts etc. How would I approach this?
My idea was to have a button that calls the same CSS sheet with the new colour /contracts. But that would mean I would need about 4-5 CSS sheets that are exactly the same with just the text/contrast changing. Is there a better approach to this?
May be Observables and data-binding is your best solution here.
Basically, you can bind your html with observables (your data model). When your data model's state changes, your UI updates automatically and vice-versa. It follows the MVVM pattern.
One of the most popular libraries out their for MVVM is Knockout.js (Here: http://knockoutjs.com/) This will make your life much easier! It made mine. :-)
Hope this helps!
Related
I created webapp design in Adobe XD.
Now I want to create that design in Webstorm using Bootstrap framework and HTML.
Is there tool, which can recognize items from .xd files?
Or at least where I can create items in GUI, which translates my item into HTML (for example blue square button with text inside which changes opacity when having mouse arrow on it)?
Some tools make it easier to convert the design to code, but you'll (probably) won't get around writing code to get a good website.
First of all, there is no real way to directly "convert" prototypes to websites. There are now some plugins to make things like this easier (e.g. "Lightning Storm CC"), but in all honesty, that doesn't get you around writing code yourself.
Also, it could be challenging to implement a custom design with Bootstrap (or did you use a Bootstrap UI Kit for Adobe XD?), since Bootstrap itself makes it quite tricky to achieve custom designs.
All in all, I think the solution you're looking for doesn't exist. Some tools are making it more comfortable, but you won't get around writing code when implementing a custom design. I think the truth is that there are two options: Implement a custom design (with code!) or don't care about the design aspects and use framework X (here Bootstrap).
I think easiest way is to export the design from xd using any tools to html, here is another tool might be useful "web export"
after that you just have to implement bootstrap and start adding classes to your components button,input...etc
but as mr pklaschka said it's hard to do custom without getting your hand dirty with some codes
good luck
Is there tool, which can recognize items from .xd files?
Or at least where I can create items in GUI, which translates my item into HTML (for example blue square button with text inside which changes opacity when having mouse arrow on it)?
You can use Desech Studio to import your xd file and then you need to adjust some margins and sizes. This will convert it to vanilla html/css, not bootstrap.
After that you can switch to Webstorm and code your website there, or you can stay synced with Desech Studio and integrate with react, angular, vue etc.
I need a client side HTML form builder I can implement into my project to give my users to ability to add/edit form design and field properties as desired. I am using Telerik Kendo just to provide some background and I have a basic form, however if the user needs additional fields, or even additional labels I want them to be able to edit their own forms.
I found Jot Forms and dozens more (http://www.jotform.com) but that does not work for me. All fields are in a vertical fashion. I need the users to be able to drop a field, move it around where ever they need.
So in the end, I need a form builder I can use in my project where users can create and use alternate forms. They need to be able to drag, drop the form element anywhere on the page and of course edit the properties as necessary.
If there is anything out there I would really appreciate some help on this.
I appreciate the constructive feedback. I have ventured into discovering what it would take to build one of my own.
I found most form builders already done out there that I demoed would build a beautiful form. As long as your desired form is simple. As I tested I found complex forms would require additional coding on the back end. Something most users don't know how to do, and something that would be a support nightmare.
I so far have found that the JQuery UI draggable, droppable, etc. features will provide me with ample tools do build my own. So far I have a proof of concept where I can drag items onto a workspace. The nice thing is that I can incorporate HTML code specific to my Javascript framework, Kendo. We use it at work and it has nearly everything including drag and drop. Just not functional in a way where I could see building a form builder.
I am learning all of this as I go, so thank you for commenting and please forgive me if I sound inexperienced. I am, but I am not afraid and in fact love to get my hands dirty with new stuff.
I've been working on the web for quite a long time and I saw the "best practices" evolve. I'm now fairly convinced separating HTML (Content), Javascript (Behavior) and CSS (UI) is the best thing to do.
A few months ago, I started using knockout.js . I did choose it among other similar frameworks like backbone or angular because a chapter in an MVC training I followed was about knockout, and the concept seduced me. Then after a quick comparison on the web it didn't look as a bad choice for my needs, and for a start.
But here's my problem : when I look at my HTML code now, after a few weeks of dev on a project, there's quite a lot of knockout bindings in it, and it makes me think a lot about the old times, when we (or at least I) used to put inline javascript event handling through onclick attribute and so on.
Therefore those 2 questions, which I'm not sure are 100% suited for SO, but I can't find any better StackExchange site to ask it :
Is using knockout (or the other frameworks as they all seem to basically work with the same pattern) contrary to the "separation rule" ? Or is it an acceptable small-step-out of this rule ? or is it even perfectly acceptable because it uses the "data-" attributes ?
In the case this would be a somehow bad practice, is there any possibility to do all the binding through a separate javascript file, using for example jQuery to select the controls and apply bindings to them ? If not possible in knockout, is it with another framework ? I must admit at the time I did my selection, I diddn't think about this kind of implications...
Thank you and sorry if this should be moved to another SE site.
I had the same initial reservations as you, but I have to say that having the bindings in the html and not hidden away in a JS file seems so much better to me, as the link between presentation and functionality is now completely obvious. It massively reduces the possibility of changing some HTML and breaking functionality because you weren't aware that someone had hooked up some javascript to an element using jQuery.
Also, as you point out, the use of the data-bind attribute does, I think, mean that it does adhere to the separation rule, though if you want to stick to it rigidly then make sure all bindings are to observables, computed or functions on your view model, don't use any code (i.e. a visible binding that checks the state of two observables). I'm not sure I'd take it that far though.
I guess everyone started to learn KnockoutJS have the same concerns.
IMHO, there must be some way that connects models(JS object) with views(HTML markup). Then we should have something that says:"When that button is clicked call this function with that arguments." or "Hide this element while you that JS array is empty" and so on. So how we can put/say/state that connection in a readable, reusable and clean way.
If you used another JS file to handle that connection, then you 'll have large lines of code just to put your connection logic and you need to know how to select the DOM element you are targeting. You 'll end up with massive code(probably lot of jQuery) just to make your HTML dynamic and alive(i bet most developers got into that many times). I haven't use other libraries or frameworks but i think they just make your massive code more organized.
On the other hand by KnockoutJS use Declarative Bindings, this is the link between models and views. It's more readable, easy to plug it in/out and it allow you to just focus on writing a good JS model object.
I guess to truly check separation think what if you sometime needed to change your model, how much changes you need to do to your view? and vice versa?
Adding to the rest of the answers, some tips:
Make sure there's no business logic in your bindings. Any logic (which should be minimal) should be "view logic": decisions that only affect how your view looks, not how it works. Deciding how many items to display per screen is view logic; deciding whether the user can add another item is business logic. It's perfectly OK to put view logic in your viewmodel rather than your view, and it's desirable if it involves lengthy expressions.
Keep "magic numbers" out of any view logic in your bindings. If it's a parameter that could be changed (e.g. number of weeks of results to show) as opposed to a true constant (e.g. number of days in a week), make it a property of your viewmodel and reference it in any expressions in your views.
I am developing a jsp web application, no framework (sadly...), that will be used for differents customers. Each customer have their own set of colors and company logos.
The css layout will not change, only some divs colors, font colors, button colors, so and so.
I trying solve this problem implementing a filter that receive a general request and then redirect the request to correct folder depending on the customer.
By example, the index.jsp request css/index.css, then filter verify the customer and then change the request to 'customer1_css/index.css'. This works fine, by now...
But, when I need to add or modify some css element, I have to do it in each css file of each customer.
I want to simplify this process for us and the web designer. So, I though in using FreeMarker, parametrizing all dynamics elements, and make a db table where I put each parameter value. But is very cumbersome.
I know that I am not the first developer with this problem.
Please, give me some ideas for solve this.
Thanks in advance!!!
I would stay away from generating the CSS dynamically. If you change the layout of the page so that it requires a change to the CSS, there's nothing you can do but make all the changes in the CSS files. How would you stay away from that by generating the CSS dynamically? You'd still be restricted to only changing the properties (class names, ids) you've decided upfront.
A better solution involves writing semantic HTML, that is, improve your HTML so changing its layout doesn't require as many changes to the CSS See How to avoid locking my HTML structure when using jQuery to create rich client experiences?
jQuery provides a browser neutral library for accessing and manipulating the DOM. This is good.
However I'm looking for a counterpart for the visual side of things - I need to build pixel measured interfaces, without wasting so much time testing and correcting cross browser issues (buttons having crazy margins in IE, or using the wrong box model in FireFox. The many IE and otherwise instances where putting several elements on one line screws up alignment or floats).
Basically I need to be able to plan out interfaces on paper with exact pixel dimensions (for example all textboxes should be exactly 22px high), and then easily translate those designs into Html. In a WinForms world, this is usually straight forward. With html it's anything but, and I find it's worst when it comes to input controls.
What libraries or collections could I use to make this sort of design a reality (outside of just converting everything into Silverlight where that degree of control exists). Javascript is required to be on (AJAX to begin with), so libraries can depend on it entirely for controls.
Some of the components I'm looking for in a uniform style with precise pixel control
Buttons
Textboxes
Dropdowns
ComboBoxes (Dropdown whose text can be edited directly)
Toggle Buttons
Alternatives include dojo (pure-JS) and GWT (JS generated from Java). Some may argue that ditching JS altogether and going with the Flash-backed Flex is a good option.
Also check out ExtJS. I've used this one extensively and I can vouch for how good it is. Originally it was a fork of the Yahoo UI Library (YUI), which Soviut mentioned. Personally, I think it's much better and more usable than the original YUI.
JQuery UI is a good extension of JQuery that allows for rich controls like dialogs, drag and droppables, etc.
The Yahoo Interface Library is another toolset you can use that may be closer to what you were originally asking for.