#Humor – When you’re an architect but you’re also learning #CSS

Hi!

When you’re an architect but you’re also learning CSS

photo_2018-02-22_22-23-25

Greetings @ Burlington

El Bruno

#Humor – #Css is Awesome

Hi !

You know it

Css Is Awesome Developer Memes

Greetings @ Toronto

– El Bruno

References

[#BOOTSTRAP] HowTo: use forms with Bootstrap 3 (well not expect much…)

Hello!

During these days I have seen many people that becames the most happy people in the world when they start to work with Bootstrap, also if you use it with AngularJs so it seems better than a few strawberries with chocolate!

Today I have to work a little with forms and there is a series of lessons that I’ve been learned :

-There is a series of classes to organize the contents of a form, such as form-horizontal and form-inline

-There are a series of classes to define the labels for the controls and specific styles of controls

Here is an very bad example:

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title>Form 1</title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7: </head>

   8: <body>

   9:     <div class="container">

  10:         <form class="form-horizontal">            

  11:             <fieldset>

  12:                 <legend>Form 1</legend>

  13:                 <div class="controls">

  14:                     <label>Field 1</label>

  15:                     <input type="text" placeholder="1 type something ..." />

  16:                 </div>

  17:                 <div class="controls">

  18:                     <label>Fieldazo 2</label>

  19:                     <input type="text" placeholder="2 type something ..." />

  20:                 </div>

  21:             </fieldset>

  22:         </form>

  23:     </div>

  24:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  25: </body>

  26: </html>

The result we have is the following (much more ugly that hitiing you your mother)

image

Now, grouping controls in a DIV with the class control-list, and defining the class control-label for the label of each, and with some more… and have a more enjoyable form.

   1: <div class="container">

   2:     <form class="form-horizontal">            

   3:         <fieldset>

   4:             <legend>Form 1</legend>

   5:             <div class="control-list">

   6:                 <label class="control-label">Field 1</label>

   7:                 <div class="controls">

   8:                     <input type="text" placeholder="1 type something ..." />

   9:                 </div>

  10:             </div>

  11:             <div class="control-list">

  12:                 <label class="control-label">Fieldazo 2</label>

  13:                 <div class="controls">

  14:                     <input type="text" placeholder="2 type something ..." />

  15:                 </div>

  16:             </div>

  17:         </fieldset>

  18:     </form>

  19: </div>

The above example of code guente allows us to get a form that does not throw to the inhabitants of the underworld

image

Before proceeding to more advanced examples (nor is the head I of for more), it is best to read the official CSS support in the FORMS section of Bootstrap > > http://getbootstrap.com/css/#forms

For example the use of the class form-group with form-horizontal for grouping content horizontally, model validation, etc.

Reference: http://getbootstrap.com/css/#forms

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#BOOTSTRAP] HowTo: utilizar forms con Bootstrap 3 (bueno tampoco esperes mucho …)

Hola!

durante estos días he visto a mucha gente que se pone Jappy Jappy con Bootstrap, además parece que si lo usas con AngularJs pues es mejor que unas fresas bañadas con chocolate !!!

Hoy tocó trabajar un poco con forms y las lecciones aprendidas son las siguientes:

– existe una serie de clases para organizar los contenidos de un form, por ejemplo form-horizontal y form-inline

– existen una serie de clases para definir los labels de los controles y los estilos específicos de los controles

Veamos un ejemplo mal hecho:

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="controls">

  15:                     <label>Field 1</label>

  16:                     <input type="text" placeholder="1 type something ..." />

  17:                 </div>

  18:                 <div class="controls">

  19:                     <label>Fieldazo 2</label>

  20:                     <input type="text" placeholder="2 type something ..." />

  21:                 </div>

  22:             </fieldset>

  23:         </form>

  24:     </div>

  25:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  26: </body>

  27: </html>

El resultado que tenemos es el siguiente (mucho más feo que pegarle a tu madre)

image

Ahora bien, agrupando los controles en un DIV con la clase control-list, definiendo la clase control-label para el label de cada uno, y con poco mas … ya tenemos un form más agradable.

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="control-list">

  15:                     <label class="control-label">Field 1</label>

  16:                     <div class="controls">

  17:                         <input type="text" placeholder="1 type something ..." />

  18:                     </div>

  19:                 </div>

  20:                 <div class="control-list">

  21:                     <label class="control-label">Fieldazo 2</label>

  22:                     <div class="controls">

  23:                         <input type="text" placeholder="2 type something ..." />

  24:                     </div>

  25:                 </div>

  26:             </fieldset>

  27:         </form>

  28:     </div>

  29:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  30: </body>

  31: </html>

El ejemplo anterior de código guente nos permite conseguir un form que no haga vomitar a los habitantes del averno

image

Antes de seguir a ejemplos más avanzados (tampoco es que la cabeza me de para más), lo mejor es leer la ayuda oficial de CSS en la sección FORMS de Bootstrap >> http://getbootstrap.com/css/#forms

Por ejemplo el uso de la clase form-group con form-horizontal para agrupar contenidos horizontalmente, modelos de validación, etc.

 

Referencia: http://getbootstrap.com/css/#forms

Saludos @ La Finca

El Bruno

image image image Google

[#BOOTSTRAP] Live grid, columns and more stuff …

Hello!

After yesterday’s post about how to add Bootstrap to a web project in Visual Studio 2012 or 2013, today I will explain a little more about the way that Bootstrap allows to work with with elements in a grid.

The simplest model that proposes Bootstrap is based on a grid with 12 columns. Basically is possible to assemble groups of columns that always add 12, in example

  • 4, 4, 4
  • 2, 4, 6
  • 1, 3, 4, 1, 3
  • etc

The following image, extracted from the official doc explains it so that everybody can understand this, even dumb people like me.

image

When you have to to create this type of tables , you must start with a DIV element with the class row and then the interior components with a fixed scheme that works “in all resolutions”, with classes

  • .col-xs –; for extra small devices < 768px
  • .col-sm –; for small devices > = 768px
  • .col-md –; to medium devices > = 992px
  • .col-lg –; for large devices = > 1200px

The following example defines a 4,4,4 to medium devices size and size 8,2,2 for small devices

 1: <div class="container">

   2:     <div class="row-fluid">

   3:         <div class="col-md-4 col-xs-8" style="background: greenyellow">

   4:             <h1>Title A</h1>

   5:             <p>

   6:                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

   7:             </p>

   8:         </div>

   9:         <div class="col-md-4 col-xs-2" style="background: yellow">

  10:             <h1>Title B</h1>

  11:             <p>

  12:                 Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  13:                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  14:             </p>

  15:         </div>

  16:         <div class="col-md-4 col-xs-2" style="background: red">

  17:             <h1>Title C</h1>

  18:             <p>

  19:                 Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  20:                 Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  21:             </p>

  22:         </div>

  23:     </div>

 

In implementation looks something like this

BootstrapSample2

By the way, many thanks to Gorka (@Gk_8) for making me remember explain col-xs -… Winking smile and thanks to Sergio León (@panicoenlaxbox) by explain version 3 bootstrap!

References:

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#BOOTSTRAP] Live grid, columnas y demas …

Hola!

después del post de ayer sobre la forma de agregar Bootstrap a un proyecto web en Visual Studio 2012 o 2013, hoy voy a explicar un poco sobre la forma que provee by default Bootstrap para trabajar con elementos en una grid.

El modelo más simple que propone Bootstrap se basa en una grid con 12 columnas. Sobre esta base es posible armar grupos de columnas que siempre sumen 12, por ejemplo

  • 4, 4, 4
  • 6, 2, 4
  • 1, 1, 4, 3, 3
  • etc

La siguiente imagen, extraida de la doc oficial lo explica para que lo entiendan personas como yo.

image

La forma de crear este tipo de tablas consiste en definir un DIV con la clase row  y luego los componentes interiores con un esquema fijo que funciona “en todas las resoluciones”, con las clases

  • .col-xs-; para extra small devices < 768px
  • .col-sm-; para small devices >= 768px
  • .col-md-; para medium devices >= 992px
  • .col-lg-; para large devices => 1200px

El siguiente ejemplo define un tamaño de 4,4,4 para medium devices y un tamaño 8,2,2 para small devices

   1: <div class="container">

   2:     <div class="row-fluid">

   3:         <div class="col-md-4 col-xs-8" style="background: greenyellow">

   4:             <h1>Title A</h1>

   5:             <p>

   6:                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

   7:             </p>

   8:         </div>

   9:         <div class="col-md-4 col-xs-2" style="background: yellow">

  10:             <h1>Title B</h1>

  11:             <p>

  12:                 Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  13:                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  14:             </p>

  15:         </div>

  16:         <div class="col-md-4 col-xs-2" style="background: red">

  17:             <h1>Title C</h1>

  18:             <p>

  19:                 Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  20:                 Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  21:             </p>

  22:         </div>

  23:     </div>

En ejecución se ve algo así

BootstrapSample2

Por cierto, muchas gracias a Gorka (@Gk_8) por hacerme acordar de explicar los col-xs- … Winking smile y gracias a Sergio Leon (@panicoenlaxbox) por explicarme la version 3 de Bootstrap!

Referencias:

Saludos @ La Finca

El Bruno

image image image Google

[#VS2013] HowTo: Create a website project in Visual Studio using Bootstrap

image

Hello!

For today’s post I hope that the 3G network works fine in the train; specially when I need to download the NuGet package.

How to create a WebSite project in Visual Studio 2012 or 2013 including Bootstrap

First one: do you know Bootstrap? If you don’t, you should !

Bootstrap is a framework created by Twitter to create interfaces and responsive website based on HTML5 and CSS3.

As that’s it, basically is a zip file which has a couple of .css and. js files. The most common way to get this package is access to the site of Bootstrap and click Download Bootstrap .

image

The zip has everything you need to create a website taking advantage of the features offered by Bootstrap. However there are other more elegant way of doing this.

1 Create a website with Visual Studio 2012 or 2013. For this example I’ve hidden the local path and I put name to the site “BootstrapSample”

image

This action creates a clean website

image

2 Add an HTML page and call it index.html

image

3 Add the following code to the page

 1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5: </head>

   6: <body>

   7:     <div>

   8:         <h1>Title A</h1>

   9:         <p>

  10:             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  11:         </p>

  12:     </div>

  13:     <div>

  14:         <h1>Title B</h1>

  15:         <p>

  16:             Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  17:             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  18:         </p>

  19:     </div>

  20:     <div>

  21:         <h1>Title C</h1>

  22:         <p>

  23:             Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  24:             Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  25:         </p>

  26:     </div>

  27: </body>

  28: </html>

Note: ‘ve put for example a poem in latin of my authorship.

4. If we navigate the page will see the following

image

Incredible, we have created a simple HTML and ZERO RESPONSIVE page!

5. Then add elements that possesses Bootstrap our website to take advantage of it. In the project we deploy the context menu, select the option “Manage NuGet Packages” and seek by Bootstrap. We select the right and click on “Install”.

image

Big stuff: Bootstrap is Twitter and is pretty obvious in the search results that 1 is not a product of Twitter but… well someone. Beware that you add to your project.

6. Once added the elements of this package our project already has the necessary elements to work with Bootstrap.

image

Update: the next step is not valid, Bootstrap 3.0 is responsive by default. 

7. A detail I saw when I downloaded this pkg is not containing the file “bootstrap-responsive.css” which is which has the styles in responsive mode. We add a file with this name to the project and get the content fromhttp://getbootstrap.com/2.3.2/assets/css/bootstrap.css

8. Now it is to edit the page so it take advantage of some features of Bootstrap. We modify the code to take account of the following

-lines 6, add references to the Bootstrap CSS

-line 10 Add a general DIV to hold the entire contents of the page with the “container” class. This div Add margins to content and adjust it automatically.

-line 11, add a new DIV with the class “row – fluid” that is what contains 3 sections with the content of the page

-line 12, in each DIV put the “col-md-4” class to identify it. (in another post explain how bootstrap mode GRID works or if you want you can see the official help here ))

 1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7:     <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <div class="row">

  12:             <div class="col-md-4">

  13:                 <h1>Title A</h1>

  14:                 <p>

  15:                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  16:                 </p>

  17:             </div>

  18:             <div class="col-md-4">

  19:                 <h1>Title B</h1>

  20:                 <p>

  21:                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  22:                     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  23:                 </p>

  24:             </div>

  25:             <div class="col-md-4">

  26:                 <h1>Title C</h1>

  27:                 <p>

  28:                     Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  29:                     Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  30:                 </p>

  31:             </div>

  32:         </div>

  33:     </div>    

  34:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  35: </body>

  36: </html>

 

9 Ready!

If we navigate to the page and change the size of it would see something similar to this

Bootstrapsample

In the next post I comment on something else already going to ASP.Net MVC projects and stuff because my level off!

References: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#VS2013] HowTo: Crear un website con Bootstrap

image

Hola !

Hoy vamos con un post cortito y espero que la 3G me funcione bien en el AVE cuando tenga que descargar el paquete NuGet. Pues eso, la de hoy es fácil:

Cómo crear un WebSite incluyendo Bootstrap en el mismo

Primero lo primero: ¿conoces Bootstrap? si no lo conoces, deberías.

Bootstrap es un framework creado por Twitter para crear interfaces y website responsives basados en HTML5 y CSS3.

Pues ya está, es un zip que tiene un par de archivos .css y .js. La forma más usual de obtener este package es acceder al site de Bootstrap y darle un click a Download Bootstrap.

image

El zip posee todo lo necesario para poder crear un site aprovechando las capacidades que nos brinda Bootstrap. Sin embargo hay otra forma más elegante de hacerlo que es la siguiente:

1. Crea un website con Visual Studio 2012 o 2013. Para este ejemplo he ocultado el path local y he puesto de nombre al site “BootstrapSample”

image

Esta acción nos crea un website limpio

image

2. Agregamos una página HTML y la llamamos index.html

image

3. Agregamos el siguiente código a la página

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5: </head>

   6: <body>

   7:     <div>

   8:         <h1>Title A</h1>

   9:         <p>

  10:             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  11:         </p>

  12:     </div>

  13:     <div>

  14:         <h1>Title B</h1>

  15:         <p>

  16:             Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  17:             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  18:         </p>

  19:     </div>

  20:     <div>

  21:         <h1>Title C</h1>

  22:         <p>

  23:             Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  24:             Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  25:         </p>

  26:     </div>

  27: </body>

  28: </html>

Nota: he puesto de ejemplo un poema en latín de mi autoría.

4. Si navegamos la página veremos lo siguiente

image

Increíble, hemos creamos una página HTML simple y ZERO RESPONSIVE !!!

5. A continuación agregaremos los elementos que posee Bootstrap a nuestro website para aprovechar las capacidades del mismo. En el proyecto desplegamos el menú contextual, seleccionamos la opción “Manage NuGet Packages” y buscamos por Bootstrap. Seleccionamos el correcto y clic en “Install”.

image

Detallazo: Bootstrap es de Twitter y es bastante obvio en los resultados de la búsqueda que el 1ro no es un producto de Twitter sino de … pues alguien. Cuidado con que agregas a tu proyecto.

6. Una vez agregados los elementos de este paquete nuestro proyecto ya posee los elementos necesarios para trabajar con Bootstrap.

image

Update: en un post me han comentado que desde la versión 3 Bootstrap es responsive by default, con el que eliminaré los pasos innecesarios !!!

7. Un detalle que ví cuando descargué este pkc es que no contiene el archivo “bootstrap-responsive.css” que es el que posee los estilos en modo responsive. Agregamos un archivo con este nombre al proyecto y el contenido lo sacamos desde http://getbootstrap.com/2.3.2/assets/css/bootstrap.css

8. Ahora toca modificar la página para que la misma aproveche algunas capacidades de Bootstrap. Modificamos el codigo teniendo en cuenta lo siguiente

– líneas 6, agregamos las referencias a los CSS de Bootstrap

– línea 10 agregamos un DIV general para contener todo el contenido de la página con la clase “container”. Este div agrega unos márgenes al contenido y ajusta el mismo de forma automática.

– línea 11, agregamos un nuevo DIV con la clase “row-fluid” que es la que contiene las 3 secciones con el contenido de la página

– línea 12, en cada DIV ponemos la clase “col-md-4” para identificar el mismo. (en otro post explico como funciona el modo GRID de bootstrap o si quieres puedes ver la ayuda oficial aquí)

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7:     <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <div class="row">

  12:             <div class="col-md-4">

  13:                 <h1>Title A</h1>

  14:                 <p>

  15:                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  16:                 </p>

  17:             </div>

  18:             <div class="col-md-4">

  19:                 <h1>Title B</h1>

  20:                 <p>

  21:                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  22:                     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  23:                 </p>

  24:             </div>

  25:             <div class="col-md-4">

  26:                 <h1>Title C</h1>

  27:                 <p>

  28:                     Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  29:                     Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  30:                 </p>

  31:             </div>

  32:         </div>

  33:     </div>    

  34:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  35: </body>

  36: </html>

 

9. Listo !!!

Si ´visualizamos la página y cambiamos el tamaño de la misma veríamos algo similar a esto

Bootstrapsample

En el próximo post comentaré algo más ya pasando a proyectos ASP.Net MVC y cositas ya fuera de mi nivel !

Referencias: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Saludos @ AVE

El Bruno

image image image Google

[#CSS] HowTo: Create a WebFont package

Hello!

While the ability to define fonts (fonts) external CSS is from several versions ago, it seems that with CSS3 has been really fashion. The issue is, as with almost everything related to HTML5 and CSS3, in which different there are types of sources and each browser implements which comes out of the tip of the nose. Thus, if we want to do something that is actually multi browser, because we have to implement several different formats for a type of font (font type).

For example, Web Fonts (WOOF) have a license that is structured for use online and in addition there are several services that allow host such sources, for example www.fontsquirrel.com and www.google.com/ fonts.

What usually happens is that if you find a font type that is not in this format, so the best thing you can do is create a package with almost all types of supplies needed to run your source in almost all browsers.

As for that here is an example step by step.

1. For this example, I have chosen the source Acknowledgement from fontsquirrel.

image

2. When I get into the detail of this font, I can see in your licensing model that it does not allow download in other formats (in addition to issues of distribution, use, etc.).

image

3. So I download the OTF, and unzip it. I see that in the ZIP I have an OTF file that you need for the creation of a package of webfonts.

4. From the main menu of FontSquirrel , there is access to “WEBFRONT GENERATOR”. Once inside the same I can add the OTF file that I downloaded in the previous steps.

image

By the way, this is a free service, you should think about donating something… Although it is €1. I do it.

5. The button “DOWNLOAD YOUR KIT” Download us a zip where you will find the different types of formats that we want for this font type and some examples in the html file.

image

6 Ready! We already have our CSS code to download this font in WebFont format

   1: @font-face{ 
   2:     font-family: 'MyWebFont';
   3:     src: url('WebFont.eot');
   4:     src: url('WebFont.eot?#iefix') format('embedded-opentype'),
   5:          url('WebFont.woff') format('woff'),
   6:          url('WebFont.ttf') format('truetype'),
   7:          url('WebFont.svg#webfont') format('svg');
   8: }

Download: www.fontsquirrel.com

Greetings @ Home

El Bruno

imageimageimageGoogle

[#CSS] HowTo: Crear un package WebFont

Hola!

si bien la capacidad de definir fuentes (fonts) externas en CSS está desde hace varias versiones, parece que con CSS3 se ha puesto realmente de moda. El tema está, como con casi todo lo relacionado a HTML5 y CSS3, en que hay diferntes tipos de fuentes y cada navegador implementa la que le sale de la punta de la nariz. De esta forma, si queremos hacer algo que sea realmente multibrowser, pues tenemos que implementar varios formatos diferentes para un tipo de fuente (font type).

Por ejemplo, Web Fonts (WOOF) tiene un modelo de licencia que está estructurado para el uso online y además hay varios servicios que permiten hostear este tipo de fuentes, por ejemplo www.fontsquirrel.com y www.google.com/fonts.

Lo que suele suceder es que si encuentras un font type que no esté en este formato, pues lo mejor que puedes hacer es crear un paquete con casi todos los tipos de fuentes necesarios para que tu fuente funcione en casi todos los navegadores.

Pues para eso veamos un ejemplo paso a paso.

1. Para este ejemplo, he elegido la fuente Acknowledgement desde fontsquirrel.

image

2. Cuando accedo al detalle de esta font, puedo ver en su modelo de licencia que la misma no permite descargala en otros formatos (Además de las cuestiones de distribución, uso, etc).

image

3. Asi que descargo el OTF y lo descomprimo. Veo que dentro del ZIP tengo un archivo OTF que es el que necesito para la creación de un paquete de webfonts.

4. En el menú principal de FontSquirrel hay un acceso a “WEBFRONT GENERATOR”. Una vez dentro del mismo puedo agregar el archivo OTF que he descargado en los pasos anteriores.

image

Por cierto, este es un servicio gratuito, deberías pensar en donar algo … aunque sea €1. Yo lo hago.

5. El botón “DOWNLOAD YOUR KIT” nos descarga un zip donde encontraremos los diferentes tipos de formatos que queremos para este font type y algunos ejemplos de uso en el archivo html.

image

6. Listo !!! ya tenemos nuestro código CSS para poder descargar esta font en formato WebFont

   1: @font-face{ 

   2:     font-family: 'MyWebFont';

   3:     src: url('WebFont.eot');

   4:     src: url('WebFont.eot?#iefix') format('embedded-opentype'),

   5:          url('WebFont.woff') format('woff'),

   6:          url('WebFont.ttf') format('truetype'),

   7:          url('WebFont.svg#webfont') format('svg');

   8: }

Download: www.fontsquirrel.com

Saludos @ Home

El Bruno

image image image Google