Skip to main content

Category Archives: HTML5

AEM – a CMS

Posted on October 1, 2024 - 6:02 am by

A Content Management System is a Simplified Approach to Website Creation. CMS is a software application that allows you to create, edit, manage, and publish content on a website without requiring extensive technical knowledge. Think of it as a digital toolbox that makes website creation and maintenance accessible to a wider range of users.

How CMS Works:
* Content Creation: You create content (text, images, videos) using the CMS interface.
* Template Selection: You choose a template or design for your website.
* Content Placement: You place your content into the designated areas of the template.
* Publishing: You publish your website to make it visible to the world.

Key Benefits of Using a CMS:
* Accessibility: No coding knowledge is needed.
* Efficiency: Quick and easy content updates.
* Scalability: Handles growing websites and traffic.
* SEO Friendliness: Built-in features for better search engine ranking.
* Cost-Effectiveness: Often free or have affordable pricing.

Popular CMS Tools
* AEM (given below)
* WordPress: The most popular CMS, offering a vast ecosystem of themes, plugins, and a user-friendly interface.
* Joomla: A versatile CMS with a focus on community and extensibility.
* Drupal: A powerful and flexible CMS suitable for large-scale websites and complex projects.
* Shopify: A specialized CMS for e-commerce websites, offering features like payment processing and inventory management.
* Squarespace: A user-friendly CMS with a focus on design and aesthetics.
* Wix: Another visually-oriented CMS with drag-and-drop functionality.
* Magento: A popular open-source CMS for enterprise-level e-commerce.
* Ghost: A blogging platform with a focus on simplicity and speed.
* Typo3: A robust CMS with a strong focus on multilingual support and customization.
* Concrete5: A CMS known for its ease of use and flexibility.

The best CMS for you depends on your specific needs, budget, and technical expertise. Consider factors like the complexity of your website, your desired features, and the level of support you require when choosing a CMS.

Understanding AEM
Adobe Experience Manager (AEM) is a powerful content management system (CMS) designed to create and manage websites and digital experiences. It offers a flexible and scalable platform that caters to businesses of all sizes, from small startups to large enterprises.

Key Usages of AEM
* Website Creation and Management: AEM provides a user-friendly interface for creating and managing websites, including content authoring, design, and publishing.
* Digital Asset Management: It efficiently stores, organizes, and manages digital assets such as images, videos, and documents, ensuring seamless integration into websites.
* Personalized Experiences: AEM enables businesses to deliver personalized content and experiences to their audience based on their preferences, behavior, and demographics.
* Mobile Optimization: It ensures that websites are optimized for mobile devices, providing a seamless user experience across different platforms.
* E-commerce: AEM can create and manage online stores, integrating with various payment gateways and shopping cart functionalities.

Importance of AEM
* Scalability: AEM can handle high traffic volumes and complex websites, making it suitable for businesses with growing needs.
* Flexibility: It offers a flexible architecture that can be customized to meet specific business requirements.
* Integration: AEM integrates seamlessly with other Adobe products and third-party systems, providing a unified digital experience.
* Performance: It is designed for optimal performance, ensuring fast load times and a smooth user experience.
* Security: AEM includes robust security features to protect websites and data from unauthorized access.

Benefits of Using AEM
* Improved Efficiency: AEM streamlines content creation and management processes, saving time and effort.
* Enhanced User Experience: It enables businesses to deliver personalized and engaging digital experiences.
* Increased ROI: AEM can help businesses improve online presence and drive higher conversion rates.
* Future-Proof: It is designed to adapt to evolving digital trends and technologies.
* Strong Community Support: AEM has a large and active community of users and developers who provide support and resources.

Simplicity of AEM
* Intuitive Interface: AEM offers a user-friendly interface that is easy to learn and navigate.
* WYSIWYG Editing: Content authors can edit content directly in the browser using a What You See Is What You Get (WYSIWYG) editor.
* Templates and Components: AEM provides pre-built templates and components that can be customized to create different website layouts and designs.
* Workflow Automation: AEM allows for automating content approval and publishing processes, reducing manual tasks.
* Extensive Documentation and Resources: AEM comes with comprehensive documentation and online resources to help users get started and troubleshoot issues.

In conclusion, AEM is a powerful and versatile CMS that offers numerous benefits for businesses looking to create and manage high-quality websites. Its scalability, flexibility, and ease of use make it a popular choice for organizations of all sizes.

HTML5 and CSS3 References

Posted on March 7, 2017 - 11:52 am by

The following section contains references to latest HTML5, CSS3 and more…

HTML5 / XHTML Tags

The following section contains a complete list of standard tags belonging to the HTML5 and XHTML 1.0 specifications. All the tags are ordered alphabetically.

CSS3 Properties

The following section contains a complete list of visual properties belonging to the CSS3 specifications. All the properties are ordered alphabetically.

A
align-content
align-items
align-self
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
B
backface-visibility
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
C
caption-side
clear

നിങ്ങൾക്കും ഒരു വെബ്സൈറ്റ് വേണ്ടേ?

Posted on July 28, 2013 - 2:58 pm by 2

chayilyam - About Theyyam - a Ritual Art of North Keralaഇന്റെർനെറ്റിന്റെ ലോകത്തേക്ക് എത്തിയപ്പോൾ തന്നെ മനസ്സിൽ തങ്ങിയ ഒരു മോഹമായിരുന്നു സ്വന്തമായി ഒരു വെബ്സൈറ്റുണ്ടാക്കുക എന്നത്. 1998 ഇൽ ആണ് ആദ്യമായി ഒരു മെയിൽ ഐഡി യാഹുവിൽ ഉണ്ടാക്കുന്നത്. (more…)

CSS3 new attribute selectors

Posted on November 19, 2012 - 7:51 am by

CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section.

[att^=val]

This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example:

<pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif;  text-decoration:none; margin:2px; background:#afa }</pre>

<code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#aaf }</code>

CSS3 Gradient Backgrounds

Posted on October 4, 2012 - 11:44 am by

 The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Read more >>

Linear Gradient (Top → Bottom)

#linearBg2 { background-color: #fddfa4; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #fddfa4); }

Linear Gradient (Left → Right)

#linearBg1 { background-color: #ec800b; background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4); }

Linear Gradient (with Even Stops)

#even-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }

Linear Gradient (with Specified Arbitrary Stops)

#arbitrary-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }

Radial Gradient (Centered, Full Size)

#radial-center { background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can’t specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

#radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

New Markup Elements for HTML5

Posted on June 14, 2011 - 7:12 am by

New Markup Elements

New elements for better structure:

Tag Description
For external content, like text from a news-article, blog, forum, or any
other content from an external source
For content aside from the content it is placed in. The aside content should
be related to the surrounding content
A button, or a radiobutton, or a checkbox
For describing details about a document, or parts of a document
A caption, or summary, inside the details element
For grouping a section of
stand-alone content, could be a video
The caption of the figure section
For a footer of a document or section, could include the name of the author, the
date of the document, contact information, or copyright information
For an introduction of a document or section, could include navigation
For a section of headings, using

to

, where the largest is the main
heading of the section, and the others are sub-headings
For text that should be highlighted
For a measurement, used only if the maximum and minimum values are known
For a section of navigation
The state of a work in progress
For ruby annotation (Chinese notes or characters)
For explanation of the ruby annotation
What to show browsers that do not support the ruby element
For a section in a document. Such as chapters, headers, footers, or any
other sections of the document
For defining a time or a date, or both
Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag Description
For multimedia content, sounds, music or other audio streams
For video content, such as a movie clip or other video streams
For media resources for media elements, defined inside video or audio
elements
For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description
For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description
A list of options for input values
Generate keys to authenticate users
For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for
better input control before sending it to the server:

Type Description
tel The input value is of type telephone number
search The input field is a search field
url The input value is a URL
email The input value is one or more email addresses
datetime The input value is a date and/or time
date The input value is a date
month The input value is a month
week The input value is a week
time The input value is of type time
datetime-local The input value is a local date/time
number The input value is a number
range The input value is a number in a given range
color The input value is a hexadecimal color, like #FF8800

HTML5

Posted on March 25, 2011 - 4:22 am by

നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് HTML. ഈ അടുത്ത് ഇറങ്ങിയ HTML5 ആണ് HTML -ന്റെ പരിഷ്കരിച്ച അവസ്സന പതിപ്പ്. ഒരുപാട് പുതിയ ടാഗുകളും എപിഐ കളും ഉള്‍ക്കൊള്ളിച്ചുകൊണ്ട് വളരേ നൂതനമായൊരു ബ്രൗസിംങ് അനുഭവം പ്രദാനം ചെയ്യാന്‍ HTML5 നു കഴിയും എന്നു വേണം കരുതാന്‍. HTML 4.01, XHTML 1.0 , DOM Level 2 HTML ഇവയ്ക്കു ശേഷം ഇറങ്ങിയ അടുത്ത വെബ്‌സ്റ്റാന്‍‌ഡേര്‍ഡായിട്ടാണ്‌ HTML5 ഇറങ്ങിയിരിക്കുന്നത്. Flash, Silverlight, Java തുടങ്ങിയ RIA Technologies നെ കുറിച്ചുള്ള വേവലാതി ഇനി വേണ്ട. ഇവ സപ്പോര്‍‌ഡ് ചെയ്യാനുതകുന്ന ടാഗുകളും അതിനു വേണ്ട എപിഐ കളും HTML5 നോടൊപ്പം കൂട്ടിച്ചേര്‍ത്തിരിക്കുന്നു. ഔദ്യോഗികമായി ഇതു പുറത്തിറങ്ങിയെങ്കിലും HTML5 സ്റ്റാന്‍ഡേഡൈസേഷന്‍ വരും വര്‍ഷങ്ങളിലും തുടരും. എല്ലാ ബ്രൗസറുകളും HTML5 ലെ എല്ലാ ടാഗുകളെയും സപ്പോര്‍ട്ട് ചെയ്‌തു തുടങ്ങിയിട്ടില്ല. എങ്കിലും മോസില്ല, ഗൂഗിള്‍ ക്രോം എന്നിവയില്‍ HTML5 ശക്തി വളരേ പ്രകടമായി കാണാവുന്നതാണ്. ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ എന്ന മൈക്രോസോഫ്‌റ്റ് ബ്രൗസറിന്റെ പരിഷ്‌കരിച്ച പതിപ്പായ ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ 9 – ഇല്‍ ആണ് HTML5 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.

Universal selector

Posted on May 15, 2008 - 12:47 pm by

The universal selector, written “*”, matches the name of any element type. It matches any single element in the document tree.

If the universal selector is not the only component of a simple selector, the “*” may be omitted. For example:

* *[LANG=fr] and [LANG=fr] are equivalent.
* *.warning and .warning are equivalent.
* *#myid and #myid are equivalent.

Font Size Conversion Chart

Posted on April 27, 2008 - 11:52 am by

Font Size Conversion Chart
Points Pixels Ems Percent Keyword Default sans-serif
6pt 8px 0.5em 50% CSS Tricks
7pt 9px 0.55em 55% CSS Tricks
7.5pt 10px 0.625em 62.5% x-small CSS Tricks
8pt 11px 0.7em 70% CSS Tricks
9pt 12px 0.75em 75% CSS Tricks
10pt 13px 0.8em 80% small CSS Tricks
10.5pt 14px 0.875em 87.5% CSS Tricks
11pt 15px 0.95em 95% CSS Tricks
12pt 16px 1em 100% medium CSS Tricks
13pt 17px 1.05em 105% CSS Tricks
13.5pt 18px 1.125em 112.5% large CSS Tricks
14pt 19px 1.2em 120% CSS Tricks
14.5pt 20px 1.25em 125% CSS Tricks
15pt 21px 1.3em 130% CSS Tricks
16pt 22px 1.4em 140% CSS Tricks
17pt 23px 1.45em 145% CSS Tricks
18pt 24px 1.5em 150% x-large CSS Tricks
20pt 26px 1.6em 160% CSS Tricks
22pt 29px 1.8em 180% CSS Tricks
24pt 32px 2em 200% xx-large CSS Tricks
26pt 35px 2.2em 220% CSS Tricks
27pt 36px 2.25em 225% CSS Tricks
28pt 37px 2.3em 230% CSS Tricks
29pt 38px 2.35em 235% CSS Tricks
30pt 40px 2.45em 245% CSS Tricks
32pt 42px 2.55em 255% CSS Tricks
34pt 45px 2.75em 275% CSS Tricks
36pt 48px 3em 300% CSS Tricks

There is a good online PX to EM conversion calculator available. You can also use this calculator.

Grouping

Posted on April 15, 2008 - 12:46 pm by

When several selectors share the same declarations, they may be grouped into a comma-separated list.

Example(s):

In this example, we condense three rules with identical declarations into one. Thus,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

is equivalent to:

H1, H2, H3 { font-family: sans-serif }

CSS offers other “shorthand” mechanisms as well, including multiple declarations and shorthand properties.

×

Hello!

താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.

രാജേഷ് ഒടയഞ്ചാൽ

×
Verified by MonsterInsights