Tagmanager:
AEM Tagging Framework:
To tag content and leverage the AEM Tagging infrastructure:
The tag must exist as a node of type cq:tag under the taxonomy root node
The tagged content node’s node type must include the cq:Taggable mixing
The TagID is added to the content node’s cq:tags property and resolves to a node of type cq:Tag
Tags:cq:Tag Node Type
The declaration of a tag is captured in the repository in a node of type cq:Tag
A tag can be a simple word (e.g.sky) or represent a hierarchical taxonomy (e.g. fruit/apple,meaning both the generic fruit and the more specific apple).
Tags are identified by a unique TagID.
Every Tag is associated with the pencil symbol
let us assume we have a product,
and let us assume we created a product called books > novels > fiction(sydneyshelton.html
> sports(sports star.html)
I have one-to-one page mapping.
1)In search cases,I need to add the tags.
what is the use of tagging?
2)in search engine optimization.
For every page,I can go and associate the tags,
goto siteadmin:
localhost:4502/cf#/content/geometrixx/en/toolbar.html
for e.g.:
jcr:content this is nothing but the Namespace.
how to create a new namespace??
localhost:4502/crx/explorer/nodetypes/index.jsp
from the above URL you can create node type in different ways and apart from that you can create the namespaces.
All the tag libraries are inserted here.
when you wanted to enter the new URI.
example:
under registered node types, when you go on with the above uri,we can just click namespace,
we can see all the tag libraries and associated uri
There are different kinds of node types:
1)Primary node types
2)Mixin node types
3)custom node types
4)create node type
5)Import node types
6)Namespace.
For example :we are getting the jcr title from here:
now we require only the uri,
if you want to add the new, we have to press new and add the namespace.
once the you enter the namespace
internal
enter uri of the new namespace you want to register:
http://localhost:4502/
enter the prefix of the namespace mapping:
sample
when is the Tag console??
we need to go for Tagging framework:
In Tagging framework we need to go for the Geometrixx Media,
Geometrixx Media >> Entertainment
Events
Gadgets
Insiders
where are etc/tags??
we have to go to
localhost:4502/crx/de/index.jsp#/etc/tags/geometrixx-media
we have to go here > click on the etc folder
under that go > tags folder and see the geometrixx-media,here where all the tags are place, whatever we created.
for e.g.:
if you go this link:
localhost:4502/cf#/content/geometrixx-media/en/gadgets/leaps-in-ai.html
under that if you for the science page component
under this go for the page properties
For e.g.:
You built a new website:
let me assume i am building a new website for books:
The first thing, you need to built a namespace for yourself:
once this books is created and again when i click new,it automatically created the
> create tag
when the new tag is created automatically the TagID is books:fiction.
namespace:name of the tag
for e.g.:
we have created multiple tags
if the author sees multiple namespaces ,inorder to avoid confusion, that is the
from > geometric media >> Book (Website) >> Books fiction (this association should be in proper way)
Inorder to restrict other tags in order to not to get mess-up ,we have to set in user admin.
go to localhost:4502/useradmin > tag > permissions > etc > tags > books > we have different permissions we can restrict whatever we want.
(Like Read write Modify Delete Read ACL Edit ACL Replicate).
All the folders your seeing is the namespace.
That is how you can restrict the user to the tag.
whatever you associate to the page, go to the content >> geometrixx >> jcr:content sorry this was not associated to the geometrixx page, may be that is associated to the toolbar page.
under toolbar>> jcr:content >> read these properties
when your writing the search component or when you build your search component:
1)select tar from the content where
cq:tags = ‘ ‘
or
jcr:title = ‘ ‘
usually we won’t search, we usually go for the GSA or micro fast searches .where we are going to index your content.
when your indexing the content, we have to do based on the property of CQ:tags
so that even the CQ:tags keywords are also tagged to index.
we have some thing called oak index store:
under this we can specify all the properties of the index.
these are all the properties, if you want to add the additional property:
for example:
copy any property and add the property, inside the properties > change the name of the property names and the new property is indexed under the oak index .
In crx3 all the indexes are stored under the oak index.
In crx2,the way you created the indexes was, you have a config file under that.
when you add a property, you can still trigger the index.
When you want to reindex any property ,we have do the following >>
Properties > reindex —>false, this will be false, but we have to make this true(automatically make it as true), inorder to reindex.
———————————————————————————————————————————————————
The namespace i created, how to use it here?
go to this ——>
localhost:4502/crx/de/index.jsp#/content/geometrixx/jcr%3Acontent
content > jcr:content >and in the name column type:sample.title value click on add .it will be added in to the properties list.
for example, if you add the sample1.title could not save it (that is invalid namespace prefix).because i did not create the namespace.
do we need to track the changes in the lower environment,
sol:if you now that our content always exploits in to the content geometry, you can just package the content geometry.just create one package and you will be done.
or you could use something like curl to take the entire package.
In DAM always the classic view.
—————————————————————————————————————————————————————
tagmanager api jsp aem:
This is for reference purpose:
if we go for:
localhost:4502/system/console/bundles
click on OSGI >>> services > and click tag manager
then the required one is:(sample)
com.adobe.cq.social.commons.tagging.social.tagmanagerfactory this is the required bundles.
the original required one is:
com.day.cq.tagging.JcrTagManagerFactory anything we find out here can be represented as @reference.
How to get the same thing in the JSP??
sling.getservice
—————————————————————————————————————————————————————
we have to go to the api documentation of tagmanager
>> jcrtagmanagerfactory api (all these are mentioned in screenshots).
The next thing is all the Tags should be associated to my page.
for example, this is how it will be mentioned:
Resource resource resolver = request.getResourceResolver();
how to practice??
write a small OSGI servlet and mentioned the page path and resource of it.
——————————————————————————————————————————————————————
Mobile components:
Developing a mobile website:
The website you created is optimized to view in desktops and laptops.However,your users may want to view your website in hand-held devices, such as tablets and mobile phones.Therefore you need to ensure that the website is optimized to view in all devices to provide your users a better experience.
Responsive Web design:
Responsive Design allows you to create sites that provide optimal viewing experience across various mobile devices.You are provided with emulators to view the site on various devices.
There are a number of ways to structure your content to provide an interesting experience to both desktop and mobile customers two design mythologies are currently popular.
1)Separate content for desktop and mobile.
2)Responsive web design
there are two stragies,one is totally going to :
1)Responsive framework :If you go for this particular kind of framework, you will have one URL.
For example:
citrix.com —>> from Desktop you will get Desktop version
citrix.com ——> from mobile you will get the responsive one.
single URL based on the device, it is going to adjust the website.
inorder to get this :
we need to undergo the :Bootstrap framework and CSS3 framework.
what CSS3 does??
It is going to view the device detection for you.
only info we have is Browser,how do you detect the OS and the device??
here the request header, will have the user-agent,OS version and type of the device and all the information.
your CSS3 @media query will do the device detection.
FYI,In Bootstrap,everything was divided in to grid.
for example
@media (type = apple OS).
[div grid = “3 -cd -grid”]
@media (type = ‘Ipad’)
[div grid = “4-cd-grid”]
Bootstrap will do accordingly grid and according to that CSS3 will do the layouts.
In this way, you will make your website responsive.
Second approach:
Is to build a separate mobile website:
citrix.com — and you will have separate components for the desktop.
if you open
m.citrix.com you will have separate components for the mobile.
This is one approach, we can consider.
(OR)
You can have one component and you can have multiple if-else sections
Responsive web design is an approach to web design aimed at implementing sites that provide an optimal viewing experience for all websites visitors.
easy reading and access to content
clear and easy navigation
Minimum of resizing, panning and scrolling across a wide range of devices (desktop and mobiles) with varying.
Screen sizes
memory capacity
network speed
CPU speed.
Responsive web design is not a single piece of technology, but rather a collection of techniques and ideas that allow the site to identify and then respond to the browsing environment or device through which they are being viewed .The three tenets of responsive web design are:
fluid grids
flexible images
CSS3 media inquires to detect screen resolution
Every website has particular defined objectives.It is important to approach the issue of multi-device experience from a strategic standpoint to ensure that your web goals are met.
——————————————————————————————————————————————————————
Create a new mobile component and add it in to one website.
How to do that??
They are some important API’s that you need to be aware of:
whenever you create a mobile website, you can test that component.
only show the times if the device supports javascript:
(MobileUtil.hascapability(slingRequest,DeviceCapability,CAPABILITY_JAVASCRIPT))
Blackberry devices does not support javascript.In that way you need to check the mobile API.
whenever you building mobile components :
we need to be aware of all these things:
Capabilities :
Images
CSS
JavaScript
Device Rotation
Mobile emulators:
CQ5 provides several device emulators that allow you to see how your web content will appear on those mobile devices.The default emulators can be found in the following location in the repository:
libs/wcm/mobile/components/emulators
Those emulators are grouped based on sets of capabiities e.g:”Support images” or “support rotation”.
——————————————————————————————————————————————————————
WURFL:
WURFL stands for wireless universal resource file.CQ5 uses wurfl to determine which rendition of the page will be rendered (provided )to the mobile device.wurfl is an xml database that stores the different web browsing capabilities of a mobile device based on its User agent.
——————————————————————————————————————————————————————
Mobile components (there are two API’s mainly):
Creating mobile components is done actually in a very similar way than creating regular components.
The only difference between a regular component and a mobile component is that the component needs to be aware if the emulator that is used to display the page is able to handle the kind of content that he needs to display.For that we have to main classes that come quite handy everytime that we are developing mobile components.
com.day.cq.wcm.mobile.core.MobileUtil
com.day.cq.wcm.mobile.api.device.capability.DeviceCapability
——————————————————————————————————————————————
If you want to build native app on the mobile devices ,there is a new solution called the phone gap.
that is the product available by the Adobe PhoneGap Enterprises uses AEM as a platform,this is mainly to create and manage content-rich cross-platform mobile applications that take full advantage of both HTMLx and native device features.
——————————————————————————————————————————————————
When your authoring there are two strategies:
1)if your working separatley mobile website, you will have the :
.content/geometrixxmobile
2)if your going for normal component, you will have the:
content/geometrixx/
that means you have the separate content for separate usage.
—————————————————————————————————————————————————————
if URL is common, it is the responsive framework.
if URL is not common, it is not responsive framework.
——————————————————————————————————————————————————————
if URL IS COMMON,WE NONEED TO WORRY ONLY WHEN AUTHORING(BECAUSE WE HAVE ONLY BUILD ONE COMPONENT AND WITH IN THE COMPONENT YOU WILL HAVE THE MEDIA QUERIES,MEDIA DETECTIONS AND ALL THOSE THINGS, ).
————>you will have one component,with multiple blocks in that component.
Note:we can hide different views in the desktop components (i.e. normal component) and in the mobile components.
—————————————————————————————————————————————————————
when your working with one webpage(if there are different components(like:normal component and mobile component).
Authoring still does not care about the components, it just build the webpage for us.(only when rendering your code should take care of all these things).
Author won’t have any flexibility there.
