viernes, 14 de abril de 2017



MANUALES

TUTORIAL CSS:

Lección 6: Enlaces
Los enlaces en CSS permiten definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos.Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.

¿Qué es una pseudo-clase?

tiene en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.

los enlaces se especifican en HTML con la etiqueta <a>

Todo enlace tiene diferentes estados. Ejemplo, visitado o no visitado, enlaces activos y cuando el cursor se coloca o pasa sobre el enlace.

 Puedes usar una pseudo-clase para asignar diferentes estados:

a:link  (No visitados)
a:visited (visitados)
a:active  (Enlaces Activos)
a:hover   (Cursor sobre el enlace o cuando este pasa sobre el)

 
 a:link {
  color: blue;
 }

 a:visited {
  color: red;
 }
 
 

Pseudo-clase a:link

Enlaces que dirigen a páginas que el usuario no ha visitado.

 
 a:link {
  color: #6699CC;
 }  

Pseudo-clase a:visited

Enlaces que dirigen a páginas que el usuario ya ha visitado

 
 a:visited {
  color: #660099;
 }

Pseudo-clase a:active:

Enlaces que están activos.

 
 a:active {
  background-color: #FFFF00;
 }

Pseudo-clase a:hover

Cuando el puntero del ratón pasa por encima de un enlace.

Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:

 
 a:hover {
  color: orange;
  font-style: italic;
 }

Propiedades que se pueden aplicar a los enlaces:

  • letter-spacing
  • text-transform
Quitar el Subrayado de los Enlaces: Con la propiedad text-decoration:none;


 
 a {
  text-decoration:none;
 }  


MANUALES

TUTORIAL CSS:


Lección 5: Texto

Sangría del texto [text-indent]

Añadir sangría a la primera línea de dicho párrafo. Se coloca la medida en px.

En el ejemplo siguiente se ha aplicado una sangía de 30px a todos los párrafos de texto marcados con la etiqueta <p>:


 
 p {
  text-indent: 30px;
 }
 
 

Alineación del texto [text-align]

text-align es el equivalente al atributo align usado en versiones anteriores de HTML. 

Valores para esta propiedad:

left(texto alineado a la izquierda).
right (texto alineado a la derecha).
center (texto con alineación centrada). 
justify(alineación justificada).


 
 th {
  text-align: right;
 }

 td {
  text-align: center;
 }

 p {
  text-align: justify;
 }
 
 

Decoración del texto [text-decoration]

Añade diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el textotacharlo o ponerle un subrayado superior


Valores: 
·         underline: Subrayado.
·         overline: Subrayado por encima del texto.
·         line-trough: texto tachado.

 
 h1 {
  text-decoration: underline;
 }

 h2 {
  text-decoration: overline;
 }

 h3 {
  text-decoration: line-through;
 }
 
 

Espaciado entre caracteres [letter-spacing]

Espaciado entre caracteres de texto; separa las palabras. Su valor: El ancho deseado (px)
 h1 {
  letter-spacing: 6px;
 }

 p {
  letter-spacing: 3px;
 }
Transformación del texto [text-transform]

Controla la escritura en mayúsculas de un texto. 
Puedes elegir entre los valores capitalizeuppercase o lowercase, sin importar cómo 
aparece el texto original en el código HTML.
 
Valores:
capitalize
Pone en mayúscula la primera letra de cada palabra. 
uppercase
Convierte todas las letras a mayúscula. 
lowercase
Convierte todas las letras a minúscula. 
none
No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido 
HTML.

 
 h1 {
  text-transform: uppercase;
 }

 li {
  text-transform: capitalize;
 }
 
TOMADO DE: http://es.html.net/tutorials/css/lesson5.php

MANUALES

TUTORIAL CSS:

Lección 4: Fuentes

Familia de fuentes [font-family]

Establece una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una página web. Si la primera fuente de la lista no está instalada en el ordenador desde el que se accede al sitio, se seguirá probando con la siguiente fuente hasta encontrar una fuente apropiada.


CLASIFICACIÓN DE FUENTES: 



Para Listar fuentes:  Se empieza por la preferida, luego algunas fuentes alternativas. Se completa la lista con una familia de fuentes genéricas.

Un ejemplo de lista de fuentes por orden de prioridad podría tener este aspecto:


 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif;}


Estilo de la fuente [font-style]

Define la Fuente elegida bien con el valor (propiedades): normal, italic, oblique.

En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecerán en cursiva.

 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif; font-style: italic;}
 

Variante de fuente [font-variant]

Elegir entre las variantes normal o small-caps (versalita) de una fuente; las letras en mayúsculas son mas pequeñas que el tamaño común.

Si se establece el valor small-caps y no hay disponible una fuente en versalita, el navegador probablemente mostrará el texto en mayúscula.

Ejemplo:

 h1 {font-variant: small-caps;}
 h2 {font-variant: normal;}
 

Peso de la fuente [font-weight]

Describe qué intensidad o "peso" en negrita debería tener la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de números entre 100 y 900 (de cien en cien) para describir el peso de dicha fuente.

 p {font-family: arial, verdana, sans-serif;}
 td {font-family: arial, verdana, sans-serif; font-weight: bold;}
 

Tamaño de la fuente [font-size]

Se establece el tamaño de la fuente.
Existen muchas unidades diferentes para describir el tamaño de la fuente (por ejemplo, píxeles y porcentajes
'px' y 'pt' : Tamaño de la fuente de forma absoluta.
'%' y 'em' : Según el usuario considere oportuno. Ajustable.
 Como ejemplo, podemos incluir:

 h1 {font-size: 30px;}
 h2 {font-size: 12pt;}
 h3 {font-size: 120%;}
 p {font-size: 1em;}
 


Combinación de propiedades [font]

Incluir todas las propiedades diferentes relativas a fuentes en una única propiedad.
el código se puede simplicar así:

 p {
  font: italic bold 30px arial, sans-serif;
 }

TOMADO DE: http://es.html.net/tutorials/css/lesson4.php


MANUALES

TUTORIAL CSS:

Introducción: Las hojas de estilo en cascada (CSS, acrónimo de Cascading Style Sheets) son una herramienta fantástica para añadir presentación a los sitios web.

¿Qué software necesito?:

Evita, por favor, usar software tal como FrontPage, DreamWeaver o Word con este tutorial. Todo lo que necesitas es un editor de texto sencillo y gratuito.

Ej: Bloc de Notas- Windows.
     Pico-Linux
     Simple Text-Macintosh.

Lección 1: 

¿Qué es CSS? : CSS es el acrónimo de Cascading Style Sheets (es decir, hojas de estilo en cascada).

USOS: 
  • Define la presentación de los documentos HTML.
  • CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas.

¿Qué diferencia hay entre CSS y HTML?

HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.

¿Qué beneficios me ofrece CSS?
  • control de la presentación de muchos documentos desde una única hoja de estilo;
  • control más preciso de la presentación;
  • aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
  • numerosas técnicas avanzadas y sofisticadas.

Lección 2: 

¿CÓMO FUNCIONA CSS?

SINTAXIS BÁSICA DE CSS:

Digamos que queremos un bonito color rojo como fondo de nuestra página web:

Usando HTML podríamos haberlo conseguido así:

<body bgcolor="#FF0000"> 
Con CSS el mismo resultado puede lograrse así:

body {background-color: #FF0000;}


Aplicando CSS a un documento HTML:


Podemos aplicar CSS a un documento HTML de tres maneras diferentes. 

Método 1: En línea (el atributo style)

Se usa el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:

 <html>
   <head>
  <title>Ejemplo</title>
   </head>
   <body style="background-color: #FF0000;">
  <p>Esta es una página con fondo rojo</p>
   </body>
 </html>
 

Método 2: Interno (la etiqueta style)

Se usa  la etiqueta HTML <style>. Por ejemplo, así:

 <html>
   <head>
  <title>Ejemplo</title>
  <style type="text/css">
    body {background-color: #FF0000;}
  </style>
   </head>
   <body>
  <p>Esta es una página con fondo rojo</p>
   </body>
 </html>
 

Método 3: Externo (enlace a una hoja de estilo)

Enlazar con lo que se denomina hoja de estilo externa. 

Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.

Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:

Crear un vínculo desde el documento HTML (por ejemplo, default.html) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:

 <link rel="stylesheet" type="text/css" href="style/style.css" />
 

La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:

 <html>
   <head>
  <title>Mi documento</title>
  <link rel="stylesheet" type="text/css" href="style/style.css" />
   </head>
   <body>
   ...
 

Se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentación de muchos documentos HTML.

Lección 3: Colores y Fondos 

Color de primer plano: la propiedad 'color'.

La propiedad color describe el color de primer plano de un elemento.


 h1 {
  color: #ff0000;
 }
 
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).

La propiedad 'background-color'

La propiedad background-color describe el color de fondo de los elementos.

El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.

También se pueden aplicar colores de fondo a   los encabezados y al texto. 
En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.


 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Imágenes de fondo [background-image]

La propiedad CSS  background-image  se usa para insertar una imagen de fondo.

Para insertar una imagen de fondo de una página web, aplica sencillamente la propiedad background-image  al elemento <body> y especifica la localización de la imagen.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
NOTA: También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif").

Repetir la imagen de fondo [background-repeat]

por defecto, la imagen se repite tanto en el eje horizontal como en el vertical para ocupar toda la pantalla. La propiedad background-repeat controla este comportamiento.

La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.



Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:


 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Fijar la imagen de fondo [background-attachment]

La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.

Imagen de fondo fija:  no se moverá con el texto cuando el lector se desplace por la página
Imagen de fondo no fija: se desplazará con el texto de la página web.


Dos valores posibles para la propiedad background-attachment


Por ejemplo, el siguiente código fijará la imagen de fondo.



 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

Ubicación de la imagen de fondo [background-position]

Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. 

La propiedad background-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.

Conjunto de coordenadas. 

Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.

Se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). 





El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:



 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }


Combinación de propiedades [background]

Usando background se puede lograr el mismo resultado con una única línea de código, es agrupar las diferentes propiedades para abreviar el código CSS, separadas por espacios en blanco:


 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. 

jueves, 13 de abril de 2017


MANUALES

TABLA DE CONVERSIÓN HEXADÉCIMAL, BINARIO Y DECIMAL:


 http://hextodecimal.com/index.php:  Allí se encuentra la tabla.

Un número hexadecimal tiene base 16 (0,1,2,3,4,5,6,7,8,9 A, B, C, D, E, F).

Ejemplo:

Hex 80 to decimal explained:

The value of HEX 80 in decimal is 128.
The value of HEX 80 in binary is 10000000.
00 X 160 =0
88 X 161 =128
HEX 80 =128
the binary value is: 10000000





Tomado de: 
 http://hextodecimal.com/index.php:


¿QUÉ SIGNIFICA SER GEEK?

Geek (del inglés geek, pronunciado "guic".) es un término que se utiliza para referirse a la persona fascinada por la tecnología y la informática. El término «geek» en español está relacionado sólo con la tecnología, a diferencia del uso del término geek en inglés.

DEFINICIONES:
Es un término originariamente anglosajón y, según el glosario de argot hacker «Jargon File», en sus inicios parece ser que se refería a un fanático de un personaje de carnaval.

DIFERENCIA ENTRE GEEK Y NERD:

Un Nerd es estereotipado como aquella persona que tiene una inteligencia sobresaliente que tiene hábitos y gustos diferentes a los socialmente establecidos como "comunes". En cambio, se dice que un Geek es aquel que tiene una fascinación o un gusto por un área de interés muy específica. Eso quiere dar a mostrar que un geek no necesita esa inteligencia sobrenatural que se cataloga dentro de un Nerd, pero si un geek está interesado en algunas partes poco conocidas de las matemáticas y las ciencias también sería una persona sumamente inteligente.

Algo que diferencia a un geek de otros es que el Internet y la tecnología son usados como medio de expresión cultural de su interés, ya sea sobre animación, cómics, videojuegos, software, etc. Son creadores de sus áreas de interés, si son fanáticos de los cómics ellos elaboran sus propias historias o crean teorías sobre los personajes de sus videojuegos favoritos o crean sus propios programas de computadora y los difunden.


Seguramente la mayoría de los Nerds son Geeks de alguna forma y viceversa. En algunos casos, un Geek puede definirse como un nerd con una vida social normal.

INDIVIDUOS GEEK:

El geek prefiere la concentración, la dedicación hacia sus intereses, trabajo o aficiones —las cuales normalmente son de carácter tecnológico— y la imaginación; Se entiende que para una persona geek no importa demasiado el grado de extravagancia que conlleva el aprendizaje o tiempo invertido en sus habilidades.

Término geek más allá para convertirse en un estilo de vida del cual, el sujeto suele sentirse orgulloso; tiene una visceral neofilia (atracción por la tecnología y curiosidad generalizada por lo nuevo).

Suelen mantener códigos de comunicación cerrados generalmente tendentes al aprecio por la programación, la ciencia ficción, las redes de información y los videojuegos. Así como códigos de conducta estrictos, centrados en la libertad de expresión y el respeto por los demás; aunque suele adaptar comportamientos algo más radicales.

Los geek suelen ser aficionados y apuestan por el software libre y los sistemas operativos tipo UNIX como, por ejemplo, GNU/Linux, BSD, y Solaris, aunque existe una importante legión de estos que muestra gran entusiasmo por los productos de Apple. Son librepensadores.


Los sitúan como un grupo social preferentemente endémico.

Capacidades Técnicas:

Cuentan con habilidades técnicas, en el área de la informática, sea por vocación temprana o por dedicación. Y suele entender el término hacker con el respeto que implica un grado más alto en el escalafón del ámbito de la tecnología.

Aunque muchos de ellos puedan ser hackers resulta difícil que se reconozcan a sí mismos como tales puesto que, llamarse a sí mismos geeks, representa un cierto tinte de humildad. El término hacker suele emplearse como mérito obtenido por el reconocimiento y aceptación de una comunidad geek. Muchos geeks intermedios son denominados wanna be (jerga en voz inglesa que significa «quisiera llegar a ser») ubicándose así dentro del tipo de los geek que podrían llegar a convertirse en hackers.

Hacker Colaborativo:

Suelen tender hacia prácticas colaborativas que les permiten hacer partícipes a los demás de sus logros personales por el mero hecho de compartir el conocimiento. Garantizar su propio derecho a alimentarse de ideas de un modo libre y sin las barreras que imponen ciertos esquemas legales tendientes a monopolizar o cerrar el acceso público a la tecnología.


Por ejemplo, la organización sin ánimo de lucro Free Geek (Portland, Estados Unidos), se dedica a reciclar tecnología informática para proporcionar, de forma libre y gratuita, acceso a la misma y formación profesional para sectores de la población que lo necesiten a cambio de servicios comunitarios.

Tomado de: