Established in 2018 by a group of young professionals, TechFogg is a well-managed company providing IT services to the esteemed clients. We provide our customers an environment where their business processes and technology initiatives can converge. We understand the business processes with great dedication and patience and provide our clients, IT solutions with the best of their satisfaction.

Latest posts

raster and vector graphics
Posted by techfogg

Raster and Vector Graphics. Difference between the two.

Technology 0

We can divide digital graphics into two categories: raster and vector graphics. If you are in confusion about these two graphics, then you must read this article because today we are going to talk about these two.

Today, in this article we are going to focus on some of the points given below:
– What is Raster (bitmap) Image?
– What is vector image?
– What is the difference between Raster and Vector Graphics?
– When to use Raster and Vector?
Please read this article to get complete information about raster and vector graphics.

What is Raster Image?

Raster image or bitmap image are made up of several smaller squares or dots that we call pixels. If you zoom this image then you will be able to see these small pixels.

Photos taken with your mobile phone camera are examples of raster image too.

This type of images is based on pixel and the resolution. Their resolution is determined by DPI (Dots Per Inch) or PPI (Points Per Inch).

Due to being pixel-based, when their size is enlarged, after a limit they become blurred or pixelated and their quality gets worse.

In the Raster image, you can easily create a smooth painting by mixing several different colors.

To create or edit Raster image, you need software like Photoshop, GIMP.

Images saved in formats like JPEG, PNG, GIF are also raster images.

 

What is Vector Graphics?

A vector image is not based on pixels. Their resolutions are independent. Vector graphics are based on mathematical calculations.

The size of this type of image can be done as little or as much as we want, and in doing so, the image quality will not be affected.

That means without losing quality, we can print such images in any size and this is the biggest advantage of vector graphics.

Vector graphics are perfect for drawing, you can do this type of drawings from Adobe Illustrator or Corel Draw.

Difference between Raster and Vector Graphics

raster and vector graphics

The difference amongst vector and raster illustrations is that raster designs are made up of pixels, while vector designs are made up of paths. Examples of raster graphics are a gif or jpeg, There are a variety of pixels of different hues, which together shape a picture. Similarly examples of vector realistic are an .eps record or Adobe Illustrator? the document is made up of paths, or lines, that are either straight or bent.

The information files for a vector image contains the focuses where the path begins and ends, how much the paths bend, and the colors that either outskirt or fill the paths. Since vector designs are not made of pixels, the pictures can be scaled to be huge without losing quality. Raster illustrations, then again, progress toward becoming “blocky,” since every pixel increments in the estimate as the picture is made bigger. This is the reason logos and different plans are commonly made in vector design – the quality will appear to be identical on a business card as it will on a board.

When to use Raster and Vector?

Now perhaps you might have been asking this question in your mind what is better than these two graphics formats and which of these formats should we use?

The truth is that both the formats have their own advantages and disadvantages and they are used for different purposes.

Which format of raster and vector should you use, it depends on what type of image/graphic design you are designing.

When to use the Raster Image?

Use raster graphics for the digital image, photography.
– Most of the images available on the Internet are in JPEG, GIF and PNG format, which are the raster image.
– It is used in web design. The images for the website are better than the raster format for images design.
– If you are adding the gradient, blur, texture, shadow effects in the picture then use raster.

When to use vector image?

Use vector when you have a large size of a design such as banner, poster etc.
– The vector image is used in logo design so that when needed, the logo can be scaled to any size.
– You can use this format to create the illustrations.
– The vector is also used in CAD, engineering design, 3D modeling etc.

Also, read an article on Image Formats at https://www.techfogg.com/technology/image-formats

IMG FORMATS
Posted by techfogg

Which image format should we use? Difference between JPEG, PNG, GIF,TIFF?

Technology 0

Image File Formats

An image has many formats, most of which are JPEG, PNG, and GIF used in web pages. All image formats have their own advantages and disadvantages, besides some formats are also made for any particular work.  You must be aware of which work format you should use and what format to avoid so that you can get optimum result.

So let us know about some of the image formats of computer graphics, what are the flaws in them and what place they should be used.

 

image file formats

JPEG Format

JPEG’s full form is the Joint Photographic Expert Group, it is the most used image format. It uses lossy compression i.e. when you save an image in jpeg format, it eliminates some image information from which the size of the image is reduced.

  • JPEG consists of 24 bit color per pixel and supports 16 million colors.
  • Compressing the image reduces the file size.
  • For photography, most of the same format is used and it is used in almost all digital cameras.

When to use JPEG?

Digital Photographs – For mobile, computer devices, to upload online.
For printing – This format is useful if you want to print the photo in high resolution.

When to use JPEG?

If you want a transparent image, JPEG is not correct for this. You can not create a transparent image in this format.
Do not use JPEG for the image which contains text, sharp edge shapes because text, color, and edges can be blur due to the compression.
Animated file should be used if you can not use JPEG.

GIF Format

GIF’s full form is Graphics Interchange Format. It is used for web image and mostly animated graphics. It has only 256 colors. File size is greatly reduced due to being less color.

  • GIF uses 8-bit format and supports only 256 colors.
  • GIF is lossless so it can be easily customized.

When to use GIF Image?

  • For simple images that do not have much color, GIF can be used.
  • Very useful for web animation, buttons, social media meme etc.
  • You can use it for transparent background.

When do not use GIF?

  • This is not suitable for high-quality photographs.
  • Do not use GIF to make Gradient image design, because of its color limitation, the image will blur.
  • Can not use it in print design.

PNG Format

  • The complete form of PNG is Portable Network Graphics. You can also understand it as the improved version of GIF. It is designed by keeping the web in mind. It is similar to the GIF but the PNG image can have 16 million colors.
  • PNG was created to replace the GIF.
  • The size of the PNG file is much lower than that of GIF.
  • PNG can use 24-bit colors.
  • You can also create a fully transparent or alpha transparent image.

When should PNG be used?

  • PNG is very good for high-quality web graphics design.
  • PNG format is suitable for smooth transparent design and for drop shadow effect like alpha transparent.
  • For small size image.

When should not PNG be used?

  • It should not be used for photographs.
  • Can not make the animated graphic from PNG like GIF.
  • If you are designing for printing, it is better that you should use JPEG because the image of PNG format is only suitable for the screen.

TIFF Format

TIFF’s full form is Tagged Image File Format. In this format, image quality is very high, so it is used in desktop publishing and professional photography.

  • TIFF image can be both lossy or lossless.
  • It has more use for work like scanning and printing.
  • Like JPEG, GIF can also be compressed in the image.

When will TIFF format be used?

  • Use TIFF If you are going to print high-quality graphics, if the image of large size is to be printed then it is the best format for that.
  • If a scanned document does not want to reduce the quality of photos, then scan in TIFF format.

When should TIFF format not be used?

  • Web graphics should not be used for it, it is better to print.
  • Do not use it for a high-quality online image, this format’s file size is very large, that takes more space and time to load.

Hope you enjoy this information on image formats. If you have any questions or want to give suggestions, please tell us by commenting below.

Also, read an article on Responsive Web Design at https://www.techfogg.com/web-development/responsive-web-design

responsive web design
Posted by techfogg

What is Responsive Web Design and Why Do We Need It?

Web Development 0

Responsive Web Design

Until a few years ago, the fixed-width design was made by keeping in mind the screen size of the desktop or laptop. This is because of the very small screen size devices, people used to visit the website. But since the development of mobile devices and smartphones has increased, the requirement of mobile version websites has increased. Now people are choosing to visit the website from their smartphone. So you should make your site mobile friendly means responsive web design as soon as possible.

How did the launch of Responsive Web Design?

Since last few years, the number of smartphones and mobile devices has increased. Due to this, a problem arose that web designers could not accurately show a fixed-width website on different size screens.

In order to tackle this problem, web designers took a path that created separate sites for desktop and mobile devices. But this path was not so easy, creating different versions for every screen size and resolutions was an impossible task.

If different versions of a website were created, its maintenance cost would also increase. Due to this, different jobs for SEO and SEO ranking would have to be done separately.

Finally, in 2010, to solve all these problems, a web designer Ethan Marcotte found a new way of designing a website that he named Responsive Web Design (RWD).

 

responsive web design

What is Responsive Web Design?

Responsive web design is a process in which the website is designed in such a way that it adjusts its layout according to the screen size and orientation. It is compatible with the desktop, laptop, tablet to mobile devices with small screens.

Why should your website be responsive?

According to the survey done by G20 countries, the highest (about 79%) people in India use mobile devices to access the internet.

With this figure, you can understand that if you do not use the mobile-friendly website in today’s time, you will not be able to access your website by up to 79% of the people.
Benefits of Responsive Website:

  • Mobile traffic will increase: If your website is responsive, then it will be liked by mobile visitors and this will increase the traffic of the website.
  • Website loading speed will increase: If you have optimized your website for mobile and tablets, it will not take much time for web pages to open and the site will improve.
  • It’s easy to manage: If you create separate sites for desktop and mobile, then obviously promoting two separate sites will not be easy to promote. But if your website is responsive then you will get a job from a single site.
  • Google also recommends: RWD likes Google because the URL of the responsive website is same for all the devices so that Google has the ability to understand and crawl it to index it.

3 Major Elements of Responsive Web Design

According to Ethan Marcotte, RWD is composed of three main components fluid grid, flexible images, and media queries.

If you are learning web designing then you should know about these 3 main parts of the RWD.

So let us know about the 3 major elements of the RWD:

Fluid Grid

The size of most elements of the website is set in a pixel which is fixed, but instead of setting the height and width of the website layout in the pixel, we use percentage as per the fluid grid.

Flexible Images

Creating fluid layouts just does not work as long as all the components of the page are not flexible, they will not be able to render properly on the browser.

We also need to make images flexible so that they can be adjusted on almost all screen sizes.

In order to create a flexible image, we have to define its size in CSS by percentage, for which max-width, max-height property must be used.

img{max–width:100%;}

Media Queries

CSS Media queries are very great features through which we can display different layout in different ways like screen, print, handheld etc. on different media types.

You can customize website layout according to individual screen resolution and orientation using media queries.

To explain what media queries are and how to use it, we have written a separate article for this, which you can visit here to read.

How to know if the website is responsive or not?

There is a simple way to know that whether a website is responsive or not. Its easiest way is to open the browser bar on that site and then lower the size of the browser window. See if the components of the website are shifted according to the window size. If you get adjusted then understand that the site is responsive.

For this purpose, you can also use developer tools available in the browser or an online tool such as isresponsive.com or feedbackinator.com.

Also, read an article on Javascript at https://www.techfogg.com/web-development/javascript

JAVASCRIPT
Posted by techfogg

What is Javascript? How is it different from HTML and CSS?

Web Development 0

If you are interested in web designing then you must have heard the name of the javascript and you may have used it too.

If you want to be a web designer, then you must learn Javascript with HTML, CSS, because Javascript is very useful for any website.

Today, in this article, you will know what the javascript is, what benefits can it be by learning and what can be done with it.

Javascript

What is JavaScript?

  • It is a powerful scripting language that can be added with HTML to make the webpage more interactive.
  • It was created by Brendan Eich in Netscape in 1995 when it was named LiveScript, which was later changed to JavaScript.
  • Many programmers consider Javascript and Java related to each other. But in reality, these two are completely different from each other and there is no connection between them. Where Java is a very complex programming language, It is only a light-weighted scripting language.
  • It is a client-side scripting, which means it runs on the user’s browser.
  • Whenever the user sends a request for a webpage, then the server also sends the JavaScript code with the HTML of the page to the browser.  Now it is the responsibility of the browser to execute the code of that javascript when needed.
  • You can see the javascript code on your browser because it runs on the browser.
  • On the contrary, you might have heard of server-side programming like PHP, ASP.Net, JSP etc. All of these languages are created on the program browser but not run on the server. Its output is converted to HTML and appears in the browser and you can not see its code on the browser.

What are the differences between HTML, CSS, and Javascript?

Many people live in quite a confusion before learning the javascript and there are certain questions in their mind such as:
What is the difference between HTML, CSS, and Javascript?
Can we create a website without Javascript?
Do we have to learn these three?
All these questions can be answered only when we know what is the work of these three languages. So let’s understand the use of these three:

  • HTML: This is used for building the structure of the web page. You can learn HTML in just 20 minutes.
  • CSS: Cascading Style Sheets is designed with a part of the website presentation, color is filled in it.
  • Javascript: Page is created interactive, some logic such as user click on a button, which function will execute and which task will be performed etc.

All this means that you can create a website from HTML and CSS. But if you want to add some interactive features to it, then you have to use Javascript in this way.

What are the uses of JavaScript?

It is used to create an interactive website. Most of its usage would be to perform a task like this:

  • Form Validation: While taking input on a form by the user, verify that the data entered is in the correct format or not like email, mobile no. etc.
  • Popup Windows: such as alert dialog box, confirm dialog box etc. can also be created from it.
  • Drop Down Menu: The dynamic drop-down menu can be created for the website.
  • Browser Detection: User can find out which browser is in use.
  • Cookies: Some information can be stored in the user’s browser and when the user visits again, this information can be accessed.

What tools are needed for JavaScript?

For coding Javascript and running, it does not require any special tools, only two things should be in your system:

  1. Code Editor: You can use the notepad like normal text editor to write code. Anyone can use any code editor such as Notepad, Dreamweaver, Sublime, Brackets etc.
  2. Browser: You can use an advanced web browser such as Chrome, Firefox, Safari etc.

Some of its benefits are: 

  • Fast Execution: This is fast because it runs on the client side and does not require much server interaction.
  • Cross Platform: It can work easily on any operating system and any modern browser like Chrome, Firefox, Internet Explorer etc.
  • Easy to Learn: This language is very simple and it is very easy to learn.

Some of its disadvantages are:

  • Security Issues: As you know it is executable on the client’s browser, it is not much secure, although keeping some security in view. Some restrictions have been set in JavaScript, such as it does not read or write the files of the user’s system. Despite these restrictions, some malicious codes may still run.
  • Javascript rendering varies: It can work differently on different browser s i.e. its outputs are not consistent on platforms yet.

Also, read an article on Web Designing at https://www.techfogg.com/web-development/web-designing

Posted by techfogg

What is Web Designing?

Web Development 0

What is Web Designing?
When we create, update, or plan any website, we call it Web Designing.

As the builder of a building has to make the building, in the same way, Web Designer’s work is to be created.

Web Designing has two parts: Front End Web Design and Back End Web Developer

Front End Web Design:
As the name suggests, Front End Web Design delivers in front, i.e. from the part that is visible to the user.

When we open any website, whatever happens in front of us is the work of Front End designer. Our aim from Front End Web Designing is not just to beautify the website, through web designing, we have to keep in mind what to add to what makes visitor coming to our website is not a problem.

If we compare it with a car then the work of Front End designer is to beautify the car, it does not make sense with the engine’s, the battery engine inside the car is the job of all the Back End Developer.

Back End Web Developer:
Web Developer creates the brains of the website, such that if a form is filled out on the website then who should reach it, if someone enters the ID/password, then what kind of profile should open such things.

The work of the Back End Developer is not visible to the visitor, but without the development, a great website cannot be created.

How to learn to become a Web Designer?
To become a good Web Designer Frontend Web Design and Back End Web Development both should be known.

  • What to Learn for Front End Design?
  • First we start with Front End Designing.

 

Photoshop Basics:
Just like we build a map from the architecture to build the house, in the same way before designing the website, we have an idea that the website will look like. Many people design the entire website on a lot of photoshop, but those who are experts do make Photoshop just to create a blueprint or prototype.

 

HTML:
HTML means Hyper Text Markup Language HTML is a markup language used to create a website structure. HTML is a language that is written in the form of code. Learning HTML is very easy. Once you have learned HTML, you can create a simple Static Website.

CSS:
CSS means Cascading Style Sheet. HTML is used to give structure to our website, and on the other hand, CSS is used to design a structure made from our HTML, it is used to give the style to our design.

 

JavaScript:
Here we start programming completely. HTML / CSS creates our website, but JS is used to make the design interactive. With Interactive I mean, if you click on the Friend request icon on Facebook, a drop down opens below. JavaScript detects what the user has done on your website and according to that action, it changes the design. When the images are moving around on a website then JavaScript rotates them. HTML and CSS can make a really good Static Website. If you just learned Photoshop, HTML and CSS, then you can find a job in an IT company and create a good website.

 

What to Learn for Front End Design?
With HTML / CSS / JS you can create a static website, you can not create features like some database entry, Login, Register in the static website.

PHP
However, many languages can be run on the backend, but initially learning PHP is easy. PHP is very powerful and can cause every feature to perform. Facebook was built on PHP only.

Learning PHP is also beneficial because it allows us to create a website with less money. With this we can also learn to design website on WordPress, the world’s largest website and blogs are made on WordPress, so learning PHP will make it easier for you to create WordPress.

DataBase:
When we make an ID on Facebook or watch a video on YouTube So this is where all the data is stored, we call Data Base. The most commonly used data is MySQL, after learning it, you can also store the logos of data on your website.

Languages like PHP are being used to store anything in a database like MySQL.

 

 

Where to start?
Many people ask these questions, I tell you step by step today what to do.

– Start learning HTML.
-Simultaneously learn basic things like photoshop, photoshop does not need to go much advanced. Beshear should just come.
-When your hand starts running in HTML, then you have started learning CSS.
-Create something by using HTML / CSS everyday
-After learning HTML / CSS thoroughly start learning JavaScript
-Know basic javascript
-Then start PHP, and look at making some projects.

-Learn to create websites on WordPress

Now make a simple project by using PHP and DataBase as well. After doing so much, you will become a good web designer for the level. After so much skill, you can earn money in dollars by freelance word on the internet. Or you can apply for a job in a good company.
Web Designing is a skill that will be very demanding in the future. Hard work will be done to go to the Expert level. But for hard work, only poverty has been written in life.

Also, read an article on Website Development at https://www.techfogg.com/web-development/website-development

Posted by techfogg

Website Development

Web Development 0

Website Development

Website development is a term which includes all the work for developing a website for the Internet or an intranet. It differs from developing the simplest static single page of plain text to the most complex feature-rich web-based internet applications like content management systems (CMS), electronic businesses, and social network services. Tasks commonly refer to web development may include web design, web engineering, web content development, client-side/ server-side scripting, web server and network security configuration, and development of e-commerce websites. Website development usually refers to building web sites: writing markup tags and coding.

The web development hierarchy is as follows:

  • Client-side coding
  • Server-side coding
  • Database technology

website development

There are two kinds of specialization in web developers: 

  • Front-end developers: They deal with the layout and visuals of a website. Skills possessed by them are HTML, CSS, Javascript, jQuery, knowledge of frameworks, testing and debugging.
  • Back-end developers: They deal with the functionality of a website. A back-end developer is a programmer who creates the logical back-end on website, software or information system. The features and components that are indirectly accessed by a user through a front-end application or system are created by the developers. Typically, a back-end developer has expert programming skills in C++, C#, Java and other high-level programming languages.
  • Full-stack developers: There’s often not a black-and-white distinction between front-end and back-end development. Front-end developers have to learn things those additional skills of back end developers, and vice versa, especially in the current economy where marketing is thinly resourced. They work on both the server side and client side professionally.

 

website development

Since the commercialization of the web, it has been a growing industry. The growth of this industry is being driven by businesses who wish to use their website to sell products and services to customers.

Content Management System

Recently most of the Web development plateforms has come to mean the creation of Content Management Systems  (CMS). These CMS can be made from scratch, proprietary or open source. In broad terms, the CMS acts as a middleware between the database and the user through the browser. Content management system is allowed to non-technical user handles the technical website. Content management systems typically provide the following features:

  • SEO-friendly URLs
  • Integrated and online help
  • User and group functionality
  • Templating support for changing designs
  • Install and upgrade wizards
  • Modularity and extensibility
  • Integrated audit logs
  • Compliance with various accessibility frameworks and standards

A web content management system (WCM or WCMS) is a CMS designed to support the management of the content of Web pages. Most popular CMSs are also WCMSs. Web content includes embedded graphics and text , video, Photos , audio, maps, and program code that displays content.

Such a content management system (CMS) typically has two major components:

  • A content management application (CMA) is the front-end user interface that allows a user, even with limited expertise, to add, modify, and remove content from a website without the intervention of a webmaster.
  • A content delivery application (CDA) compiles that information and updates the website.

An ever-growing set of tools and technologies have helped developers to build more dynamic and interactive websites. This has allowed for many opportunities to media distribution  and decentralize information. Examples can be seen with the rise of cloud-based services such as Google Docs, Adobe Creative Cloud, and Dropbox. These web services allow users to interact with applications from any location at any point of time, instead of being tied to a specific workstation for their application environment.

eCommerce

Examples of drastic transformation in commerce and communication led by web development include e-commerce. E-Commerce websites are active websites that provide online transactions of goods and services through means of the transfer of funds over the Internet and information.

There are different e-Commerce websites for every field. The most common type is retail selling, but there are many others too, like auction websites, business-to-business services, music portals, consultancy websites, finance management websites, and the like.

Online auction sites such as eBay have changed the way consumers can find and purchase goods and services. Online retailers such as  Amazon.com, Flipkart.com and many others have transformed the shopping and bargain-hunting experience for many consumers. Another example of transformative communication led by website development is the blogging. Web applications such as WordPress have created blog-environments for individual websites. The increased usage of open-source content management system extended web development’s impact on online interaction and communication.

Social Networking Websites

Web development has also impacted personal networking and marketing.  Social networking sites are varied. They can incorporate a range of new communication and information tools, operating on desktops and on laptops, on mobile devices such as tablet computers and smartphones. They may feature digital photo/video/sharing and “weblogging” diary entries online (blogging).

Online community services are considered social-network services, though in a broader sense, a social-network service usually provides an individual-centered service whereas online community services are group-centered. Defined as “websites that facilitate the building of a network of contacts in order to exchange various types of content online,” social networking sites provide a space for interaction to continue beyond in-person interactions. Websites such as Facebook and Twitter provide users with a platform to communicate and organizations with a more personal and interactive way to engage with the public.

For any query contact us at https://www.techfogg.com/contact-information

Posts pagination