SuperSonic7007

En nuestra vida cotidiana precisamos comunicarnos entre nosotros todo el tiempo, pero hemos adoptado malas costumbres para que esta comunicación sea más rápida y cómoda. El olvido de la "ese" al final de las palabras. Si, es difícil. Incluso yo también admito que no puedo controlar esto que más que una mala costumbre pareciera ser un reflejo de la lengua, muchas veces desapercibidas incluso para el oyente. Al prestar un poco de atención a un periodista de televisión notarán que nunca se olvidarán de pronunciarlas. Si ustedes intentan decir algo sin olvidarse de la "ese" al final notarán su habla algo extraña, pero con un poco de práctica se vuelve natural. La escritura por computadora. Seguramente dirán que es mucho más conveniente escribir en la computadora que en papel. Y si, yo estoy totalmente de acuerdo con esta afirmación: La escritura a mano puede llegar a ser agotador, uniforme, desprolijo e insatisfactorio para algunas personas; por otra parte cuando queremos hacer un trabajo en computadora, por ejemplo para la escuela, quien no ha tenido la tentación de hacer "copy paste" (copiar y pegar) y luego el trabajo nos salga imprimido con los links y "Anuncios Google" . Si, así es, ni siquiera nos molestamos en borrarlos. Otra cosa es el corrector automático que con un solo clic corregimos los 100 errores que tuvimos en una hoja de Office Word... y encima con el tamaño de letra configurado en 36. bueno, tampoco para tanto XD, lo cierto es que no tenemos las ganas suficientes para leer cuales fueron nuestros errores para no cometerlos nuevamente en el futuro . No dejemos que la computadora sea más inteligente que nosotros mismos hasta llegar a la dependencia de esta. Los SMS abreviados al máximo. Claro, queremos ahorrar crédito porque las companías celulares son tan caras que te agregan una nueva página cada cinco palabras, pero la cuestión es que en vez de escribir: Hola mi amor, espérame con una rica comida que llego en diez minutos. Besos. Nos queda de esta manera: Hla m amr, spram cn rk cmda q llgo en 10 m. Bsos. Si continuamos de esta manera podríamos llegar al punto en que usemos códigos binarios para los SMS para que sea más rápido XD. Pero es alarmante que comenzáramos a escribir "q" en lugar de "que" por todas partes de tanta costumbre. La mezcla de idiomas. La globalización de hoy en día nos ha llevado a adoptar expresiones de otros lugares del mundo en el habla y la escritura. Yo pienso que no tiene nada de malo ya que suena muy bien : Ese peinado es muy cool. ¿Te cambiaste el look? ¡No me dejaron puntos en mi post...! shit. Hey, ¿what are you doing here? (bueno, tampoco exageremos ) Pero no debemos olvidar hasta que punto se trata de nuestra lengua. Conclución. No nos dejemos llevar por nuestras costumbres al tal punto en que lleguen un día a reemplazar a nuestro idioma que por cierto es uno de los más complicados que hay en el mundo y desperdiciar todo lo que aprendimos en la escuela primaria. Tal vez les parecerá absurdo que llegue a reemplazar un lenguaje pero yo me refiero a la cultura de idioma que poseemos todos y cada uno de nosotros para la comunicación con los demás. Historia del abecedario (Loquendo). SuperSonic7007, Página WEB Oficial

Bueno, el caso es que estaba tan aburrido que comenzé a dibujar en Photoshop los famosos libros mamodos de Zatch Bell. No pensé que me iban a quedar tan bien, por eso los comparto con ustedes. Libro Mamodo Rojo Libro Mamodo Verde Libro Mamodo Azul Libro Mamodo Blanco Libro Mamodo Negro Libro Mamodo Rosa Libro Mamodo Amarillo Libro Mamodo Celeste (mi favorito) Libro Mamodo Marrón Libro Mamodo Verde Oscuro Libro Mamodo Violeta Libro Mamodo Naranja Libro Mamodo Gris Libro Mamodo Multicolor (no existe, pero se ve bien ) Bueno, ahí tienen el libro de los mamodos en todos los colores. Espero que les haya gustado y gracias por ver mi post . SuperSonic7007, Página WEB Oficial

Hoy vamos a aprender a crear botones con hojas de estilos CSS a partir de un vínculo desde cero para decorar una WEB. Comenzando. Como todos sabemos el código HTML de un vínculo sería algo así: <a href="http://www.taringa.net">Ir a Taringa!</a> Sencillo ¿no?, pero el resultado visual sería este: Aburrido... ¿verdad? . Entonces vamos a darle vida con CSS sin necesidad de tener el Dreamweaver para ello, simplemente abrimos el Bloc de notas y comencemos . Nos fijamos primero en la etiqueta del código HTML que queremos estilizar : <a href="http://www.taringa.net">Ir a Taringa!</a> Como vamos a trabajar sobre un vínculo entonces sería la etiqueta a. En el Bloc de notas escribimos lo siguiente: a { } ¿Hasta aquí todo bien?, perfecto : Se escribe el nombre de la etiqueta y luego se abre una llave, dentro de esta irán todas las propiedades. Color (color). Comencemos por algo fácil y le daremos un color a la fuente: a { color: #FF0000; } Se escribe primero la propiedad seguido por dos puntos, luego los parámetros separados por espacios y finalmente cerramos con un punto y coma. En el caso de los colores se utiliza el código hexadecimal que consiste en 6 dígitos desde 0 (más oscuro) a F (más claro). En donde los dos primeros dígitos definen el color rojo los dos del medio al verde, los dos últimos al azul y siempre se comienza escribiendo el símbolo de numeral obteniendo así una mezcla de los tres colores primarios: #FF0000 ¿Dónde lo pongo? Primero guardamos el archivo con el nombre de estilos.css en donde se encuentra nuestra página WEB y luego lo incrustamos en el código HTML entre las etiquetas <head> y </head> de esta manera: <link type="text/css" href="estilos.css" rel="stylesheet"> Podemos ver que creamos un link hacia el fichero tipo (*.css) que hemos guardado en la raíz de nuestro sitio WEB con el nombre de estilos. Ahora en nuestra página aparecerán los vínculos así: Border (borde). Mmm... no cambió mucho . Pues vamos a agregarle más onda en nuestra hoja de estilo . Veamos... ¿qué tal un borde? a { color: #FF0000; border: 2px #0000FF solid; } La propiedad border sirve para esto, dentro de los parámetros se coloca el ancho del borde en este caso 2px (dos píxeles), dejando un espacio el color #0000FF y el estilo del borde solid (sólido). En el caso de los estilos de borde pueden ser: none (ninguno) dotted (punteado) dashed (discontinuo) solid (sólido) double (doble) groove (sombreado) ridge (sombreado inverso) inset (relieve) outset (relieve inverso) Abrimos nuestra página y... Padding (relleno). No se ustedes, pero a mí no me convence . Sería mejor si el borde estuviese más separado de las letras. ¡Ya sé!, vamos a usar la propiedad padding (relleno): a { color: #FF0000; border: 2px #0000FF solid; padding: 5px; } La propiedad padding se usa para, claro, dar más relleno al contenido. En este caso le dimos un relleno de 5px (5 píxeles) arriba, derecha, izquierda y abajo. Veamos como queda: Mucho mejor, pero vendría bien darle un poco más de relleno a los costados modificando la propiedad padding: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; } Un momento ¿¡pero qué hicimos acá!?. Muy sencillo simplemente agregamos al padding cuatro valores en vez de uno separados por espacios para los rellenos de: Primer valor (relleno superior) Segundo valor (relleno derecho) Tercer valor (relleno inferior) Cuarto valor (relleno izquierdo) Dando como resultado: Background-color (color de fondo). Ahora me apetece un color de fondo . Esto lo haremos con la propiedad background-color: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; background-color: #FFFF99; } Font-family (familia de fuente). No lo se... creo que deberíamos cambiarle el tipo de fuente ya que Arial es muy común en estos días ¿no? a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; } La propiedad font-family define el nombre de la fuente de la letra, pero, ¿porqué pusimos 3 fuentes diferentes separadas por comas? . Porque si la PC del visitante no tiene instalada la primer fuente buscará la segunda y si esta tampoco está instalada probará con la siguiente y así sucesivamente. Font-size (tamaño de fuente). ¡O por Dios! , quedó monstruosamente grande, mejor si le cambiamos el tamaño con la propiedad font-size a unos... 12 píxeles: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; } Font-weight (peso de fuente). Ahora quedó demasiado pequeña XD. Vamos a usar font-weight (peso de fuente) para ponerla en bold (negrita): a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; } Text-decoration (decoración de texto). Perfecto . Pero hay algo que me perturba, al igual que el color azul, el subrayado es algo que el navegador lo agrega de forma predeterminada ¿qué tal si lo quitamos?: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; } La propiedad text-decoration nos permite decorar el texto: none (sin nada) underline (con subrayado) overline (con línea superior) line-through (tachado) blink (parpadeante). Combinando 2 o más de los anteriores Background-image (imágen de fondo). ¿Qué les parece si colocamos esta imagen a la izquierda del texto? Esto se logra con la propiedad background-image de CSS: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 20px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); } Se pone la propiedad, luego dos puntos, escribimos url, entre paréntesis el link de la imagen y finalmente cerramos con punto y coma como siempre. Quedando nuestro botón de la siguiente manera: Background-repeat (repetir fondo). Calma calma, que no panda el cunico, esto solamente ocurre porque la imagen se repite. Pero se arregla fácilmente con la propiedad background-repeat: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; } Los parámetros de background-repeat pueden ser: no-repeat (no repetir) repeat (repetir vertical y horizontalmente) repeat-y (repetir verticalmente) repeat-x (repetir horizontalmente) *Nota: Hemos cambiado el padding izquierdo a 40px para que el texto esté más separado de la imagen. Border-radius (radio del borde). ¿No les parece demasiado cuadrado este botón?, sería un poco más agradable a la vista si pudiésemos poner un borde más redondeado. Para esto nos será útil la propiedad border-radius: a { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; } ¡¡¡Wow !!! Quedó muy estético ¿verdad?. Cuánto más píxeles le indiquemos mayor será la curvatura obtenida. Ahora la mala noticia y la razón por la cuál muchos odiamos a Internet Explorer : Es porque este navegador no soporta esta propiedad sino hasta la versión 9, mientras que otros navegadores como Firefox ya la han aplicado. Class (clase). Si queremos tener un botón con la etiqueta a pero que no afecte a a todos los vínculos podemos usar la opción class que sirve para dar un nombre único al estilo: a.boton { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; } Como podemos ver, el nombre del class se ubica después de la etiqueta separado por un punto. Pero ahora el código HTML: <a href="http://www.taringa.net">Ir a Taringa!</a> volverá a representar lo mismo que cuando empezamos: Para que vuelva a tener el aspecto del botón que hemos estado programando necesitamos definirle el class, ya que ahora se llama boton. Entonces agregamos lo siguiente: <a href="http://www.taringa.net" class="boton">Ir a Taringa!</a> Ahora podemos decidir cuáles de los vínculos tendrá forma de botón y cuáles no . Estados. Para que un botón sea un botón ¿no tendría que tener un efecto al pulsar?. Los estados se inventaron justamente para ello y pueden ser los siguientes: link (cuando el vínculo no ha sido visitado) hover (cuando el puntero pasa por encima) active (cuando el puntero hace clic sobre él) focus (cuando el tabulador está activo en él) visited (cuando el vínculo ya ha sido visitado) En nuestra hoja de estilos: a.boton { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; a.boton:hover { } Vemos en el código anterior que cada estado debe definirse individualmente con su propia llave. Y para definir el estado con el que estamos trabajando se ubica el mismo después de la clase separado por dos puntos. Font-style (estilo de fuente). Pondremos en práctica lo anterior dándole un estilo cursiva al texto cuando el puntero pasa sobre el botón: a.boton { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; } a.boton:hover { font-style: italic; } La propiedad font-style es usado para definir esto y puede tener como valores los siguientes: normal (normal) italic (cursiva) oblique (oblicua) Ahora cuando nos situemos sobre el botón, este se vería así: Box-shadow (sombra). La propiedad box-shadow, al igual que border-radius no se visualizará en algunos navegadores como ser el "bendito" Internet Explorer, pero nos da un hermoso efecto de sombreado. Vamos a ponerlo dentro del estado hover, a ver que tal : a.boton { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; } a.boton:hover { font-style: italic; box-shadow: 0px 0px 5px 0px #000000; } Como podrán notar también se define con 4 valores en píxeles y el color separados por espacios: Primer valor (ubicación horizontal de la sombra) Segundo valor (ubicación vertical de la sombra) Tercer valor (tamaño del degradado de la sombra) Cuarto valor (tamaño de la sombra) Dando como resultado... : Sobrescribir parámetros. Seguramente se habrán dado cuenta de que no es necesario volver a escribir todas las propiedades para cada estado, no obstante se pueden modificar en cualquiera de ellos sobrescribiendo los parámetros. Ahora vamos a hacer esto con el estado active: a.boton { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; } a.boton:hover { font-style: italic; box-shadow: 0px 0px 5px 0px #000000; } a.boton:active { color: #FFFF99; background-color: #FF0000; box-shadow: 0px 0px 10px 0px #000000; } En este caso yo invertí los colores de fuente y fondo, agrandé el degradado de la sombra 5 píxeles más, sobrescribiendo los valores anteriores y quedándonos así un botón presionado: Background-position (posición de fondo). Veamos... ¿recuerdan que usamos esta imagen para el background-image? Pero... ¿por qué está el logotipo de Taringa! y más abajo un símbolo de visto? Es para usarla como un sprite. Ya que gracias a la propiedad background-position podemos definir las coordenadas de qué parte del fondo queremos que se visualice. Vamos a establecer el estado visited con la imagen de más abajo: a.boton { color: #FF0000; border: 2px #0000FF solid; padding: 5px 20px 5px 40px; background-color: #FFFF99; font-family: Comic Sans MS, Calibri, Arial; font-size: 12px; font-weight: bold; text-decoration: none; background-image: url(http://k14.kn3.net/65D0EE7C0.png); background-repeat: no-repeat; border-radius: 15px; } a.boton:hover { font-style: italic; box-shadow: 0px 0px 5px 0px #000000; } a.boton:active { color: #FFFF99; background-color: #FF0000; box-shadow: 0px 0px 10px 0px #000000; } a.boton:visited { background-position: 0px -26px; } Background-position se define con dos valores en píxeles: Primer valor (posición horizontal del fondo) Segundo valor (posición vertical del fondo) ¡Ojo! se escriben los valores en negativo En este caso si el visitante ya ha visitado el sitio de Taringa! el fondo se correrá 26 píxeles hacia abajo mostrando el botón de la siguiente forma: Evolución de nuestro botón. Vamos a rever como desde un vínculo sin vida hemos creado un precioso botón agradable a la vista con tan solo 25 líneas de código en CSS y una imagen : Vieron que fácil es programar en CSS. Si desean aprender muchas más propiedades a parte de las dadas en este post les recomiendo esta página http://htmlhelp.com/es/reference/css/properties.html .Es solamente cuestión de imaginación ahora que ya sabes la sintaxis. Espero que les haya sido de ayuda y gracias por leer mi post. SuperSonic7007, Página WEB Oficial

En este post les traigo unas imagenes sobre como serían los navegadores de internet si fueran otra cosa, algunos los hize yo mientras que otros, no está demás volverlos a ver ¿no? . Si los navegadores fueran cuadernos: Si los navegadores fueran armas: Si los navegadores fueran instrumentos musicales: Si los navegadores fueran teléfonos: Si los navegadores fueran viviendas: Ahora les muestro otras que no las hize yo para los que no lo vieron todabía. Si los navegadores fueran mujeres: Si los navegadores fueran embarcaciones: Si los navegadores fueran sillas: Si los navegadores fueran veículos: Si los navegadores fueran alumnos: Bueno, eso fue todo, espero que les aya gustado . SuperSonic7007, Página WEB Oficial

En este post les traigo unos errores de Windows creados por mí, así que no me pueden decir que es repost. Espero que les guste y dejen puntos para llegar a ser full . *Nota: Para los que no les gusta leer en la parte 2 hay un vídeo. Error indeseado. Firewall necesita reparaciones. La tarea de Filosofía. Descarga imposible. Windows pirata. Guerra de buscadores. Windows irrespetuoso. Padres ignorantes. Post crap. La carpeta de nunca jamás. Errores graciosos de Windows (parte 2) http://www.taringa.net/posts/humor/10852856/Errores-graciosos-de-Windows-_parte-2_.html *Nota: Preferentemente dejar puntos en la parte 1 XD. SuperSonic7007, Página WEB Oficial