DASSoporte
Usuario (Venezuela)
Buenas Tardes Taringueros, esto es a peticion de usted, debido a los MP y a los Comentarios en mis anteriores post. Voy a desarrollar un guia de la manera mas sencilla posible, esto es una recompilacion de mis libros de estudio y tratandolo de explicarselo a ustedes, cabe destacar que la guia va a hacer sacada de los libros que poseo. La guia se va a divir en tres secciones: 1. El HTML 2. El CSS 3. El JavaScript Cada seccion se va a subdivir en varios modulos, va a hacer un guia una poco extensa pero les aseguro de que cuando complete la guia ustedes van a poder ser capaces de crear un pagina web, como las mas profesionales, vamos a dejar a tras las guias basicas que por ejemplo traen un codigo basico que dice <p>Esto es un TEXTO</p> Vamos a dejar eso atras y para las demas web, que tienen sus guias ya de años anteriores, yo pretendo enseñarle algo mas de una vez con ejemplos mejor estructurados. Pero antes de todo necesitamos conocer toda la historia de lo que vamos a trabajar, en eso se va a basar esta primera guia. Entonces empesemos con la primera seccion, modulo 1: 1. Seccion 1: -El HTML Modulo 1: -Que es la Web -Introduccion a las URI'S -Que es el HTML -Breve Historia del HTML Seccion 1: El HTML Modulo1: ¿Que es la Web?: El World Wide Web, o simplemente el web, es una red mundial de recursos1 accesibles mediante la red Internet. El web funciona gracias a tres mecanismos distintos aunque relacionados entre sí: *Un esquema que permite nombrar un recurso de forma única en todo el mundo (el URI). Por ejemplo, http://giworks.uniovi.es/cursos/cursos.shtml se refiere a un único recurso (en este caso un documento con información sobre los cursos que imparte el grupo GIworks) y ningún otro recurso del mundo puede llamarse de la misma forma. * Protocolos que permiten acceder a los recursos; en el caso del web el protocolo HTTP (Protocolo de Transferencia de HiperTexto). Por ejemplo, el URI anterior indica al navegador que el recurso es accesible mediante e protocolo HTTP. * El lenguaje HTML que permite desarrollar documentos hipertextuales gracias a los cuales se pueden enlazar unos documentos con otros, “tejiendo” esa red virtual que es el web. La historia del web es pareja a la historia del lenguaje HTML que se describe en el punto. Introduccion a las URI'S: Como ya se mencionó en el punto anterior, uno de los mecanismos en los que se basa el web es aquel que permite que cada recurso tenga una dirección única mediante la cual es accesible. Esta dirección se codifica mediante un Identificador Universal de Recursos (URI). Los URI’s se componen, generalmente2, de tres partes: * El esquema de acceso al recurso. * El nombre de la máquina donde se encuentra físicamente el recurso. * El nombre del recurso propiamente dicho. Analicemos el URI que se utilizó como ejemplo en el punto anterior: http:// giworks.uniovi.es /cursos/cursos.shtml. Podría traducirse de la forma siguiente: en la máquina giworks.uniovi.es, existe un documento accesible mediante el protocolo HTTP, en el camino /cursos/cursos.shtml. Como se verá más adelante, en los documentos HTML pueden emplearse muchos otros tipos de URI’s, para transferencia de ficheros, envío de correo, acceso a grupos de noticias... ¿Que es el HTML? El HTML (Lenguaje HiperTextual de Etiquetas) es un lenguaje estandarizado (esto es conocido y empleado por todos de la misma forma) para describir documentos de texto que contienen referencias a otros documentos; estas referencias permiten acceder a dichos recursos y se conocen con el nombre de enlaces. La última versión del lenguaje permite al autor de documentos HTML: * Crear documentos con un formato análogo al de una publicación impresa (títulos jerárquicos, estilos de texto, tablas, listas, imágenes, etc.). * Establecer enlaces que permiten al lector de sus documentos acceder a otros recursos (documentos HTML, vídeo, sonido...) mediante un click de ratón. * Diseñar formularios para recibir información del usuario, realizar transacciones, hacer búsquedas, etc. Breve Historia del HTML: El lenguaje HTML, así como el protocolo que lo soporta, el HTTP, fueron desarrollados por Tim Berners-Lee en el CERN (Centro Europeo de Investigaciones Nucleares) a finales de 1989, principios de 1990. La motivación que llevó a desarrollar este sistema fue la necesidad de compartir información entre los físicos de alta energía que trabajaban por todo el mundo. El lenguaje fue popularizado por el navegador Mosaic del NCSA (Centro Nacional para Aplicaciones de Supercomputación) y supuso la eclosión del web. Desde entonces las distintas versiones del lenguaje se han sucedido para incorporar nuevas características y posibilidades al mismo. A la especificación del lenguaje hecha en el CERN siguieron HTML 2.0 (1995), HTML 3.0 (también en 1995), HTML 3.2 (1997), hasta llegar a la versión 4.0 (última revisión en abril de 1998). Las diferentes versiones del lenguaje tienen los siguientes inconvenientes: * Los cambios introducidos no siempre fueron del todo adecuados pues en muchas ocasiones se hicieron para soportar “extensiones” introducidas de forma unilateral por los principales vendedores de navegadores (Netscape y Microsoft). * Ningún navegador soporta por completo la última versión estandarizada y/o lo hace de forma incorrecta. * Sigue habiendo extensiones propietarias que la marca rival no soporta. Sin embargo, esto no debe desanimar de ningún modo al lector puesto que, a pesar de tales inconvenientes, se pueden desarrollar páginas web magníficas sin necesidad de recurrir a las opciones avanzadas (y no implementadas) de HTML 4.0 ni emplear extensiones propietarias. Ok este sera el primer modulo de la guia, basicamente es la historia de lo mas destacado en un pagina web, el proximo modulo no lo he hecho aun pero lo hare lo mas pronto posible. Mantenganse informados porfavor y veremos si este proyecto llama la atencion seguiremos adelante. Cabe destacar que el otro post fue eliminado porque me equivoque de categoria
Bueno Señores y Señoritas si acazo alguna chica esta viendo esto, seguiremos un poco mas adentro con la guia, hoy no voy a dar casi introduccion estoy un poco canzado el dia fue de trabajo fue muy duro, asi que hiremos directamente a la guia. En este el Capitulo 3 de la guia conoceremos las listas ordenas y no ordenadas al comienzo, okey sin mas nada que decir empezemos: Capitulo 1: El HTML Modulo 2: Listas Ordenadas y No Ordenadas: Listas Ordenadas y No Ordenadas: Las listas regulares pueden ser ordenadas y no ordenadas; el nombre no hace referencia a la existencia (o inexistencia) de un orden interno en la enumeración sino al ítem que precede a cada elemento de la lista: en el primer caso se trata de un número, generalmente, mientras que en el segundo aparece una viñeta. La etiqueta <LI> es común a ambos tipos de lista, precediendo a cada elemento de la enumeración. La sintaxis general de las listas regulares es la siguiente: <apertura de lista> <LI> elemento 1 de la lista <LI> elemento 2 de la lista <LI> elemento n de la lista <cierre de lista> La diferencia, obviamente, entre una lista ordenada y otra no ordenada reside simplemente en las etiquetas de apertura y cierre de la lista. Para el caso de una lista ordenada se emplean las etiquetas <OL>...</OL> (ordered list); mientras que para listas no ordenadas se utilizan <UL>...</UL> (unordered list). Lista <B>no ordenada</B> de 3 elementos: <UL> <LI>Pinta <LI>Niña <LI>Santa Maria </UL> Lista <B>ordenada</B> de 5 elementos: <OL> <LI>Miranda <LI>Ariel <LI>Umbriel <LI>Titania <LI>Oberón </OL> 3.1 Listas descriptivas Como ya se dijo, las listas descriptivas permiten crear glosarios; por tanto, cada elemento de la lista tendrá dos partes, la primera será el elemento a describir y la segunda la descripción del mismo. Para poder hacer esto en HTML se precisan tres etiquetas: una para indicar que se trata de una lista descriptiva, <DL>, otra para el nombre del elemento a describir, <DT>, y finalmente otra para la descripción del mismo, <DD>. <DL> <DT><B>CARON</B> o <B>CARONTE,</B> <DD>personaje de la mitologia griega, etrusca y romana que ayudaba a losmuertos a cruzar los rios infernales a cambio de un obolo. De ahi la costumbre, extendida entre griegos y romanos, de colocar una moneda en la boca de los difuntos. <DT><B>CARONA,</B> <DD>n.f. Manta, tela o almohadilla que se pone entre la silla o albarda y el sudadero para que no se lastimen las caballerias. <DT><B>CARONI,</B> <DD>r. de Venezuela (Bolivar), el mayor afluente del Orinoco; 925 km. Destaca por las diferencias de amplitud y por los saltos (Saltos del Caroni, de 2.750 m de long.). Su gran potencia hidraulica es aprovechada en parte por las centrales de Macagua y Guri. </DL> 3.2 Visualización de listas Los navegadores tienen unas opciones por defecto a la hora de representar los ítems que preceden a las listas ordenadas y no ordenadas; sin embargo el autor de documentos HTML puede indicar sus preferencias mediante un atributo de las etiquetas <UL> y <OL> denominado TYPE. Dicho atributo puede tomar los siguientes valores para listas no ordenadas: DISC, CIRCLE y SQUARE; y para las listas ordenadas: 1, a, A, i e I. Distintos tipos de visualizacion de listas <B>no ordenadas</B> <UL TYPE=DISC> <LI>DISC </UL> <UL TYPE=CIRCLE> <LI>CIRCLE </UL> <UL TYPE=SQUARE> <LI>SQUARE </UL> Distintos tipos de visualizacion de listas <B>ordenadas</B> <TABLE><TR> <TD> <OL TYPE=1> <LI>1 <LI>1 <LI>1 </OL> </TD> <TD> <OL TYPE=a> <LI>a <LI>a <LI>a </OL> </TD> <TD> <OL TYPE=A> <LI>A <LI>A <LI>A </OL> </TD> <TD> <OL TYPE=i> <LI>i <LI>i <LI>i </OL> </TD> <TD> <OL TYPE=I> <LI>I <LI>I <LI>I </OL> </TD> </TR></TABLE> Como puede observar el lector, en el código anterior aparecen una serie de etiquetas nuevas; una de ellas, <TABLE>, indica que se está construyendo una tabla, el tema del siguiente capítulo; sin embargo, antes de pasar al mismo será mejor practicar lo visto hasta ahora y para ello nada mejor que hacer el primer ejercicio del curso. Podrian crear y diseñar sus propias listas y usar lo vistos en los ateriores post Las tablas no sólo se emplean para tabular datos sino también para un diseño llamativo. HTML no es un lenguaje de diseño de páginas sino de documentos; sin embargo, esto no es obstáculo para que un autor de páginas web pueda lograr un buen diseño mediante un uso adecuado e imaginativo de las tablas. Esto es bastante basico para los lectores de Taringa que sepan pero para los que quieren aprender sera de bastente ayuda. Recuerden ir practicando todo lo que llevamos visto, para que se vayan familiarizando con todo, si ves hasta ahora este post deberias ver los anteriores, es mi recomiendacion para ustedes.
Ok, en el anterior capitulo conocimos la historia de la Web, de las URI's y del HTML, ahora que ya conocemos su historia y presedentes, continuaremos y entraremos un poco mas a fondo con respecto al HTML; Empezaremos por lo basico del HTML, conocer mas a fondo su estructura: Nos mantendremos en el Capitulo 1: El HTML; pero pasaremos al Modulo 2: La Estructura del Documento. Entonces empesemos: Capitulo 1: El HTML Modulo 2: La Estructura del Documento: 2.1 Las Etiquetas HTML El lenguaje HTML no es un lenguaje de descripción de páginas; se limita a describir la estructura y el contenido del documento y no el formato de la página y su apariencia. Esto se logra encerrando cada porción del texto entre un par de etiquetas, una de apertura y otra de cierre, que no son visibles en el momento de visualizar el documento aunque afectan a su visualización. En HTML las etiquetas se delimitan con los signos “<” (menor que) y “>” (mayor que); todo esto quedará más claro con un ejemplo: <h1>Esto es un Encabezado</h1> Esto no. 2.2 Estructura de un documento HTML Todos los documentos HTML comienzan con la etiqueta <HTML> y terminan con la etiqueta </HTML>. Además, se dividen en dos zonas: la cabecera y el cuerpo; estas zonas se delimitan con las etiquetas <HEAD>...</HEAD> para la cabecera y <BODY>...</BODY> para el cuerpo del documento. En la cabecera se incluye diversa información sobre el documento que no afecta a la apariencia del mismo en el navegador; por el momento sólo se verá una etiqueta relacionada con la cabecera y que permite dar un título al documento. El título es un texto “plano” delimitado por las marcas <TITLE>...</TITLE> y que debe identificar al documento. Aunque no se limita la longitud del título ésta no debe ser excesiva pues podría ser truncado por el navegador perdiendo el sentido; tampoco se debe ir al otro extremo, pues títulos excesivamente cortos no facilitan al usuario la tarea de identificar la naturaleza del documento. El contenido del documento reside en el cuerpo que, como ya se vio, está delimitado por las marcas <BODY>...</BODY>; por el momento no es necesario saber más sobre esta zona puesto que en los siguientes puntos se tratará en profundidad. Antes de avanzar más en el conocimiento del lenguaje se hace necesario presentar dos conceptos muy importantes. El primero es el de comentario, aquel texto cuya misión es facilitar la comprensión del código a la persona que vaya a leerlo pero sin ser visible para el usuario; en HTML los comentarios se encierran entre los símbolos <!-- y -->. El lector debe acostumbrarse al uso de comentarios puesto que un código bien comentado es un código fácil de leer y, por tanto, fácil de mantener. El otro concepto es el de atributo, un atributo permite modificar el comportamiento de las etiquetas, el comportamiento puede ser modificado en algunos casos con sólo añadir el atributo, aunque en la mayor parte de los casos se requiere un valor que se asigna mediante el signo “=”. Si una etiqueta admite varios atributos estos se indican como una lista separada por espacios en blanco. Por ejemplo: <etiqueta atributo1 atributo2=valor2 atributo3=valor3>...</etiqueta> 2.3 Jerarquía del documento Cuando se escribe un documento no se proporciona todo el contenido de forma continua sino que se estructura en capítulos, apartados y párrafos; cada una de estas partes puede llevar títulos con estilos diferentes para indicar un nivel distinto en la jerarquía del documento. 2.4 Títulos En HTML se dispone de seis niveles para la jerarquía de títulos; para mostrar un título se encierra el texto del mismo entre las etiquetas <Hn>...</Hn> donde n varía entre 1 (el nivel más alto de la jerarquía) y 6 (el nivel más bajo). El texto delimitado por dichas etiquetas se muestra en negrita y el texto que lo sigue comienza en un párrafo nuevo. Estas etiquetas sólo se deben utilizar para títulos de apartados, es decir, con la única finalidad de estructurar el texto y nunca para cambiar el estilo de texto dentro de párrafos. <h1>Titulo 1</h1> <h2>Titulo 2</h2> <h3>Titulo 3</h3> <h4>Tirulo 4</h4> 2.5 Saltos de línea y párrafos Los navegadores al interpretar código HTML ignoran los saltos de línea y muestran el texto de forma continua cortando las líneas en función del ancho de la ventana de la aplicación. Cuando el autor de un documento HTML quiere introducir un salto de línea debe utilizar la etiqueta <BR>, esta etiqueta no tiene cierre. Sin la etiqueta Taringa sitio de reunion para muchas personas en latinoamerica y el mundo ojala todos ayudemos a que cresca mas ... Con la etiqueta Taringa sitio<BR> de reunion para<BR> muchas personas<BR> en latinoamerica<BR> y el mundo ojala<BR> todos ayudemos<BR> a que cresca mas<BR> ... <BR> Ok como ya es un poco tarde, mañana tratare de seguir, espero me comprendan y entiendan que esto lleva bastante tiempo, ya que quiero que entiendan todo lo mejor posible, asi que va a hacer un poco largo. Que te recomiendo, que practiques estos codigos, y combinalos para que te adaptes ya que dentro de poco los vamos a volver a usar. En verdad es muy necesario que vayas leyendo todas las guias que traigo para que entiendas en orden lo que se trata de explicar aqui, dentro de poco haremos unas paginas para probrar los codigos que llevamos estudiados. Bueno sera hasta la proxima; No pido puntos, prefiero que recomienden este post, es mas importante para mi llegar a la mayor cantidad de personas posibles ya que despues todo esto se pierde, o lo pueden copiar, asi que es lo unico que les pido Final Modulo 2 Puden ver algunos de mis Ejemplos aqui!!
En este tutorial, aprenderás cómo crear texto en 3D en Illustrator luego transferirlo a Photoshop para aplicar los efectos. Usted aprenderá a aplicar estilos de texto en 3D regulares para crear un diseño impresionante. Asi es como debe quedar al final. Paso 1 - Crear un documento nuevo Cree un nuevo archivo en Photoshop. Estoy usando fondos de escritorio de tamaño de 1440px (ancho) X 900px (altura), pero puede usar cualquier tamaño que deseen. Paso 2 - Creación de texto en 3D Vamos a empezar a crear texto en 3D con la ayuda de Illustrator. En primer lugar usted necesita para escribir el texto en Illustrator. Usted puede usar cualquier texto que desee. Estoy utilizando el texto "FX". Abrir Illustrator, seleccione la herramienta Texto y escriba el texto. Después de escribir cambiar la fuente a " estándar medio Hobo ". Paso 3 - Colorear el texto Cambiar el color del texto. Para "F" se utiliza el azul (# 094569) y para "X" el uso de color naranja oscuro (# AB7D1B). Su imagen debe ser similar a la de abajo. Paso 4 - Añadir efectos 3D al texto Es necesario crear un texto sólido 3D. Para hacerlo vaya a Menú> Efecto> 3D> Extrusión y biselado ... Establecer el diálogo de manera similar como en la imagen siguiente. Paso 5 - Poner el color de fondo Una vez que hayas terminado con el traslado de texto 3D volver a Photoshop y cambiar el color de fondo azul (# 000b12). Paso 6 - Colocación de texto 3D en Photoshop En este paso vamos a colocar el texto 3D en Photoshop. Copiar el texto de Illustrator y pegar en Photoshop. Seleccione la capa con el texto, haga clic derecho sobre él y seleccione Rasterizar capa. Paso 7 - Separación de Texto Ahora usted va a separar el texto en dos partes. Seleccione la herramienta Marco Rectangular (M) y hacer la selección de la letra "X". Presione Ctrl + X para cortar y Ctrl + V para pegar la carta. Alinear el texto en consecuencia. Paso 8 - Dodge herramienta de configuración Es necesario crear destaca en el texto. Seleccione el Dodge Tool (O) de las herramientas y siga la configuración de cepillo como se puede ver en la imagen debajo. Paso 9 - Añadiendo más destacado Cómo pintar con la herramienta Dodge sobre las áreas que desea resaltar. Usted puede obtener inspiración de la imagen de abajo. Paso 10 Añadir más destacados Siga los pasos 9 y crear más puntos de relieve en las áreas circuladas. Paso 11 - Cómo añadir sombras Una vez que haya terminado con toques de luz, que necesita para crear sombras en el lado opuesto de la forma. Seleccione la herramienta de grabación (O) de las herramientas de pintura y las sombras. Paso 12 - Agregar más Sombras Siga el paso 11 y continúe con la adición de sombras aún más en las áreas circuladas. Paso 13 - El aumento de la intensidad Para añadir más contraste a la selección de texto de la Dodge Tool (O). Aumentar el tamaño del pincel a 800px y haga clic sobre la letra entera "F" y luego sobre la "X" para obtener el mismo resultado que en la siguiente imagen. Paso 14 - Agregar Focos Rincón Ahora vamos a añadir algunos focos para las esquinas del texto brillante. Seleccione la herramienta Pincel (B). Seleccione suave y redondo con el Maestro Diámetro de 90px. Elige el color de blanco y crear una nueva capa. Pintura en las esquinas del texto. Ver imagen de abajo la forma en que debe mirar. Paso 15 - Borrado de la pluma Borrar partes de la luz que no están en el texto, pero en el fondo. Paso 16 - Agregar Resplandor exterior Para agregar Resplandor exterior al clic focos en el botón Añadir un estilo de capa. Usted puede encontrar ese botón en la parte inferior de la paleta Capas. Si no ve la paleta, simplemente pulse F7 y aparecerá. Seleccione la opción Resplandor exterior y realizar los ajustes siguientes. Pulse Aceptar. Paso 17 - Duplicación del resplandor de Spotlight Ahora duplicar el brillo que ha creado en el paso 14. Seleccione la herramienta Dedo (R) y arrastre el cepillo de derecha a izquierda, por lo que el resplandor se extiende sobre el texto. Ver imagen de abajo para saber lo que quiero decir. Paso 18 - La mezcla del Resplandor Seleccione la herramienta Dedo (R) y arrastre el resplandor alrededor de las esquinas de texto. Ver imagen debajo. Su imagen debe ser como el fuelle hasta ahora. Paso 19 - Agregar el resplandor de plumas Ahora vamos a añadir un poco de luz a las esquinas del texto. Seleccione la herramienta Pincel (B). Elija cepillo suave y redondeada establecer el diámetro Master en 90px. Crear una nueva capa de pintura y algunos resplandor alrededor de los bordes como se puede ver a continuación. Paso 20 - Colocación de destacados con "X" En este paso se centrará en la letra "X". Coloque los reflectores. Hacerlo de la misma forma que lo hizo en el paso 14 y 15. Ver la imagen de abajo para una referencia. Paso 21 - Agregar Resplandor exterior Añadir Resplandor exterior a los focos. Haga clic en el botón Añadir un estilo de capa, seleccione Resplandor exterior y realizar los ajustes siguientes. Paso 22 - La elección del cepillo Seleccione la herramienta Pincel (B). Elija cepillo redondo duro y establecer el diámetro Master en 3px. Lo necesitará en los siguientes pasos. Paso 23 - Creación de Ruta Coge la herramienta Pluma (P) y crear una ruta de acceso como se puede ver en la imagen debajo. Paso 24 - Adición de Carrera Camino Ahora haga clic derecho en la pantalla y elegir la opción Ruta de carrera ... Paso 25 - Adición de trazo de pincel Elija la opción del cepillo de la lista y pulse Aceptar. Paso 26 - Agregar más Trazar ruta Repita los pasos 22-25 para añadir más golpes. Paso 27 - Creación destacados en las zonas con sombras En este paso tu vas a añadir un poco de brillo en las áreas oscuras para crear una reflexión. Seleccione la herramienta Pluma (P) y hacer un camino como ves en la imagen debajo. Presione Ctrl + Enter para hacer una selección y lo rellenamos de color marrón (# 614717). Paso 28 - Cambiar el modo de fusión Ahora el grupo de la capa seleccionada con el texto. Para ello coloque la capa de arriba de la capa de texto y pulsar Ctrl + Alt + G para agrupar la capa interior de la capa de texto. Una vez que hemos hecho ir a modo de fusión de capa y elegir la opción "Color Dodge" Paso 29 - Borrado de las esquinas Seleccione la herramienta Borrador (E). Elija un cepillo suave y redondo y establecer Master Diámetro de 100px. Borrar las esquinas de la forma. Ver imagen debajo. Paso 30 - Agregar más Trazar ruta Continuar con la adición de más movimientos, siguiendo los pasos 22-25. Su imagen debe ser similar a la imagen de abajo después de estos pasos. Este post tiene seguna parte para evitar la carga lenta del mismo. mientras tanto te recomiendo veas este post ENTRA EN ESTE POST MIENTRAS TERMINO EL OTRO
Juegos gratis para interrupción anunciada PS3, incluye Dead Nation, inFamous, y más Parece que Sony por fin ha respondido a la pregunta de sondeo dejó algunas mentes los jugadores en su lucha por aferrarse al tema fugaz tendencias de la Red de PlayStation que se establecen y ahora PlayStation Network está arriba. Sony ofrece algunos grandes juegos como "Gracias" para hacer frente a las molestias, además de algunos otros beneficios también. En primer lugar los jugadores pueden escoger dos de los siguientes cinco juegos de PS3 para mantener de forma gratuita para siempre: Dead Nation, inFamous, LittleBigPlanet, Super Stardust HD, Wipeout HD Furia +. En PlayStation Portable podrán seleccionar dos de LittleBigPlanet, ModNation Racers, Pursuit Force, y la Liberación de Killzone. ¿Este satisfacer a los jugadores por ahí? Háganos saber lo que piensas! Además de estas selecciones juego libre al por menor Alquiler de películas estará disponible a través de un nuevo "por nuestra cuenta" del programa. Exactamente qué películas se anunciarán en breve. No miembros de la PlayStation Además recibirá 30 días de libre Además de PlayStation. Los miembros actuales tendrán 60 días libres. Asi que aprovechen los que tiene el PS3 Te Recomiendo que veas mis otros post estan muy buenos
Esta seria un Excelente intro para tu clan Ok ahora empezaremos con el HTML: Cabe destacar que en este tema vamos haber un poco de como va a quedar el diseño completo, lo primero y lo mas basico. Ahora si. Primero crearemos un DIV que se va a llamar DAS y el eslogan, en mi caso para luego trabajar con los estilos CSS: <div id="das"></div> <div id="eslogan">Diseño Ayudas Soluciones</div> Como segundo crearemos la de taringa, en esta DIV alojamos la imagen de TARINGA <div id="taringa"><img src="../../images/taringa.png" width="100" height="75" /></div> Recuerden que es un proyecto y por eso la ruta de la imagen. Ahora crearemos las DIVS necesarias para el MENU de USUARIO que convinaremos con un JAVASCRIPT para provocar el efecto. <div id="inicio"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../../images/inicio2.png',1)"><img src="../../images/inicio.png" name="Image2" width="100" height="50" border="0" id="Image2" /></a></div> <div id="videos"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../../images/videos2.png',1)"><img src="../../images/videos.png" name="Image3" width="100" height="50" border="0" id="Image3" /></a></div> <div id="imagenes"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../../images/Imagenes2.png',1)"><img src="../../images/Imagenes.png" name="Image5" width="150" height="50" border="0" id="Image5" /></a></div> <div id="torneos"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../../images/torneos2.png',1)"><img src="../../images/torneos.png" name="Image6" width="150" height="50" border="0" id="Image6" /></a></div> <div id="equipo"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../../images/equipo2.png',1)"><img src="../../images/equipo.png" name="Image4" width="100" height="50" border="0" id="Image4" /></a></div> Con eso tenemos completo la parte del codigo del HTML. Seguimos con el CSS: Ok recuerden que en el HTML designamos los ID a las DIVS que son necesarias para trabajar con el CSS. Primero le daremos un estilo al BODY señalandole cual es la imagen de fondo: body { background-image: url(../../images/Sin%20t%C3%ADtulo-3.jpg); background-repeat: no-repeat; } Entonces para la DIV "DAS" y "ESLOGAN" la trabajaremos asi #das { position:absolute; left:26px; top:26px; width:107px; height:61px; background-color: #000; background-image: url(../../images/Sin%20t%C3%ADtulo-3.png); background-repeat: no-repeat; } #eslogan { position:absolute; left:26px; top:89px; width:219px; height:28px; color: #09F; } Ahora seguimos con la DIV "TARINGA" #taringa { position:absolute; left:222px; top:25px; width:109px; height:65px; } Sigamos con los ESTILOS de las DIVS del MENU de USUARIO #inicio{ position:absolute; left:93px; top:233px; width:57px; height:29px; color: #FFF; } #videos { position:absolute; left:93px; top:283px; width:85px; height:31px; color: #FFF; } #imagenes { position:absolute; left:84px; top:334px; width:87px; height:31px; color: #FFF; } #torneos { position:absolute; left:76px; top:385px; width:90px; height:36px; color: #FFF; } #equipo { position:absolute; left:94px; top:436px; width:99px; height:38px; color: #FFF; } Y con eso indicamos la posicion y los tamaños de las DIVS. Hechemos un Vistaso al JavaScript Este es un codigo que sirve para sustiuir un imagen por otra, lo trabajan casi todas las web, es muy liviano y muy bonito tambien. function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } Bueno y esto lo principal. El proximo post no contrenda estos codigos para que sepan, sera un poco mas complicado pero el resultado sera excelente, agregaremos imagenes,videos,informacion y demas cosas que necesites para tu GUILD o CLAN. Si necesitas uno para ti porfavos hazmelo saber, y con gusto te lo creo. Esto es un manera mas facil de dejar atras los foros que creas para tu clan.
Para los que les gusta expresar sus diseños En este tutorial vamos a crear una galería de pantalla completa con jQuery. Estos proyectos son solo para Taringa.net, si los ves en otros lugares porfavor escribe un MP para resolver el problema, y otras cosa es que no he creado el programa por lo que no voy a dar los archivos aun, y por otro lado pido unos clicks en la publicidad de mi blog ya que tengo una oferta de trabajo en Madrid-España y soy de Venezuela-Tachira y no tengo los suficientes recursos para viajar al exterior, ya tengo mi pasaporte y mi visa, pero no dispongo del dinero necesario, asi que si me puedes ayudar con unos clicks en la publicidad te lo sabria agradecer, no es obligatorio, si no quieren no los hagan, solo es para ayudarme, mil gracias y les recomiendo que sigan este post para que vean lo nuevo que le agrege como los links de descargas. Ok ahora empezemos: 1. Un Vistaso al Codigo HTML: En primer lugar, vamos a añadir un elemento de carga que queremos mostrar cuando las imágenes se están cargando: <div id="tf_loading" class="tf_loading"></div> Entonces, vamos a crear un contenedor de todas las imágenes que se mostrarán en pantalla completa: <div id="tf_bg" class="tf_bg"> <img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" /> <img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/> <img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/> <img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/> <img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/> <img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/> <div class="tf_pattern"></div> </div> Vamos a utilizar el atributo "longdesc" para indicar la ruta a la miniatura correspondiente. El elemento div último servidor como el patrón de superposición. A continuación, vamos a añadir un contenedor de los contenidos que se muestran en la esquina inferior izquierda de la pantalla. <div id="tf_content_wrapper" class="tf_content_wrapper"> <div class="tf_content" id="content1" style="display:block;"> <h2>Dreamer</h2> <p>Far far away, behind the word mountains, ... </p> </div> <div class="tf_content" id="content2"> ... </div> ... </div> Cada caja con una partida será en el interior de un elemento con la clase "tf_content". La estructura de la imagen en miniatura en la parte derecha de la pantalla vemos de la siguiente manera: <div id="tf_thumbs" class="tf_thumbs"> <span id="tf_zoom" class="tf_zoom"></span> <img src="images/thumbs/1.jpg" alt="Thumb1"/> </div> La duración de cualquiera tendrá la clase "tf_zoom" o "tf_fullscreen" dependiendo de en qué modo estamos in Y, por último, vamos a añadir algunos elementos para la navegación: <div id="tf_next" class="tf_next"></div> <div id="tf_prev" class="tf_prev"></div> Echemos un vistazo a el CSS. 2. El CSS: Después de hacer un reset simple del cuerpo y html, vamos a definir el estilo para el contenedor de imágenes a todo: .tf_bg{ width:100%; height:100%; position:fixed; top:0px; left:0px; } El contenedor se fijará y ocupar toda la pantalla. Las imágenes en el interior será de la posición absoluta y la anchura real y la altura se calculará de forma dinámica en nuestra función de jQuery: .tf_bg img{ position:absolute; top:0px; left:0px; width:100%; z-index: 1; display:none; } El patrón también lo hará ser absoluta y tienen una imagen de fondo repetida: .tf_pattern{ position:absolute; width:100%; height:100%; background:transparent url(../images/pattern.png) repeat top left; z-index:2; } Vamos a colocar el contenido en absoluto, también: .tf_content{ position:absolute; bottom:50px; left:50px; z-index:10; display:none; } El título del contenido tendrá un tipo de letra diferente, que vamos a integrar con el API de Google Fuente. Volveremos sobre esto más adelante. .tf_content h2{ color:#fff; font-size:90px; padding:0; margin:0; font-family: 'Dancing Script', arial, serif; text-shadow:1px 1px 2px #000; } El apartado de los contenidos se han repetido una imagen como fondo y algunos bonita caja-y la sombra de texto: .tf_content p{ color:#fff; padding:0; margin:0; background:transparent url(../images/bg_content.png) repeat top left; padding:40px; width:500px; font-family: 'PT Sans Narrow', arial, serif; font-size:20px; line-height:25px; text-transform:uppercase; text-shadow:2px 2px 1px #000; -moz-box-shadow:1px 1px 5px #202020; -webkit-box-shadow:1px 1px 5px #202020; box-shadow:1px 1px 5px #202020; border:4px solid #fff; } El contenedor de imágenes en miniatura se coloca en el centro de la pantalla en el lado derecho. Logramos que con el establecimiento de la parte superior al 50% y el margen superior a la mitad negativa de su altura. Daremos el contenedor una reflexión, que se puede ver en los navegadores WebKit: .tf_thumbs{ position:absolute; z-index:12; right:50px; top:50%; margin-top:-79px; border:4px solid #fff; -moz-box-shadow:1px 1px 5px #202020; -webkit-box-shadow:1px 1px 5px #202020; box-shadow:1px 1px 5px #202020; -webkit-box-reflect: below 5px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(rgb(18, 18, 18)) ); } .tf_thumbs img{ display:block; } Los elementos de navegación se encuentra junto al contenedor de miniaturas: .tf_next, .tf_prev{ width:35px; height:14px; position:absolute; top:50%; right:320px; z-index:100; cursor:pointer; background:transparent url(../images/nav.png) no-repeat top left; opacity:0.5; } .tf_next{ background-position:0px -14px; margin-top:80px; } .tf_prev{ background-position:0px 0px; margin-top:-55px; } .tf_next:hover, .tf_prev:hover{ opacity:0.9; } Los pequeños iconos de zoom y modo de pantalla completa aparecerá en la esquina superior derecha de la miniatura: .tf_zoom, .tf_fullscreen{ width:20px; height:20px; position:absolute; top:6px; right:6px; cursor:pointer; z-index:100; opacity:0.6; background:transparent url(../images/icons.png) no-repeat top left; } .tf_zoom{ background-position:0px -20px; } .tf_fullscreen{ background-position:0px 0px; } .tf_zoom:hover, .tf_fullscreen:hover{ opacity:0.9; } El elemento de carga se situará en el centro de la pantalla: .tf_loading{ position:fixed; top:50%; left:50%; margin:-30px 0px 0px -30px; width:60px; height:60px; background:#fff url(../images/loader.gif) no-repeat center center; z-index:999; opacity:0.7; } Y eso fue todo el estilo. Echemos un vistazo a las JavaScript. 3. El JavaScript En primer lugar, vamos a incluir los siguientes scripts: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.flip.js"></script> <script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script> Entonces, vamos a añadir la función de precarga de las imágenes: (function($) { $.fn.preload = function(options) { var opts = $.extend({}, $.fn.preload.defaults, options); o = $.meta ? $.extend({}, opts, this.data()) : opts; var c = this.length, l = 0; return this.each(function() { var $i = $(this); $('<img/>').load(function(i){ ++l; if(l == c) o.onComplete(); }).attr('src',$i.attr('src')); }); }; $.fn.preload.defaults = { onComplete : function(){return false;} }; })(jQuery); En nuestra función de jQuery, vamos primero caché de algún elemento y definir algunas variables: var $tf_bg = $('#tf_bg'), $tf_bg_images = $tf_bg.find('img'), $tf_bg_img = $tf_bg_images.eq(0), $tf_thumbs = $('#tf_thumbs'), total = $tf_bg_images.length, current = 0, $tf_content_wrapper = $('#tf_content_wrapper'), $tf_next = $('#tf_next'), $tf_prev = $('#tf_prev'), $tf_loading = $('#tf_loading'); Entonces, vamos a la precarga de las imágenes: $tf_bg_images.preload({ onComplete : function(){ $tf_loading.hide(); init(); } }); La siguiente función se mostrará la primera imagen e iniciar algunos eventos: function init(){ //get dimentions for the image, based on the windows size var dim = getImageDim($tf_bg_img); //set the returned values and show the image $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }).fadeIn(); //resizing the window resizes the $tf_bg_img $(window).bind('resize',function(){ var dim = getImageDim($tf_bg_img); $tf_bg_img.css({ width : dim.width, height : dim.height, left : dim.left, top : dim.top }); }); //expand and fit the image to the screen $('#tf_zoom').live('click', function(){ if($tf_bg_img.is(':animated')) return false; var $this = $(this); if($this.hasClass('tf_zoom')){ resize($tf_bg_img); $this.addClass('tf_fullscreen') .removeClass('tf_zoom'); } else{ var dim = getImageDim($tf_bg_img); $tf_bg_img.animate({ width : dim.width, height : dim.height, top : dim.top, left : dim.left },350); $this.addClass('tf_zoom') .removeClass('tf_fullscreen'); } } ); //click the arrow down, scrolls down $tf_next.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('tb'); }); //click the arrow up, scrolls up $tf_prev.bind('click',function(){ if($tf_bg_img.is(':animated')) return false; scroll('bt'); }); //mousewheel events - down / up button trigger the scroll down / up $(document).mousewheel(function(e, delta) { if($tf_bg_img.is(':animated')) return false; if(delta > 0) scroll('bt'); else scroll('tb'); return false; }); //key events - down / up button trigger the scroll down / up $(document).keydown(function(e){ if($tf_bg_img.is(':animated')) return false; switch(e.which){ case 38: scroll('bt'); break; case 40: scroll('tb'); break; } }); } La siguiente función se encarga de mostrar la imagen anterior o siguiente: function scroll(dir){ //if dir is "tb" (top -> bottom) increment current, //else if "bt" decrement it current = (dir == 'tb')?current + 1:current - 1; //we want a circular slideshow, //so we need to check the limits of current if(current == total) current = 0; else if(current < 0) current = total - 1; //flip the thumb $tf_thumbs.flip({ direction : dir, speed : 400, onBefore : function(){ //the new thumb is set here var content = '<span id="tf_zoom" class="tf_zoom"></span>'; content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>'; $tf_thumbs.html(content); } }); //we get the next image var $tf_bg_img_next = $tf_bg_images.eq(current), //its dimentions dim = getImageDim($tf_bg_img_next), //the top should be one that makes the image out of the viewport //the image should be positioned up or down depending on the direction top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px'; //set the returned values and show the next image $tf_bg_img_next.css({ width : dim.width, height : dim.height, left : dim.left, top : top }).show(); //now slide it to the viewport $tf_bg_img_next.stop().animate({ top : dim.top },1000); //we want the old image to slide in the same direction, out of the viewport var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px'; $tf_bg_img.stop().animate({ top : slideTo },1000,function(){ //hide it $(this).hide(); //the $tf_bg_img is now the shown image $tf_bg_img = $tf_bg_img_next; //show the description for the new image $tf_content_wrapper.children() .eq(current) .show(); }); //hide the current description $tf_content_wrapper.children(':visible') .hide() } La función de cambiar el tamaño animará la imagen a un tamaño de pantalla de la instalación: function resize($img){ var w_w = $(window).width(), w_h = $(window).height(), i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h; if(i_w > i_h){ new_w = w_w; new_h = w_w * r_i; if(new_h > w_h){ new_h = w_h; new_w = w_h / r_i; } } else{ new_h = w_w * r_i; new_w = w_w; } $img.animate({ width : new_w + 'px', height : new_h + 'px', top : '0px', left : '0px' },350); }[code] La última función nos dará las dimensiones de una imagen y su posición correcta: [code]function getImageDim($img){ var w_w = $(window).width(), w_h = $(window).height(), r_w = w_h / w_w, i_w = $img.width(), i_h = $img.height(), r_i = i_h / i_w, new_w,new_h, new_left,new_top; if(r_w > r_i){ new_h = w_h; new_w = w_h / r_i; } else{ new_h = w_w * r_i; new_w = w_w; } return { width : new_w + 'px', height : new_h + 'px', left : (w_w - new_w) / 2 + 'px', top : (w_h - new_h) / 2 + 'px' }; } Y eso es todo! Esperamos que hayan disfrutado el tutorial y aprender algo nuevo hoy!