I need help please with getting started with MVC 4. I was asked to create a responsive index HTML page.
The output must be responsive and compatible for browser and mobile devices including the graphics.
The website is only graphics with a description of the image - and stores the path of the image and description in SQL Server. So, I need to use CSS to layout the images and connect to SQL to get the description and location of the images.
I need to also use CSS and I see that the project's SCRIPTS folder contains JQuery and Knockout.
I have never used MVC but figured that if they think I can do it then I will take it as a chance to finally learn MVC.
How can I start?
Thanks
To get you started I'll try to make the story short:
Server side
Asp.net mvc (generated dynamic html based on data from DB or other data sources)
Learn about Asp.net templates and Razor view engine.
Currently the visual studio template for Asp.net MVC project comes with all components required to make a website responsive like bootstrap.js/css, jquery.js etc.
Client side
Finally all has to be transformed into the HTML so you must be familiar with HTML 5. As almost all browser supports it.
You must know CSS.
You must learn using Bootstrap library and it's grid system.
Specific to you requirement focus on Images and how bootstrap apply css based on device size.
Target for smallest and largest device to manage your content sizing and adjustments.
Good luck!!
Related
I'm using Xamarin forms and I'm wondering, does the UWP Visual Asset Generator work for any image you want to add to your apps XAML? The documentation found HERE is really confusing. It appears as though the asset generator is only for assets that the app needs by default. If you try to use it to add a general image to your app it tries to overwrite the icons your app needs for windows tiles and the application icon, etc.
I have seen others on SO say that all you need to do is manually add the image to your Assets/ folder and while I can easily do that, you don't get all the different sizes and scale factor images that the Visual Asset Generator creates.
I did try using the Visual Asset Generator to create a new image anyway using the "App Icon" option but I made sure to use a different name so it didn't overwrite my existing app icon. Well, even though it didn't overwrite my original app icon my app is now using the image I'm trying to use within my app as the app icon as well.
Anyway, I called this new image I added from my XAML but instead of xaml pulling the best looking image based on the size of my image property which was 300x300 it instead used one of the really small images and it was really blurry so I'm not sure this is worth using anyway but some clarification would help in case I'm missing something.
My question is regarding using it for other image within your app like for instance, lets say I want an image embedded in the 2nd page of my app
These images are not generated for use during app development.
Images generated by UWP Visual Assets Generator are used as the logos or icons of an app in different devices or scenes for different sizes needs. These images are generated for the process of publishing instead of developing the app.Therefore,making good use of these images is of great help for users to identify your app.
Explain with the generated pictures Square44x44Logo.png and Square150x150Logo.png:
I have an asp.net website, it contains database calls etc
Whats the best way of taking an existing asp.net website and making it look good in mobile and tablet devices?
I have done some research but there seems to be so many options eg lessframework.com, jquerymobile etc
I havent used mvc before but a few people say to use mvc + jquerymobile
any help would be muchly appreciated
There is no magic bullet that will instantly convert your website to mobile. In fact without knowing the specifics of your website it would be hard to recommend a good fit for your situation since the tools you mention like MVC, JQMobile, etc. would be used in one case or another. With the question as you have posed it you will get personal opinion and there are millions of us with opinions... here's mine:
I would recommend not building a mobile specific website like mobile.website.com but rather look into responsive design where your website and the underlying data structs remain the same but your view changes depending on screen real-estate. Bootstrap or HTML5 Boilerplate or any number of design frameworks will help you get started. You just need to figure out a design that fits your websites functionality.
I use MVC + HTML5 Boilerplate (I love Razor) for most of my new projects but sometimes even it has too much overhead so I just start from scratch (multiple PSD's, convert to HTML in Dreamweaver, apply logic with MVC & client side scripting) but that is something you will have to decide on a project by project basis.
I've been looking hard to find a web page editor that can let me visually edit an already-designed asp.net web form page. for the whole period, I've made my page designs with Dreamweaver (now I'm using Dreamweaver CS4) and transfered my designs to Visual Studio 2010 to make asp.net pages from that template. Table editing feature for web forms in Visual Studio is really annoying and by trying to change a column width, the table structure is corrupted and VS decides to change everything on that table (compare it with Dreamweaver which only changes those two columns which their border is changed instead of the whole columns of that table).
Unfortunately Dreamweaver does not recognize the asp.net tags syntax and because of that it can not properly render them in design mode. I want to know if you know any tool (preferably non-Microsoft tool) that can let me open an asp.net web form in it and edit the page elements visually without side effects that Visual Studio causes to my page design. (I use HTML tables for arranging my page elements.)
By the way I looked at this link:
http://en.wikipedia.org/wiki/List_of_HTML_editors
but after opening all the visual editors web pages, I did not find any tool that supports ASP.net tags.
Is there a particular reason that though you are working on a Microsoft platform that you don't want to use a Microsoft editor?
MS provides two free tools that may help you:
Visual Studio Express
Web Matrix
Also, I highly recommend using CSS classes to set widths on ASP.NET generated tables/columns. (Rather than using the styling attributes for those ASP.NET controls.)
Hope this helps.
you can use AjaxControlToolkit.HTMLEditor.Editor.
Put the DLL in your project and than put in the page, than you can edit.
Create some logic to view and edit with some permission, and your page will have content editable.
Past, now irrelevant back story: I was trying to make some changes to BlueBand and get 'up and running pretty quickly' but after looking at it further this is no longer an option due to tables that a previous developer introduced into the layout. I'll have to live with this and make what tweaks I can.
So, looking towards future greenfields projects...
Are there any recommendations for CSS frameworks that work nicely with SharePoint publishing sites? (Examples are BluePrint, YUI.) They should not interfere with standard out-of-the-box controls such as the Site Actions menu, rich text editor, and publishing toolbar.
Real world experiences welcomed, please!
What would you like to use a CSS framework for? As far as I can tell you could use one for making a cross-browser reset but everything else just depends on your layout. If you're planning to throw out the standard SharePoint layout it means that you need to start from scratch. The good news is that it's not much different than creating a layout for any other website. There are some things you need (http://msdn.microsoft.com/en-us/library/aa660698.aspx) while working with SharePoint but as for CSS it's all up to you.
Heather Solomon has a great blog/guide on wiring up SharePoint CSS classes - take a look:
http://www.heathersolomon.com/content/sp07cssreference.htm
Cheers,
Adam
You will run into a lot of trouble trying to hack the blue band theme into a table less layout.
You may get some mileage from the free Accesibility Kit for Sharepoint.
It comes with layout pages, CSS and even control adapters for those who care about the HTML of thier site.
Still, getting rid of the tables produced by SharePoint is not really compatible with "up and running pretty quickly"
You should start with the minimal masterpage. That will be the masterpage that's connected to the publishing layouts. You can then add in all the html/css you desire to your masterpage and layouts to make them look like anything you want.
If the users who are browsing those same publishing pages also need access to your list forms (new,edit,display) you will have to edit those files and attach them to your masterpage (either through SP Designer or a Feature to do it automatically). Or, customize the application masterpage to be nearly the same as your publishing masterpage and deploy them both as a feature with an HTTP Handler that changes the masterpage for the application.master at runtime.
Also an FYI, there are many issues once you start customizing list form pages for a site accessible to anon users, so do your research first on that one if needed.
We have used 960.gs with some success. Just include it in your master page, and wrap the main content area with a - or use container_12/container_24. Then in your individual page layouts, you can leverage all the columns/push/pull/alpha/omega goodies that make 960 so great. This works in 2007 and 2010, just takes a bit more work in 2007.
You can use any framework you desire when working with Sharepoint, however, the primary concern is how much control you have over web parts. OOB web parts use table based layout. If you have full control over how the web parts use the markup they product then you are one step closer to using a framework with little headache.
To alleviate some of the table based layout used in web parts you can look at accessibility toolkits to convert the web parts appropriately.
Has anyone created a 'realtime' csssprite generator for .NET ?
I want one or more directories of images that get loaded at runtime and the css is automatically generated.
Yes, there is. You'll find it at
http://www.codeproject.com/KB/aspnet/cssspritegenerator.aspx
Unlike Microsoft's attempt at sprites, with this package you don't have to change the way your images are stored and how they are shown. You simply add the .dll and configure the package in your web.config with a few lines.
This package also lets you resize images on the fly, compress them and other good things.
Is this what you are looking for?
It's the closest I found to a baked solution.
Ok finally something official...
Not clear yet if it'll make it into the core ASP.NET framework but here's a Microsoft codeplex project for csssprites :
http://aspnet.codeplex.com/releases/view/50869
if you like it - use it - or just like the idea then add a comment. I think this would be a great thing to have in the ASP.NET framework. Have not personally used it (I had to invent the wheel myself) but its got good reviews.
It includes the following components:
API for automatically generating sprites and inline images
Controls and helpers which provide a convenient way of calling into the API
Features Added in Second Release:
A CSS linking control for Web Forms (selects the proper CSS file for the user's browser, but does not display an image)
Using custom folder paths other than App_Sprites
Changing the tiling direction of sprite images
Merging the generated CSS with a user's own CSS
Features under consideration for future releases:
Automatically selecting the most efficient sprite background colour
Automatically minifying the rendered CSS
Compiling against .NET 3.5