Style sheets for mobile to desktop (Chapter 12)

The last minute decision to go to the movies. A bet about the official language of Andorra. The phone number for a company where you’re fifteen minutes late for a meeting. A map to the company, because the reason you’re late is you can’t find it.

We want information immediately, and with the proliferation of powerful mobile devices of all shapes and sizes, the Web can be in you pocket, purse, or backpack just as easily as it’s at your desk or kitchen table. And today’s mobile browsers are far ago, largely spurred on by the advent of Apple’s Mobile Safari browser and the popularity of the iPhone.

So now it’s up to you and me to build sites that make it possible for visitors to access information from any mobile phone, smartphone, tablet, laptop desktop computer, game console, or furure Web-enabled devices.

In this chapter, you’ll learn how to build one site that works on the entire range of devices, adapting its layout according to the device’s capabilities.

Generally, there are two approaches for creating Web sites suitable for mobile devices:

• Build a dedicated site for mobile phones. That is, a site that is tailored for the mobile experience and that is separate from the site for desktop and tablet users. Sometimes tablets especially the iPad, get their own version of a site, making a total of a least three sites.
• Build one site for all. Deliver all devices -from movile phones to desktop computers – the same HTML, but style it differently so it’s device-appropriate. With some additional tricklness, you can even deliver different image and video sizes so mobile-phone users aren’t penalized by large downloads.

For most of us, a single site will likely serve our visitors well. Besides -part of the argument for a single site goes- today it’s harder to predict someone’s intentions when they visit our site, especially with smartphones and their browsers having become more robust. For instance, it’s not always a safe bet that the mobile visitor is, in fact, mobile. I’m sure I’m not alone in browsing sites on my phone while lounging on my couch, even with my laptop just on the other side of the room. In most cases, I’m looking at full sites, not mobilized versions of the desktop experience.

However, there’s no getting around the smaller screen sizes and reduced bandwith of mobile phones, so it’s still our job to deliver a site that is suitable for viewing in this context.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-12

My Nephews and Niece

“Today I want to talk about my nephews and my niece, they are a special part in my life, as they are the children that I have not yet filled but they are part of me.”

I have 6 total at the moment and I have the happiness that is coming a new member who apparently will be a girl, after a few years and especially to have only a child arrives including another girl to the family is a pleasure huge, because our family is known for being more blessed children. There are 5 boys and 1 girl until now, waiting for the month of February comes the second child to the family and fill as the other of love and happiness to make you feel welcome.

I always thought that they are part of the future, but the future scares me when I see how the world is today, uncertain, full of wars, evil, pain, hunger, more however, not everything is the dark side, if they are here is because you can get to achieve great things in their future that may not touch us see, but they will enjoy depending on how we teach them to fight for their ideals and to value their environment.

We can only wait and be part of your future today, and let time and their decisions be guided by the path they want to follow, building it every day, sharing with us their experiences school, their games, their sadness and to its mischief. That’s the part I have to live with them, it makes me remember my childhood and certainly live in a way that might not lived it and now I can dream along with them.

Layout with Styles (Chapter 11)

“You can create a wide variety of layouts with CSS. In this chapter demonstrates how to build a common layout type: a masthead on top, two columns of content and a footer on the bottom. However, you can apply the CSS properties you’ll learn about to make vastly different layouts.”

The chapter won’t to show every line of CSS, For instance, most of the text formatting was done ahead of time. Please see the complete code at the website (www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html). Also they created a fixed-width (with no fluid interior) version called finished-page-fixed-width.html so you can see how that could be achieved. I’ve included a lot of comments in all of the files (especially the style sheets) to help explain the code.

We need to take certain considerations when beginning a Layout, like separating content and presentation, as a best practice, always separate your content (HTML) and presentation (CSS). You learned how to do this by linking to an external style sheet. If you do so from all your pages, they can all share the same layout and overall style. This also makes it easier to change the dsign of the whole site at a later date, simply by modifying the CSS file or files.

The browser considerations, not all visitors will use the same browser, operating system, or even device when accessing your site. So, in most cases, you will want to test your pages on a range of browsers before making them live on your server. I recommend testing a page in a few browsers periodically as you develop it so you’ll have fewer issues to address at the end when you perform comprehensive testing.

Sometimes it is necessary to write CSS rules for specific versions of IE to fix display issues caused by IE’s misbehavior. This is especially the case for IE6 and, to a lesser extent, IE7. There are a few ways to do this, but the best from a performance standpoint is to use conditional comments to create IE version-specific classes on the html element that you can leverage in your style sheets.

The layout approaches, there are several ways to do a layout. A fixed layout has pixel-based widths for the whole page and foe each column of content. As its name suggests, its width doesn’t change when viewed on smaller devices like mobile phones and tablets or when a desktop browser window is reduced. Chances are you’ve seen many fixed layouts when browsing the Web, particularly on corporate and big-brand sites. Fixed layouts are also the easiest to get the hang of when learnins CSS.

A fluid layout uses percentages for widths, allowing the page to shrink and expand depending on the viewing conditions. This approach has been enhanced of late to create responsive and adaptive layouts, which can not only shrink for phones and tablets like traditional fluid layouts, but also shift their design in specific ways based on the screen size. This allows for tailoring the experience to mobile, tablet, and desktop users independently, but with the same HTML, not with three diferent sites.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-11

El Dia de los Muertos ( day of the dead )

In the 16th century Spaniards brought the Catholic celebration of Dia de los Muertos to Latin America where it mixed with indigenous rituals honoring the dead. Today, people across Latin America honor their dead and celebrate the cycle of life in early Novermber. under a variety of names: “Día de los Muertos” (Day of the Dead), “Día de todos los Santos” (All Saints Day), “Día de los Difuntos” (Day of the Deceased) and “Día de los Angelitos” (Day of the Little Angels in honor of children who have died).

In general, families begin the morning of November I by constructing altars to honor their deceased loved ones. They place photographs and favorite foods of the dead, candles to light the way, incense, and other gifts on the altars. The celebration then shifts to the cemetery where all gather around the graves of relatives. Families carefully clean and sweep the gravesites, and decorate them with colorful adornments, such as streamers, flowers, crosses, candles, and food -all of which serve as offerings to attract and please ancestors. By early afternoon, the cemetery fills with people joyfully celebrating life and death by playing music, dancing, and feasting alongside the spirits of their ancestors.

In México

The celebration of the dead in México takes an specially humorous twist: people confront death by making jokes and laughing at it, painting sdulls in bright joyful colors, and personifying death with skeletal figures called calacas. The printamker José Guadalupe Posada’s satirical representations of skulls and skeletons in the late 1800’s made skeletal imagery the hallmark of the Mexican celebration that it is today.

November 1st is specially dedicated to the spirits of deceased children, los angelitos, whereas deceased adults are honored on November 2. Locals begin the celebration by building altars to honor their deceased relatives in their homes, at the church or in the cemetery. Altars are unique to each person they honor; they are laid with offerings including photographs and favorite foods of the deceased, flowers, candles, salt, water, sweet breads and incense. Paths of bright orange marigolds guide the dead home with their powerful fragrance. Known as Cempazuchiltl, or 20 petals, in the Nahuatl language, marigolds were  used to honor the dead in Aztec an other pre-Hipanic celebrations of the death.

other important traditions in México include pan de muerto, an oval-shaped sweet yeast bread decorated with crossed bones or a skull and dusted with sugar, and calaveritas (sugar skulls). Handcrafted calacas depict skeletons in a variety of activities of the living, representing the hobbies and work of deceased loved ones. In México, a custom of writing and publicly displaying short poems called calaveras that mock the police, goverment and priests has continued since the 19th century.

funny game

Check it out this game build it with classmates from Programming Concepts. Have fun.

www.rpsvote.com

Formatting text with Styles (Chapter 10)

With CSS, you can change the font, size, weight, slant, line height, foreground and background color, and spacing and alignment of text. You can decide whether it should be underlined or struck through, and you can convert it to all uppercase, all lowercase, or small caps. And you can apply those changes to an entire document or an entire site in just a handful of lines of code.

One of the most important choices you’ll make for yor Web site is the font for the body and headlines. not every system supports the same fonts by default, so you should define alternate fonts as fallbacks. But first let’s see how to define a single font family and the ramifications of not providing the alternates. Although you can specify whichever font you want, your visitors will see that font only if they have it installed on their computer. So, it’s best to use fonts that you can reasonably expect them to have.

In traditional publishing, italics are often used to set off quotations, emphasized text, words that are foreign relative to a language, some scientific names, movie titles, and much more. Sometimes you’ll want to make something italic, but it isn`t appropriate to mark up the content with one of the elements that also happens to render italic text. The CSS font-style property allows you to do this to any element. Bold formatting is probable the most common and effective way to make text stand out. For instance, browsers typically style the h1-h6 headings in bold by default. You may style any text in bold or turn it off. Style sheets five you a lot of flexibility with bold text, providing relative values.

Setting the font size there are two basic ways to do this, you can mandate that a specific size be used or you can have the size be relative to the element’s parent font size. Setting the size relative to the parent takes a little getting used to: you need to understand how the browser treats these units relative to their parents. If you set the font size with pixels, visitors using internet Explorer will not be able to make the text bigger or smaller with the browser’s text option. that’s one argument for sizing your fonts with ems or percentages. Beginning with IE7, visitors can zoom the entire page in and out.which is an improvement over IE6.

Setting all font values at once this is the way to go whenever possible so you can keep your style sheets lean. Just type font, optionally type normal, italic or oblique to set the font style, type the desired font size and if desired, type /line-height, where this is the amount of space there should be between lines, type a space followed by the desired font family or families in order of preference, separated by commas. And there are a lot of more options to change for the formatting text like the backgrounds for the text, or the color,  adding indents or controlling the spacing. Very interesting to apply to our website.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-10

Defining Selectors (Chapter 9)

There are two principal parts of a CS style rule. The selector determines which elements the formatting will be applied to, and the declarations define just what formatting will be applied. In this chapter we learn how to define CSS selectors.

While the simplest selectors let you format all the elements of a given type, more complex selectors let you apply formatting rules to elements based on their class or id, context state or more.

1. Constructing selectors

The selectors determines which elements a style rule is applied to. For example, if you want to format all p elements with the Times font, 12 pixls high, you’d need to create a selector that identifies just the p elements while leaving the other elements in your code alone. If you want to format the first p in each section with a special indent, you’ll need to create a slightly more complicated selector that identifies only those p elements that are the first element in their section of the page.

A selector can define up to five different criteria for choosing the elements that should be formatted:

• the type or name of the element
• the context in which the element is found
• the class or id of an element
• the pseudo-class of an element or a pseudo-element
• whether or not an element has certain attributes and values

Selectors can include any combination of these in order to pinpoint the desired elements. Mostly, you use one or two at a time. In addition, you can apply the same declarations to several selectors at once if you need to apply the same style rules to different groups if elements.

Selecting elements by name, perhaps the most common criterion for choosing which elements to format is the element’s name or type. For example, you might want to make all of the h1 elements big and bold and format all of the p elements with a sans-serif font.

Selecting elements by Class or ID, if you’ve labeled elements with a class or an id, you can use the criterion in a selector to apply formatting to only those elements that are so labeled. You can use class and id selectors alone or together with other selector criteria.

Selecting elements by Context, in CSS, you can pinpoint elements depending on their ancestors, their parent, or their siblings. An ancestor is any element that contains the desired element (the descendant), regardless of the number of generations that separate them. A selector based on an element’s ancestor had been known as a descendant selector, but CSS3 renamed it a descendant combinator.

Selecting links based on their state, CSS lets you apply formatting to links based on their current state; that is, whether the visitor is hover in their cursor on top of one, whether a link has been visited, or whatever. You achieve these with a series or pseudo-classes.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-9

Working with Style Sheets (Chapter 8)

Before you start defining your style sheets, it’s important to know how to create and use the files that will contain them. This chapter show us how to apply CSS to multiple Web pages (include a whole site), a single page, or an individual HTML element. You achieve these via three methods: external style sheets (the preferred choice), embedded style sheets, and inline styles (the least desirables).

• Creating an external Style Sheet

External style sheets are ideal for giving most or all of the pages on your Web site a consistent look. You can define all your styles in an external style sheet and then tell each page on your site to load the external sheet, thus ensuring that each will have the same settings. Adding CSS to your page from an external style sheet is a best practice, so I highly recommend you use this method.

• Linking to external Style Sheet

After you create a CSS you need to load it into your HTML pages so the style rules are applied to the content. The best way to do so is to link to the style sheet. When you make a change to an external style sheet, all the pages that reference it are automatically updated as well. That is the awesome power of an external style sheet. Another benefit is that once a browser has loaded it for one page, it typically doesn’t need to retrieve it from the Web server for subsequent pages.

• Creating an embedded Style Sheet

An embedded style sheet is teh second way to apply CSS to a page. It lets you set the styles directly in the HTML document you want to affect (typically it goes in the head) . Because the styles are in that HTML file only, the CSS won’t get the same caching benefits either. As mentioned earlier, an external style sheet is the recommended approach for most cases, but it’s important to understand your options for the times you’ll need to deviate.

• Applying Inline Styles

Inline styles are the third way to apply CSS to HTML. However, they are by far the least desirable option because they intertwine your content IHTML) and presentation (CSS), a cruel slap in the face to best practices. An inline style affects only one element, so you lose one of the key benefits an external style sheet provides: Write once and see everywhere. Imagine having t sfit though a slew of HTML pages to make a simple font color change, and you can see why inline style aren’t intended for regular use.

You can link to more than one style sheet and let visitors choose the styles they like best. The specifications allow for a base set of persistent styles that are applied regardless of the visitors preference, a default or preferred set of additional styles that are applied if the visitor makes no choice, and one or more alternate style sheets, that the visitor can choose, at which point the preferred set is deactivated and ignored.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-8

HUITLACOCHE, the food of the Aztec Gods

Today want to tell about this Mexican cuisine, is time consuming because only in the rainy season and shortly after her for the kind of food that is, we see further that is.

The fungus forms galls on all above-ground parts of corn species, and is known in México as huitlacoche; it is eaten, usually as a filling, in quesadillas and other tortilla-based foods, and soups.

Characteristics

Although it can infect any part of the plant, it usually enters the ovaries and replaces the normal kernels of the cobs with large, distorted tumors analogous to mushrooms. These tumors, or “galls”, are made up of much-enlarged cells of the infected plant, fungal threads, and blue-black spores. The spores give the cob a burned, scorched appearance. The generic name Ustilago comes from the Latin word ustilare (to burn).

Huitlacoche grows best during times of drought in a 78 to 93 °F (26 to 34 °C) temperature range. Aztecs purposely inoculated corn with the spores by scratching their corn plants at the soil level with a knife—thereby allowing the water-borne spores easy entrance into the plant.

Culinary uses

Smut feeds on the corn plant and decreases the yiel. Smut-infected crops are often destroyed, although some farmers use them to prepare silage. The smut is considered a delicacy in México, where it is known as huitlacoche, even being preserved and sold for a significantly higher price than uninfected corn. The consumption of corn smut originates from ancient Aztec cuisine. For culinary use, the galls are harvested while still immature — fully mature galls are dry and almost entirely spore-filled. The immature galls, gathered two to three weeks after an ear of corn is infected, still retain moisture and, when cooked, have a flavor described as mushroom-like, sweet, savory, woody, and earthy. Flavor compounds include aotolon and vanillin, as well as the sugar glucose.

Huitlacoche corn taco

Quesadilla de huitlacoche, as it’s often served in central Mexico

Recipes of México

A favorite and simple Mexican-style sucotash can be made from chorizo, onions, garlic, serrano peppers, huitlacoche, and shrimp with salsa taquera. The mild, earthy flavors of the huitlacoche blend nicely with the fats of the chorizo and bond to mellow out the heat from the peppers and salsa.

Another Mayan favorite on the Riviera Maya (Cancun to Tulum) is to add huitlacoche to omelettes. Once again, its earthy flavors bond with the fats that cook the eggs to mellow the flavors into a truffle-like taste.

An important thing to note about huitlacoche is that the blueish color transforms into the recognizable black color only with heat. Any dish with huitlacoche must include a slow simmer of the fungus until it becomes black which also removes most of the starch of the corn and what is left is a black oily paste.

Well I hope you can enjoy this meal if you  find it in some international market in USA, because in México can find it in the most popular restaurants and Farmers Market. Enjoy it and 

Buen Provecho.

Reference: http://en.wikipedia.org/wiki/Corn_smut

CSS BUILDING BLOCKS (Chapter 7)

Whereas HTML defines your content’s meaning and gives your Web pages their basic structure, CSS (Cascading Style Sheets) defines the appearance.

A style sheet is simply a text file that contains one or more rules that determine how certain elements in your Web page should be displayed. There are CSS properties for controlling basic formatting such as font size and color, layout properties controls such as deciding where page breaks should appear when visitors print a page. CSS also has a number of dynamic properties that allow items to appear and disappear and that are useful for creating drop-down lists and other interactive components.

The wonderful thing about CSS is that it can be created outside of a Web page and then applied to all the pages on your site at once. It is flexible, poweful, and efficient and can save you lots of time and bandwith.

Constructing a Style Rule,each style rule in a style sheet has two main parts:
The selector, which determines which elements are affected, and the declaration block, made up of one or more property/value pairs (each constitutes a declaration), which specifies just what should be done. Adding Comments to Style Rules, it’s a good idea to add comments to your CSS to note the primary sections of your style sheets or simply to explain something about a particular rule or declaration. Comments help not only you but also others who are viewing your code. For your own sake, you’ll be happy that you left yourself comments if you revisit the code some months after having initially worked on it. The Cascade: when rules collide,styles come from many sources. As you learned, every browser has its own default styles. But you can apply your own styles to override or complement those in three ways: You can load one or more from an external file, insert them at the top of an HTML document, or apply them to a specific HTML element right in the code. Also some browsers let your visitors create and apply their own style sheets to any pages they visit. Finally, some styles are passed down from parent element to child. A property’s value, each CSS property has different rules about what values it can accept. Some properties accept only one of a list of predefined values. Others accept more than one type of value. The acceptable values for each property are listed in the section describing that property.

Book Summary of HTML 5 and CSS 3 (Seventh Edition)
http://www.bruceontheloose.com/htmlcss/table-of-contents.php#chapter-7