Shogun Code: junio 2012

viernes, 29 de junio de 2012

Curso de HTML - Capitulo 3: Saltos de linea y parrafos.

Hola, en este capitulo del curso veremos dos simples etiquetas, la primera crea saltos de linea en nuestro navegador, y la segunda genera párrafos, vamos a la explicación mas especifica de cada una.

¡Salto de linea!

Un salto de linea, es un espacio vertical entre lineas que deja en blanco el sistema al indicarle este comando. Si alguna vez usaron una maquina de escribir entenderán que es un salto de linea.

Bueno vamos con un ejemplo:

Texto sin salto de linea:

 Este texto es solo una prueba. Visita Shogun Code.

Texto con salto de linea:

 Este texto es solo una prueba.
 Visita Shogun Code.

Aquí se puede observar claramente que hay un salto de linea luego del primer punto de la oración.

Para colocar un salto de linea en HTML, contamos que una etiqueta SIMPLE, ¿por que simple?, fácil, este etiqueta no requiere etiqueta de cierre, solo basta con escribir la de apertura por así decirlo.

Su sintaxis es la siguiente:

 <br />

También puede ser de la siguiente manera:

 <br>

Pero la manera mas correcta seria hacerlo de la primera manera por cuestiones de compatibilidad.

¡Parrafo!

Un párrafo es una simple linea de texto, con un salto de linea antes y después del texto, su sintaxis es la siguiente:

 <p>  
   Texto del párrafo  
 </p>

Y se visualizaría de la siguiente manera:

Texto llanoTexto del párrafoTexto llano

Y de esta manera si no fuese un párrafo:

Texto llano
Texto del párrafo
Texto llano

jueves, 28 de junio de 2012

Curso de HTML - Capitulo 2: Entorno de desarrollo,anidamiento de etiquetas y etiquetas básicas

Hola, en este segundo capitulo de este curso de HTML veremos un nuevo entorno de desarrollo, las etiquetas básicas disponibles dentro de esta tecnología, y también veremos como utilizar utilizar apropiadamente los argumentos para darle diferentes características a las etiquetas de HTML.

¡Entorno de desarrollo!

Primero, les recomiendo utilizar el siguiente editor de texto para escribir su código: Notepad ++ Este programa les facilitara mucho el trabajo a la hora de comprender el código, ya que cuenta con diferentes funciones que identifican las etiquetas, que al momento de seleccionar una a su vez también marca su etiqueta de apertura o cerrado, también colorea las letras diferenciando así de texto llano, código, etiquetas, argumentos, etc. Hasta diferencia entre muchos lenguajes de programación, así que este programa les puede ser muy útil.

Pueden apreciarlo en la siguiente imagen:

¡Anidamiento de Etiquetas!

Las etiquetas en HTML se pueden anidar, pero. ¿Que quiere decir esto?.
Anidar etiquetas quiere decir colocar etiquetas dentro de otras, si esto no se hace correctamente puede llevar a muchos dolores de cabeza, ahora pasare a explicar como se realiza correctamente.

Para hacerlo correctamente, por ejemplo. Si queremos anidar una etiqueta dentro de la etiqueta HTML, ninguna de las etiquetas de la etiqueta a anidar, ni la de apertura ni de cierra debe ser colocada fuera de la etiqueta HTML, ya que esto esta mal echo, para hacerlo correctamente ambas etiqueta tienen que estar contenidas dentro de la otra.

Por ejemplo:

 <html>  
     <head> 
     </head>  
 </html>

Donde las dos etiquetas head están dentro de las etiquetas html

Y mal hecho seria de la siguiente manera:

 <html>  
     <head>
     </html>  
 </head>

Donde solo una de las dos etiquetas head esta dentro de las etiquetas html y no ambas.

¡Etiquetas Basicas!

En HTML existen varias etiquetas que incondicionalmente deben existir en todo documento HTML, las cuales definen propiedades basicas de una pagina web, tales como el titulo, la cabecera, el cuerpo, etc.

Ya vimos la etiqueta principal de html, que se llama justamente igual, ahora veremos, head,title y body, y les explicare para que sirven.

Primero veremos la etiqueta head:

 <head>  
      Contenido  
 </head>

Descripcion: Es la cabecera de la web, en ella va todo el contenido de cabecera, como las etiquetas de titulo, etiquetas de estilo, el meta, entre otras cosas que veremos mas adelante.

Etiqueta title:

 <title>  
    Titulo de la pagina
 </title>

Este etiqueta debe ir anidada dentro de la etiqueta head, y en esta establecemos el titulo que le queramos dar a nuestra pagina, quedaría de la siguiente manera:

En nuestro navegador se vería de la siguiente manera:

La siguiente etiqueta es la etiqueta body:

 <body>  
    Contenido  
 </body>

Esta etiqueta debe ir anidada dentro de html, inmediatamente después de la etiqueta head, en ella ira casi todo el contenido de la pagina, ira todo el cuerpo de la pagina, ahora veremos un ejemplo donde imprimimos texto en el navegador, para realizar nuestra primera pagina:

 <html>  
      <head>  
           <title>  
                Blog Shogun Code  
           </title>  
      </head>  
      <body>  
           ¡Esta mi primera pagina!  
      </body>  
 </html>

Lo que esta en rojo es la sintaxis de la etiqueta body, pueden probar creando un documento de texto, copian el código anterior, lo guardan con extensión .html, y lo abren con algún navegador web, como Google Chrome o Firefox, y podran ver el resultado de esta segundo tutorial de HTML.

Eso fue todo por este tutorial no olviden comentar, y espero que le haya servido.

Un saludo.

Shogun.

miércoles, 27 de junio de 2012

Curso HTML - Capitulo 1: Introducción

En este primer de capitulo del curso de HTML vamos a explicar claramente que es HTML y para que sirve.

Wikipedia define a HTML de la siguiente manera: "HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes."

En simple palabras podriamos decir que HTML es un lenguaje de marcardo, donde se utilizan diferentes etiquetas para marcar o definir diferentes secciones de una pagina web. HTML NO es un lenguaje de programación, en el no vemos definición de variables, bucles, ni funciones. Es el lenguaje base utilizado en todas los sitios web existentes.

Bueno, ahora ya sabemos que es y para que sirve HTML, ahora pasemos a explicar la estructura de las etiquetas en HTML.

Como puede observar en esta imagen, una etiqueta tiene muchos componentes, pero no se asusten, son muy fácil de comprender, el primero elemento es la etiqueta de apertura, puede ser de la siguiente manera:

 <etiqueta>

La etiqueta de apertura es formada por el símbolo menor que: "<" luego el nombre de la etiqueta, en este caso "etiqueta"(Solo un ejemplo), y termina con el símbolo mayor que: ">", las etiqueta pueden tener diferentes argumentos, pero eso es algo que explicare en el próximo tutorial. Luego de abrir la primera etiqueta pasamos a cerrarla, es muy similar la sintaxis, la única diferencia es que antes del nombre ponemos un front slash, o barra: "/", y la etiqueta de ciere queda de la siguiente manera:

 </etiqueta>

Luego entre las 2 etiqueta de apertura y de cierre, introducimos nuestro contenido, en este caso nuestro contenido sera solamente texto:

 <etiqueta> Esto es el contenido de la etiqueta </etiqueta>

y esta es la forma en la que queda conformada nuestra primer etiqueta, la etiqueta "etiqueta" no existe en HTML, por lo tanto ahora veremos una etiqueta funcional en HTML.

Esta etiquetas son: <html> y < /html>, con ella estamos indicando a la pagina que todo lo que este entre estas dos etiquetas sera contenido HTML.

Por ejemplo:

 <html>  
      Contenido Html  
 </html>

De esta manera estamos imprimiendo un texto en pantalla.

Para probar el resultado solo basta con escribir el código HTML en un documento de texto y guardar el archivo con la extensión: .html y abrir con algún navegador web.

Bueno eso es todo por este tutorial, pronto subiré mas artículos sobre este tema.

Un saludo.

Shogun.

lunes, 25 de junio de 2012

Tutorial XNA(Transición): Logo que aparece y se desvanece(Fade in Fade Out Screen)

Hola, este es mi segundo post, en este post les enseñare como crear un pantalla de entrada que aparece lentamente y luego se desvanece a negro o al color que quieran.

Primero definimos 3 variables antes de la funcion Game1():

 Texture2D AscendancyLogo;  
 Rectangle AscendancyLogoRec;  
 Int32 BGT = 0;

Una es una textura la llamare AscendancyLogo, la segunda un rectangulo llamado AscendancyLogoRec y un entero llamado BGT.

Luego cargamos la información de la textura y del rectangulo dentro de la funcion LoadContent():

 AscendancyLogo = Content.Load<Texture2D>("Ascendancy Games");  
 AscendancyLogoRec = new Rectangle(0, 0, Window.ClientBounds.Width, Window.ClientBounds.Height);

Cargamos la imagen del logo de entrada, mi imagen se llama "Ascendancy Games", luego creamos un nuevo objeto del rectangulo ya creado, los argumentos son los siguientes: "0,0,Window.ClientBounds.Width,Window.ClientBounds.Height". El primero 0(cero) es la pocision X del rectangulo, el segundo 0 la pocision Y del rectangulo, el tercer argumentos "Window.ClientBounds.Width" es el ancho total del juego, esto adaptara la imagen a el ancho de la pantalla, lo mismo con Window.ClientBounds.Height para el alto.

Ahora pasamos a la función Draw():

 if (gameTime.TotalGameTime.Seconds < 3)  
         {  
           spriteBatch.Begin();  
           spriteBatch.Draw(AscendancyLogo, AscendancyLogoRec, new Color(BGT = BGT + 1, BGT = BGT + 1, BGT = BGT + 1));  
           spriteBatch.End();  
         }  
         else  
         {  
           spriteBatch.Begin();  
           spriteBatch.Draw(AscendancyLogo, AscendancyLogoRec, new Color(BGT = BGT - 1, BGT = BGT - 1, BGT = BGT - 1));  
           spriteBatch.End();  
         }

donde utilizamos los segundos transcurridos en el juego para ir cambiando la transparencia de la imagen, como ven dentro del primer condicional if creamos un nuevo color para la imagen, al crear un nuevo color se introducen 3 argumentos, cada argumento yo lo introduje así: "BGT = BGT + 1" esto quiere decir que cada vez que se ejecute el bucle se ira sumando de a 1 el valor del cada color RGB, como pueden ver en el argumento de la condición dice if (gameTime.TotalGameTime.Seconds < 3) ese ultimo tres indica el segundo cuando se va a cortar la primera transicion(Fade in). Luego en else se hace el mismo proceso pero a la inversa, "BGT = BGT - 1" reducion del valor de los colores RBG hasta 0, que es cuando la imagen queda totalmente desaparecida, esto configurado como lo muestro aquí lleva aproximadamente 6 segundos.

Bueno eso fue todo, esta fue la manera mas simple de encarar este problema que se me ocurrió ya que vi en muchos foros que plantean otras alternativas que conllevan a escribir demaciado codigo.

Espero que les haya servido y no olviden comentar.

Un saludo.

Shogun.

Tutorial XNA(Click): Como crear evento OnClick en XNA

Hola, voy a inaugurar este blog con un tutorial de XNA.

Shogun Code

Páginas