sábado, 24 de octubre de 2015

Presentación

Buenas:
 He creado este blog-tutorial para enseñar como se usan ciertos programas desde un nivel basico a un nivel medio-alto de soltura concada programa:
  • Photoshop
  • Audacity
  • Avid
  • Scratch
   Para navegar mas sencillo, teneis unas etiquetas a la derecha que al clicar os mostraran solo las entradas del programa que deseeis

Un saludo y espero que os guste, ademas pondre algunos videos propios sobre anime que edito usando Avid.

jueves, 22 de octubre de 2015

HTML 5, primeros pasos

Html 5 es el lenguaje basico de la wolrd wide web, o internet, este lenguaje se usa para crear paginas web, o mas concretamente su contenido, aqui pretendo explicaros poco a poco a escribir en este lenguaje de alto nivel (parecido al ingles en vez de a lenguaje maquina) para empezar necesitamos un programa que nos ayude a escribir el html, notepad ++ por ejemplo.

Lo primero que hay que saber son las partes generales de un texto html5, que son:

Para empezar hay que escribir lo siguiente: <!DOCTYPE html> esta etiqueta nos ayuda a que el navegador nos enseñe correctamente nuetro documento
Despues se escribe <html>
<head> </head> (la primera abre y al ponerle el slash (/) cierra) lo que haya dentro de estas etiquetas es la descripcion de la pagina web, tambien sirve para poner el nombre y el icono a la pestaña del navegador:

 

 tambien se escribe aqui la descripción que sale en los motores de busqueda, es decir:

 


y tambien para alguna cosa mas

<body> </body>
En esta etiqueta es donde va el grueso de nuestra pagina web, todo el texto va aqui

por ultimo escribimos </html> para indicar que hemos terminado el documento


En la proxima entrada os mostraré que hay que escribir dentro de cada una de estas etiquetas principales para que se muestre en el navegador lo que queremos, de momento un pequeño ejemplo con lo visto hasta ahora

<!DOCTIPE html>
<html>
    <head>
    </head>
    <body>
    <body>
</html>


Un saludo y cualquier duda en los comentarios :-)

martes, 20 de octubre de 2015

Html5, primer texto

Dentro de las etiquetas <head> y <body> de html5 hay una gran cantidad de opciones segun que es lo que queramos que ponga, primero os pondre un ejemplo y como quedaria, y despues os explicare que hace cada etiqueta
<!DOCTYPE html>
<html>
<head>
<title> Las fiestas del pilar </title>
</head>
<body>
<h1>Día 1</h1>
<h2>Día 2</h2<h3>Día 3</
<h4>Día 4</h4>
<h5>Día 5</h5>
<h6>Día 6</h6>

<p>El ayuntamiento de aragon os desea diversión</p>
<hr/>
<em>para mas informacion</em>
<mark>999 99 99 99</mark>
<hr/>
<p>grado de diversión</p>
<meter value="2" min="0" max="10"></meter>
</body>
</html>

y quedaria:





 Bien, comenzamos con la explicacion línea a línea
Línea 1 es la etiqueta que hace que nuestro texto lo entiendan los nevegadores
Línea 2 comienzo del documento html
Línea 3 comienzo de la cabezera
Línea 4 etiqueta <title> es la que hace que en la pestaña del navegador ponga Las fiestas del pilar como se ve en la imagen, </title> cierra el titulo
Línea 5 final de la cabecera
Línea 6 principio del cuerpo
Línea 7 etiqueta <h1> indica que quieres escribir con la letra mas grande, se suele usar para titulos, para letras mas pequeñas aumentamos el numero de la h hasta un maximo de 6, de esa forma las siguientes letras son cada vez un poco mas pequeñas, estas etiquetas se terminan tambien con </h1> variando el numero de letra correspondiente
..................
Línea 13 la etiqueta <p> y </p> quiere decir que lo que escribas entre ellas se escribira como texto normal
Línea 14 La etiqueta <hr/> es una etiqueta que se abre y cierra en el mismo sitio, seria lo mismo poner <hr></hr> sin poner nada entre ellas, por lo que poniendo <hr/> te ahorras espacio con cualquier etiqueta y no quieras poner nada en medio, esta concretamente crea una linea hasta el final de la pantalla
Línea 15 La etiqueta <em> es una etiqueta parecida a <p>, solo que esta etiqueta sirve para que se escriba en cursiva (si lo quisieramos en negrita es <b>
Línea 16 Esta nueva etiqueta es bastante util, <mark> sirve para resaltar texto importante como el numero de telefono inventado en el ejemplo de arriba
Línea 17 Otra linea
......
Línea 19 Esta etiqueta, que se usa mucho, sirve para crear una barra con el valor que tu quieras, se escribe de la siguiente manera <meter value="2" (el valor que quieres que represente) min="0" (el valor minimo) max="10"(el valor maximo)></meter> (cierre de meter) de forma que si quieres una barra con un 80%
<meter value="8" min="0" max="10"></meter>
o
<meter value="80" min="0" max="100"></meter>
 o cualquier convinación que se te ocurra
 Las dos ultimas líneas cerramos body y cerramos html



Un saludo, espero que os vaya gustando el ritmo de aprendizaje y cualquier duda, dejadla en los comentarios, para comprobar si veuestro texto html5 es correcto, guardad el notepad como lo que sea.html y despues abridlo con cualquier navegador

lunes, 19 de octubre de 2015

Html5 tipos de listas y links

Buenas:
 Hoy os voy a enseñar como escribir diferentes tipos de listas en html 5, listas sin orden, listas por orden alfabético, numeral.... también os voy a enseñar sobre como poner links a otras paginas, o bien a otros html que tengáis en vuestro ordenador

Este es el texto:
<!DOCTYPE html>
<html>
<body> 
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<ul> 
 <li> cafe</li>
 <li> te </li>
 </ul>

<ol>
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>

<a href="http://www.elpais.com" target="_blank">click aqui</a>
<a href="./listas.html" target="_blank">click aqui2</a>

</body>
</html>

Y quedaria así:




Línea 1: El doctipe para que el navegador reconozca de que estas hablando
Línea 2: Abrimos la etiqueta html
Línea 3: Abrimos la etiqueta body (como se habrán fijado, en este documento no he puesto etiqueta <head>, esta etiqueta es obligatoria, si no la pones el documento esta mal, pero el navegador entiende que se te ha olvidado y lo lee igual, poniéndote de titulo (etiqueta <title> dentro de <head>, lo vimos en el documento anterior) el nombre del documento html
Línea 4: abrimos la lista, esta tiene la característica de que después de cada elemento le puedes poner una descripción, la etiqueta de este tipo de listas es <dt> para los elementos y <dd> para las descripciones, cerrando como siempre con una barra, para abrir este tipo de listas esta la etiqueta <dl>, de forma que queda así:
<dl> (abrimos lista)
<dt>elemento 1</dt>
<dl> descripción 1</dl>
y así sucesivamente con el numero de descripciones por elemento que queramos
......
Línea 11: La etiqueta <ul> abre la lista desordenada, básicamente es una lista con puntos, como se ve arriba, cada elemento va rodeado por la etiqueta <li>, y al finalizar la lista cerramos <ul>
.....
Línea 16: Esta etiqueta es la que abre las listas ordenadas, en este caso es una lista por números, el primer elemento tendrá un 1, el segundo un 2 y así sucesivamente, el inicio de la lista es con <ol> y cada elemento va rodeado de la etiqueta <li>
Si quisiéramos variar esto y que en vez de números fuesen letras mayúsculas por ejemplo, le tendríamos que poner un atributo, un atributo es una cualidad que modifica una etiqueta, de forma que quedaría así 

<ol type="A">
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>

Como podeis ver el atributo es type="A" y va dentro de las <> pues modifica lo de dentro, en este caso modifica que en vez de 1 2 3 la lista sea A B C.... si quisieramos que fuesen numeros romanos seria:
<ol type="I">
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>
.........
Línea 22: Esta etiqueta es bastante mas completa que las anteriores y la seguiremos viendo mas adelante pues tiene varios usos mas, la etiqueta es <a>, y tiene el atributo href, por lo que la etiqueta queda así:
<a href="Pagina a la que queremos referirnos.com">Texto donde estará el enlace</a>
Si lo dejamos así, cuando hagas clic al abrirlo con el navegador, te rediccionará a la pagina desde la misma pestaña en la que estas, si queremos que lo habrá en una nueva pestaña hay que ponerle un atributo mas que es target="_blank" de forma que quedaría así:
<a href="Pagina a la que queremos referirnos.com" target="_blank">Texto donde estará el enlace</a>
Línea 23: Esta etiqueta es la misma que la de arriba, solo que en vez de buscar una pagina externa, buscara una pagina en nuestro ordenador, os vale cualquier otro documento .html que hayáis hecho, de forma que queda así
<a href="./listas.html" target="_blank">click aqui2</a>
<a (para abrir la etiqueta) href= (atributo) "./listas.html" (Esto quiere decir, desde donde esta guardado este documento, busca el archivo llamado listas.html) ./ es la carpeta donde esta guardado tu documento html, si quisiéramos que entrase en una carpeta seria así:
<a href="./carpeta1/listas.html" 
Si quisiéramos que retrocediese una carpeta seria así:
<a href="../carpeta2/listas.html"
El resto ya lo conocemos de la etiqueta anterior, target="_blank" para que abra el link en una nueva pestaña, click aqui2 es el texto que se vera, y </a> para cerrar la etiqueta
....
Luego ya cerramos body y html
Por ultimo comentar, que si se os ve con letras raras vuestro documento html cuando lo ponéis en el navegador, es por la codificación de vuestro navegador, en chrome tenéis que hacer lo siguiente: Abrir el panel de la derecha, bajar hasta mas herramientas, codificación y darle a Unicode(UTF8), que es la codificación de todas las paginas web.
En firefox es parecido

Un saludo, y cualquier duda la responderé en cuanto pueda