lunes, octubre 28, 2013

Primera web básica con html y css

imagen de nuestra primera web básica Con los conocimientos que ya tenemos vamos a crear nuestra primera página web básica. Y vamos a descubrir el poder del CSS para cambiar la apariencia del HTML.

Lo primero que vamos a realizar es crear un archivo HTML donde vamos a juntar algunas de las partes del curso que ya hemos visto por separado.

Vamos a usar encabezados, tablas, imágenes, enlaces, parrafos, separadores y algunas etiquetas para formatear texto.

En el recuadro inferior teneis el código completo que vamos a usar en el primer paso del tutorial.

Y digo en el primer paso, porque habrá un segundo paso donde podréis comprobar como podemos transformar el "soso" resultado que obtenemos al visualizar nuestro código en el navegador.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- esta etiqueta es necesaria para no tener problemas con los acentos -->
<title>Primera web Básica</title> <!-- Ponemos el título de nuestra web -->
</head>
<body>
<h1>bubbly´s web</h1> <!-- Normalmente en el h1 colocaremos el título de nuestra web -->

<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen de Bubbly" title="hola soy Bubbly">
<!-- ojo con el tamaño de las imágenes, si es muy grande usar el atributo width para adaptarla a vuestra resolucion de pantalla -->
<!-- para ver mi imagen necesitais estar conectados a internet -->
<p>Hola me llamo <em>bubbly</em>, y ésta es mi primera página web. <!-- fijaros en la diferencia entre em y strong -->
Todavía estoy aprendiendo, pero muy pronto me convertiré
en una <strong>ninja</strong> del web-design.
</p>

<hr> <!-- separador horizontal -->

<p> <!-- los parrafos son elementos que se disponen en bloque, ocupan todo el ancho del navegador -->
Voy a demostraros que sé como usar las listas fácilmente.<br>
Para ello os recomendaré mis juegos favoritos.
</p>

<ol title="Lista Ordenada"> <!-- Usamos una lista ordenada -->
<li>Call of Duty: Ghosts.</li>
<li>Batman.</li>
<li>Tomb Raider.</li>
</ol>

<p>También me gustan:</p>

<ul title="Lista No Ordenada"> <!-- Usamos una lista no ordenada -->
<li>Fifa 14.</li>
<li>NBA.</li>
<li>Max paine 3.</li>
</ul>

<hr>

<p>Las imágenes no tienen secretos para mí. Les doy el tamaño<br>
que me interesa.
</p>

<p>
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen bubbly" width="150" title="Imagen con un ancho de 150 px.">
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen bubbly" width="100" title="Imagen con un ancho de 100 px.">
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen bubbly" width="50" title="Imagen con un ancho de 50 px.">
<!-- fijaros que las imágenes son elementos que se disponen en la misma linea , no existe salto entre ellas -->
</p>

<hr>

<p>También conozco las tablas y los enlaces.</p>

<table> <!--creamos una tabla 4 x 2 ( 4 FILAS 2 COLUMNAS) -->

<tr title="Ejemplo de una tabla, en la cual incluimos enlaces.">
<td>Webs.</td>
<td> Dirección.</td>
</tr>
<tr>
<td>En la red.</td>
<td><a href="http://redondelasequeja.blogspot.com">Enlace a En la red.</a></td>
</tr>
<tr>
<td>Facebook</td>
<td><a href="http://facebook.com">Enlace a facebook.</a></td>
</tr>
<tr>
<td>Club Penguin</td>
<td><a href="http://www.clubpenguin.com/es/">Enlace a Penguin.</a></td>
</tr>


</table>

<hr>

<p>Como veis ya soy capaz de unir en una misma página<br>
muchas de las cosas que he aprendido durante el curso.<br>
Pero so voy a contar un secreto.
</p>

<blockquote>
Miguel me ha dicho que<br> lo <strong>bueno</strong> empieza <em>ahora.</em>
<br>
Aprenderemos a darle<br> estilos al HTML. Es decir<br> a usar colores y a colocar<br>
el contenido como<br>a nosotros nos interese.
</blockquote>

</body>
</html>

El resultado que obtendremos en el navegador será el que podeis observar en la imágen inferior.

imagen de nuestra primera web básica

Como se puede observar con el HTML por si solo, el resultado no es muy agradable visualmente.

Pero tenemos una herramienta super-poderosa llamada CSS ( hojas de estilo en cascada ) que consigue que un mismo código HTML se pueda ver en el navegador de formas muy diferentes. La continuación de nuestro curso se centrará en el dominio de las propiedades de CSS, que nos permiten usar colores, tipos de letras, tamaños, colocación de los elementos en la página y muchas cosas más que iremos viendo poco a poco.

Como avance del poder de estas propiedades en el cuadro inferior tenemos un código CSS.

La forma de usarlo es la siguiente:
Debéis copiar el código y lo pegaréis entre las etiquetas <head> .... </head> debajo del tìtulo de nuestra web.

<style>
*{
margin:0;
}
body{
background-color:#999;
font-size:150%;
}
h1{
text-align:center;
color:#32cd32;
background-color:#888;
margin-bottom:20px;
padding:20px;
font-size:3em;
}
img{
margin: auto;
display:block;
}
p{
width:70%;
margin:1% auto;
padding:10px;
border: 5px solid #666;
border-radius: 20%;
background-color: #888;
}
p img{
display:inline;
}
ul, ol{
width:60%;
margin:2% auto;
padding-left:60px;
}

hr{
margin: 20px auto;
width: 70%;
border-top: 1px solid #1AFF06;
border-bottom: 1px solid #F8F800;
}
table{
margin:2% auto;
border-collapse: collapse;
width:70%;
text-align: center;

}
td {
padding: 6px;
border: 1px solid #ccc;
}

tr:nth-of-type(odd) {
background: #eee;
}

blockquote{
width:20%;
margin:2% auto;
border: 5px solid #666;
border-radius: 100%;
background-color: #888;
padding:60px;
text-align: center;
}

a{
text-decoration:none;
font-variant:small-caps;
color:#006600;
padding:5px;
}

a:hover{
background-color:#C49FC7;
color:#fff;
}
</style>

No os asustéis de este código, porque aúnque ahora parezca complicado no lo es en absoluto. Simplemente quiero que lo useis para que comprbéis que lo divertido empieza ahora, y que con poca cosa podemos crear otras muy divertidas.

Tras añadir el código de CSS, nuetro archivo se verá así:

imagen de nuestra primera web básica

Este sólo es un ejemplo muy básico de lo que podemos lograr. A partir de ahora aprenderemos como dar una estructura consistente a nuestros proyectos.


Espero que os ilusione esta nueva etapa porque sé que os va a divertir muchísimo.
Si habeis tenido algún problema sólo tenéis que comentarlo y lo arreglaremos juntos.
Un saludo.

Artículo creado por Miguel Angel. Trabajo creando los contenidos de En la red. Podeis seguirme en

lunes, octubre 21, 2013

Tutorial:crear plantilla de blogger implementando bootstrap 3

Bootstrap 3 Plantilla responsive para blogger

Continuamos con la explicación para usar Bootstrap 3 en Blogger.

Os recomiendo leer el primer artículo para comprender la estructura sobre la que vamos a trabajar.

Tras crear un nuevo blog:

El primer paso será acceder a la plantilla que ha creado Blogger para nuestro blog y borrarla por completo.
Tras realizar esto lo siguiente que debemos hacer es agregar la nueva plantilla con un simple copiar y pegar.

En el código inferior tenemos todo lo necesario para comenzar a desarrollar la plantilla.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<!-- Añadimos las etiquetas necesarias para usar Bootstrap 3 --> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'/>
<script src='//code.jquery.com/jquery.js'/>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'/>

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title>
<data:blog.pageTitle/></title></b:if>

<b:skin><![CDATA[

]]></b:skin>

</head>

<body>
<div id="contenedor-general">
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
</b:section>
</div>

<div id="cuerpo-entradas">
<b:section id="main" class="main" showaddelement="yes">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div>

<div id="columna-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes">
<b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
</b:section>
</div>
<div style="clear:both" />
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes">
</b:section>
</div>
</div>
</body>
</html>

Una vez añadida nuestra plantilla, si visualizamos el blog veremos que sólo aparece el título que le dimos al blog.

imagen blogger sin entradas

Comenzar a añadir las clases de Bootstrap.
Lo primero que haremos será crear la estrucura del layout .
Para ello crearemos dos divs:
Uno con la clase container y otro con la clase row. Y los situamos bajo el div cabecera e inculendo al div cuerpo-entradas, de la siguiente manera .
También añadiremos dos clases:
La clase col-md-8 al div="cuerpo-entradas"
La clase col-md-4 al div="columna-lateral"

<body>
<div id="contenedor-general">
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
</b:section>
</div> <!-- fin cabecera -->
<div class='container'>
<div class='row'>

<div id="cuerpo-entradas" class="col-md-8">
<b:section id="main" class="main" showaddelement="yes">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div> <!-- fin cuerpo-entradas -->

<div id="columna-lateral" class="col-md-4">
<b:section id="sidebar" class="sidebar" showaddelement="yes">
<b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
</b:section>
</div> <!-- fin columna-lateral -->

</div> <!-- fin row -->
</div> <!-- fin container -->

<div style="clear:both" />
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes">
</b:section>
</div> <!-- fin pie-de-pagina-->

</div>
</body>

Si ha salido todo bien, es el momento de añadir un par de entradas. Tras haberlo realizado, nuestro blog se verá de esta manera:

layout bootstrap 3 blogger

Como se ve todo esta saliendo de la manera esperada. Ahora llega el momento de añadir nuestra barra de navegación. Para ello añadiremos este código: Lo haremos en el div id="cabecera" justo bajo:
<b:section id="header" class="header" showaddelement="yes">

<b:widget id='PageList1' locked='false' title='' type='PageList'>
<b:includable id='main'>
<div class='widget PageList navbar navbar-inverse navbar-fixed-top' id='PageList1'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content container'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.navbar-collapse' data-toggle='collapse' type='button'>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>Project name</a>
</div>
<div class='navbar-collapse collapse'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + &quot;_select&quot;'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&amp;#9660;</span>

<b:else/>
<ul class='nav navbar-nav'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>

</b:if></div>
<b:include name='quickedit'/>
</div><!--fin navbar -->
</div><!--fin PageList1 -->
</b:includable>
</b:widget>

Si probamos en este momento como se ve el blog , veremos un par de problemas:
La barra de navegación es demasiado ancha.
Este problema es por culpa del título del gadget de páginas. Si vamos a Diseño y editamos el gadget suprimiendole el título vereis que la barra adquiere el tamaño adecuado.
El otro problema es que la barra se solapa con el título del blog. Esto se soluciona con css. Sólo debemos darle un padding-top de 50px al body.
El blog se verá así :

layout bootstrap 3 blogger

El último paso será el de dar estilo a nuestro título.
Para esto vamos a buscar en la plantilla <div id='header-inner'>
Y lo vamos a incluir entre dos divs, uno clase jumbotron y otro container.

<div class="jumbotron">
<div class="container">

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<p class="lead">Adaptando bootstrap 3 para blogger desde una plantilla básica.</p>
<p><a class='btn btn-primary btn-lg' href='http://redondelasequeja.blogspot.com.es/'>Ver Tutorial</a></p>
</div>

</div><!-- fin container -->
</div><!-- fin jumbotron -->

El resultado final lo podéis ver en esta DEMO


Espero que el artículo os haya sido de utilidad.
En unos días y siguiendo el modelo de esta plantilla veremos como lograr que nuestra página bootstrap no parezca Bootstrap.
Un saludo.

Artículo creado por Miguel Angel. Trabajo creando los contenidos de En la red. Podeis seguirme en

miércoles, octubre 16, 2013

Bootstrap 3 Plantilla responsive para Blogger

Bootstrap 3 Plantilla responsive para blogger
En este artículo veremos como usar Bootstrap 3 en una plantilla para Blogger creada desde cero.
Tras unas cuantas horas de lucha con el código, pero con la inestimable ayuda de Firebug he logrado crear una plantilla para blogger donde poder implementar todo el potencial de bootstrap 3.
Ver la DEMO
Lo primero que vamos a hacer será crear nuestra plantilla para blogger .
Aquí no se pretende explicar en profundidad los entresijos de las plantillas de Blogger. Yo voy a usar una super básica, pero totalmente funcional.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'
 xmlns='http://www.w3.org/1999/xhtml' 
 xmlns:b='http://www.google.com/2005/gml/b' 
 xmlns:data='http://www.google.com/2005/gml/data' 
 xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title>
<data:blog.pageTitle/></title></b:if>

<b:skin><![CDATA[

]]></b:skin>

</head>

<body>
  <div id="contenedor-general">
      <div id="cabecera">
         <b:section id="header" class="header" showaddelement="yes">
             <b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
         </b:section>
     </div> 

      <div id="cuerpo-entradas">
         <b:section id="main" class="main" showaddelement="yes">
             <b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
         </b:section>
      </div>

      <div id="columna-lateral">
         <b:section id="sidebar" class="sidebar" showaddelement="yes">
              <b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
         </b:section>
      </div>
      <div style="clear:both" />
     <div id="pie-de-pagina">
         <b:section id="footer" class="footer" showaddelement="yes">
         </b:section>
     </div>
</div>
</body>
</html>
    


Pequeña explicación del código :
Dentro de los divs ( cabecera, cuerpo-entradas, columna-lateral, pie-de-pagina ) incluiremos el contenido que nos venga en gana .
El resto del contenido nos permite añadir gadgets dentro de cada bloque . Si cambiais "yes" por "no", no podreis incluir gadgets.

Tras subir la nueva plantilla a Blogger debemos añadir Bootstrap. Para ello usamos Bootstrap CDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    

< br /> También añadiremos Jquery

<script src="//code.jquery.com/jquery.js"></script>
    

Es muy importante incluir el jquery antes del bootstrap.min.js , de lo contrario no funcionará .
Ahora llega el momento de crear un par de post y un par de páginas para ver como funciona todo. Como podéis comprobar no se observa nada de Bootstrap por ninguna parte. A partir de este momento es cuando nuestro conocimiento del conocido framework nos conducirá al éxito o al fracaso.
En la demo sólo he incluido un par de gadgets para se vea la estructura de la página
y cada cual pueda seguir maquetando a su gusto.

En el siguiente artículo y con una demo más trabajada avanzaremos en nuestra plantilla. Ahora llega el momento de que vosotros hagáis vuestras propias pruebas.

Artículo creado por Miguel Angel. Trabajo creando los contenidos de En la red. Podeis seguirme en Google +

martes, octubre 08, 2013

“Se ha detenido la aplicación Launcher”

Hoy he tenido un problema con una tablet.Al encenderla aparecía una alerta con el siguiente mensaje.




Tras aceptar y de inmediato el mensaje volvía a mostrarse, y así de modo constante.

Después de un par de horas de búsqueda y lectura en foros ,blogs y demás;llegué a la conclusión de que cuanto más leia ,la opción de vuelo libre de tablet por la ventana ganaba enteros en mi cabeza.

Bromas aparte, y tras descartar todo lo que no me funcionó, aquí os dejo la solución que recuperó mi tablet:
Para solventar el problema debemos pulsar sobre el icono de configuración de pantalla (icono en la parte inferior de la pantalla con 4 flechas en diagonal).



Elegir la primera opción "Stretch to fill screen / Expandir para ajustar" y pulsar en aceptar en la ventana de error.Una vez escogida esta opción la tablet funcionará perfectamente.
Espero que os sea de utilidad.



Artículo creado por Miguel Angel. Trabajo creando los contenidos de En la red. Podeis seguirme en .

Las imágenes en HTML

HTML - Las imágenes .

Imágenes en HTML En este capítulo del Curso de HTML para Niños vamos a descubrir como insertar imágenes en nuestras páginas web .

¿Qué etiqueta usamos para añadir imágenes?
Para colocar imágenes dentro de un documento HTML se usa la etiqueta <img> . Esta etiqueta por si sola no funciona, como sucedía con la etiqueta <a> de los enlaces necesitamos añadirle unos atributos para que funcione correctamente.

Atributos de la etiqueta <img> :
1- Atributo src :
src es la abreviatura de source ( origen ), con él le indicamos al navegador la dirección donde se encuentra la imagen que queremos mostrar .
Al igual que los enlaces, las direcciones pueden ser locales ( guardadas en nuestro sitio web ) o direcciones externas (en otros sitios web ).
La forma de usar el atributo src es la siguiente:

<img src="gato.jpg">  <!-- gato es el nombre de nuestra foto -->

2- Atributo alt :
Este atributo representa un texto alternativo a la imagen. Esto significa que si por cualquier razón, la imagen no fuera cargada por el navegador, se mostraría el texto que le demos al atributo alt.
Este atributo es muy importante para las personas que usan sistemas de lectura para navegar por la Web. Ya que permite convertir a voz el texto insertado con el atributo alt .
En este ejemplo veréis como al no cargar la imagen, se mostrará un recuadro ( representando a la imagen ), y el texto incluido en el atributo alt .

<img src="gatos.jpg" alt="la imagen no existe">

La imagen no existe

3- Atributos width y height :
Representan la anchura ( width ) y la altura ( height ) de la imagen. Si no añadimos estos atributos el navegador en principio usará las medidas originales de la imagen .
La forma de usarlos es la siguiente:

<img src="gato.jpg" width="200" height="200">

gato-html para niños

Si ahora cambiamos el ancho y el alto el resultado será el siguiente:

<img src="gato.jpg" width="150" height="150">

gato-html para niños


Seguro que lo habéis entendido .En la próxima entrega Curso de HTML para Niños comenzaremos a crear nuestra primera página web completa . Para ello aprednderemos como dar estilos a nuestro código html. Si habéis tenido algún problema o duda comentarlo .
Nos vemos .

Artículo creado por Miguel Angel. Trabajo creando los contenidos de En la red. Podeis seguirme en .