Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - OmaarV

Páginas: [1] 2
1
Preguntas, Ideas y Reclamaciones. / Sistema de Padrinos 2.0
« en: 25 de Octubre de 2012, 19:17:51 pm »
Buenas tardes muchachos, hace un par de años CarlosRdrz hizo una propuesta muy interesante en este foro, el Sistema de Padrinos y es de las cosas mas interesantes que yo he visto en PHPeros y estaria genial si lo volvieramos implementar.

¿Por que me gusto la idea?
Cuando uno va empezando a desarrollar se tienen muchas dudas, algunas sencillas algunas mas complicadas y si tenemos a alguien que en un par de minutos las pueda resolver esas personas van a crecer mucho mas.

Y si están de acuerdo usaremos la misma mecanica que se uso en el 2010. (Favor de leer el Post)

Si quieren ser padrinos o quieren ser apadrinados pueden empezar publicando en este post.

Padrinos Presentados:
- omarsve
  (HTML, HTML5, CSS3, PHP, Rails, jQuery, WP, Web Design)

- AlejoSketch
  (HTML, CSS, SSI+SMF, WP, Joomla, Tumblr/Blogger themes)

Relaciones Activas:
-

2
Proyectos y búsqueda de equipos / [WIDBO] Lanzamiento
« en: 09 de Diciembre de 2011, 02:49:56 am »
Recuerdan Widbo? Pues los invito a conocerlo, es un lugar donde podemos compartir conocimientos y experiencias, y sobre todo podamos aprender, pasen y si se animan registrensen y publiquen un tutorial o un articulo.

También les pido que si reportan algún error me lo reporten o cualquier feedback que quieran agregar a omarsve@gmail.com

www.widbo.com

3
Proyectos y búsqueda de equipos / [WIDBO] Comunidad De Desarrollo Web
« en: 05 de Noviembre de 2011, 06:54:44 am »
Buenas Tardes PHPeros, tenia mucho que no los saludaba, hace rato estaba buscando programadores que me ayudaran en un proyecto, este proyecto ya esta cobrando vida desde las entrañas de la web, su nombre es WIDBO y se trata de una Comunidad donde nosotros podamos aprender cualquier cosa que este relacionada con la Web, este proyecto aún es privado y se liberara en un par de semanas, lo que se busca es gente que quiera participando  creando tutoriales y ayudando en los cursos para el contenido inicial del proyecto.

Igual si no quieren participar yo les avisare cuando el proyecto sea liberado para que se puedan hechar la vuelta y participar en el.

www.widbo.com

4
Charlas / Offtopic / El Plagio
« en: 05 de Octubre de 2010, 03:33:22 am »
Este tema tan polémico lo hemos estado leyendo entre las lineas de este foro muy a menudo últimamente, algunos por que se roban un MC y lo usan como propio, pero que es lo que mas realmente nos molesta del plagio, ¿Que nuestro trabajo tan arduo que tuvimos nos lo roben? o que ¿Estos individuos son tan estúpidos para no plagearnos de una manera correcta?, aunque es cierto que esto es un gran problema no actuamos de la manera que deberíamos actuar ante esta situación algunos su instinto los lleva a insultar a la persona que los a plagiado con palabras antisonantes y últimamente se a escuchando el famoso:
Citar
¡Agarrate que te va una gran demanda"
Pero, ¿Tenemos las armas para demandar a la persona a la que deseamos demandar?
No, ya que algunas son de otros paises de origen y te aseguro que no viajaras 10mil Kilómetros para demandar a alguien por que se robo una imagen, algunos creen que por que tienen un proyecto llamado "Las quesadillas de la tía Juanita" Y llega otro y hace "Las sincronizadas de Panchita" ya es un plagio, pero estamos muy equivocados eso se llaman ideas y hasta que no tengamos registrados ante la ley nuestra idea no podemos exigirla como nuestra, si así fuera Google no existiría por que Altavista lo habría demandado por supuesto plagio.

Entonces, ¿Que es lo que tenemos que hacer ante esta situación?.

Tan sencillo como hablar con la persona que creemos esta haciendo una copia de nuestro proyecto, imagen, video, o lo que tu quieras y decirle "Hey, explicame por que tu proyecto tiene el 90% de parecido al mio." Y esa persona sabra explicarte la situación o decirte "Oye, es que me copie de tu proyecto" y en ese caso lo que tu deberías sentir ante esa situación es satisfacción de tener un proyecto tan ambicioso y exitoso que hasta no los quisieron robar Genial ¿No?.

Cuando a mi me roban un diseño me siento halagado de que mi diseño fue lo demasiado bueno para que otra persona me lo robara y así cuando le diga a alguien "Mira ese es mi diseño en esa pagina, me lo robaron pero ¿Acaso no es hermoso?"

Piensa en esto cada vez que te roben un proyecto o cualquier otra cosa y di hacia ti mismo
Citar
"Fui lo suficientemente exitoso para que alguien se copiara de mi".

5
Hola! Hoy vengo a platicarles acerca de un proyecto que estamos desarrollando entre Siquillote y yo, se tiene pensando como una comunidad de desarrolladores web o futuros desarrolladores donde compartir conocimientos, se agregaran manuales, tutoriales, ebooks, artículos, entre otros.

Ahora lo que necesitamos es gente que ayude desarrollando la plataforma de la pagina donde los usuarios agregaran sus tutoriales y el contenido y el CMS en general.

Equipo necesario:

Administradores:
- Siquillote
- OmarV

Programadores:
- GuayAngel12
- Kevin Wronski
-
-
-

Diseñadores:
-
-

Mod Global:
- westwest
-
-

Moderadores:
PHP-
CSS-
HTML- MixVice
JS-
AS-
(entre otros)

Y lo que necesitamos también seria en un nombre si tienes alguna idea no dudes en comentarla.

Saludos :P

6
CSS / Maquetando con xHTML/CSS
« en: 09 de Septiembre de 2010, 08:19:06 am »
Bueno, ultimamente e visto que muchas personas tienen dudas sobre como maquetear un layout con CSS o me han preguntado directamente, bueno ahora les explicare un poco.

Lo que haremos sera exactamente la siguiente imagen pero estructurada con xHTML/CSS



Bueno, primero empezaremos creando el contenedor principal con un #web-content

HTML:
Código: [Seleccionar]
<div id="web-container">Contenido</div>CSS:
Código: [Seleccionar]
#web-container{
    width:960px;
    margin:0 auto;
}

Demasiado sencillo, esto nos centrara el div y le dará nuestro ancho deseado, lo siguiente seria agregar un header, no tiene nada de ciencia ya que el header no tendra divisiones muy complicadas por ahora y al css solo le daremos el alto deseado.

HTML:
Código: [Seleccionar]
<div id="web-container">
    <div id="header">
        Header
    </div>
</div>

CSS:
Código: [Seleccionar]
#header{
    width:960px;
    height:120px;
}

Lo siguiente seria hacer nuestro costado y contenido prinicipal, aquí es donde tenemos que tener cuidado a la hora de sacar nuestras matematicas, por ejemplo si queremos que nuestro costado mida 200px, entonces tendremos que tener (#web-content)-(aside) = (main-content) (Notese la patética expresión algebraica que se uso para este ejemplo) Por tanto tendremos 960-200=760 que sera la medida de nuestro contenido principal.

HTML:
Código: [Seleccionar]
    <div id="aside">
        Aside
    </div>
    <div id="main-content">
        Main Content
    </div>

CSS:
Código: [Seleccionar]
#aside{
    width:260px;
    float:left;
}
#main-content{
    width:700px;
    float:left;
}

Listo ahora tenemos la primera parte y agreguemos unos colores de borde para tener un ejemplo de como nuestro layout esta representado.

Este seria nuestro HTML terminado.
Código: [Seleccionar]
<div id="web-container">
    <div id="header">
        Header
    </div>
    <div id="aside">
        Aside
    </div>
    <div id="main-content">
        Main Content
    </div>
</div>

Y este nuestro CSS.
Código: [Seleccionar]
#web-container{
    width:960px;
    margin:0 auto;
    border:1px solid #000;
}
#header{
    width:960px;
    height:120px;
    border:1px solid #900;
}
#aside{
    width:260px;
    float:left;
    border:1px solid #6F3;
}
#main-content{
    width:700px;
    float:left;
    border:1px solid #F60;
}

¡HEY ATENTO!
Recuerda que la suma de todo el ancho debe de ser 960px (Tamaño del div contenedor) y saquemos esta cuenta, 700+260=960 pero como tenemos un border esto nos agrega un 1px mas de cada lado por tanto 700+260+1+1+1+1=964 así que restemos 2px de cada uno.

CSS:
Código: [Seleccionar]
#header{
    width:958px;
    height:120px;
    border:1px solid #900;
}
#aside{
    width:258px;
    float:left;
    border:1px solid #6F3;
}
#main-content{
    width:698px;
    float:left;
    border:1px solid #F60;
}


Listo ya aprendimos un poco sobre como maquetar un layout

clear:both;
Seguramente has escuchado a alguien decirte agregale un clear:both; antes de cerrar la carpeta contenedora y servirá. Si no lo has escuchado, lo acabas de escuchar y aprenderte muy bien esto, te puede ahorrar muchos dolores de cabeza.

Esta función básicamente lo que hace es "estirar" la div contenedora hasta el final para mostrar las propiedades de esta, ya que si intentamos de otra forma, no lo hara. Así que usaremos clear:both; para estos casos.

Paddings.

Ahora bien, los paddings nos sirven para agregar un espacio entre el borde de cualquier contenedor entre el contenido (Esto se leyó *****o, lo se), por ejemplo si nosotros tenemos un div y le agregamos un padding de 20px el contenido se mostrara 20px mas hacia abajo, derecha, izquierda y arriba y si solo queremos agregar un padding a una parte usaremos padding-top, padding-left, padding-right, padding-bottom creo que ya deben de estar familiarizado con esto, así que agreguemos paddings a nuestro layout.

CSS:
Código: [Seleccionar]
#web-container{
    width:960px;
    margin:0 auto;
    border:1px solid #000;
    padding:10px;
}

Nota: Si tenemos un ancho de 960px y un padding de 10px el padding se agregara a los dos costados también por ende sera un 20px en total y nuestro width total sera de 980px ahora.

Solo agregaremos padding a nuestro web-container por que nuestro aside y main-content usaremos margin para separarlos.

Margin.
Margin es básicamente igual que padding solo que en lugar de agregar hacia adentro lo agrega hacia afuera. ( Si tienes dudas con esto no dudes en preguntármelo).

Ahora para implementarlo en nuestro layout haremos un pequeño truco, solo le agregaremos el margin al header para que se separe de nuestro contenido y al main-content para que se separe del aside, claro de sus respectivos lados.

Código: [Seleccionar]
#header{
    width:958px;
    height:120px;   
    border:1px solid #900;
    margin-bottom:10px;
}
#main-content{
width:688px;/*width:698px; y si restamos los 10px del margin seran 688px;*/
float:left;
border:1px solid #F60;
margin-left:10px;/*Tendremos que restarle este 10px a width*/
}

Listo ya sabemos lo mas básico ahora te toca a ti ponerlo en practica pero echemos un ultimo vistazo a todo nuestro layout terminado.

HTML:
Código: [Seleccionar]
<div id="web-container">
    <div id="header">
        Header
    </div>
    <div id="aside">
        Aside
    </div>
    <div id="main-content">
        Main Content
    </div>
    <div class="clear"></div>
</div>

CSS:
Código: [Seleccionar]
#web-container{
    width:960px;
    margin:0 auto;
    border:1px solid #000;
    padding:10px;
}
#header{
    width:958px;
    height:120px;   
    border:1px solid #900;
    margin-bottom:10px;
}
#aside{
    width:258px;
    float:left;
    border:1px solid #6F3;
}
#main-content{
    width:688px;/*width:698px; y si restamos los 10px del margin seran 688px;*/
    float:left;
    border:1px solid #F60;
    margin-left:10px;/*Tendremos que restarle este 10px a width*/
}
.clear{clear:both;}

Bueno espero que les sirva aunque sea un poco, lo hice a las 00:17 de la madrugada así que cualquier anomalía favor de reportarla, próximamente les estaré explicando cosas un poco mas complicadas.

Saludos a todos.

7
(X)HTML / ¿Te interesa aprender HTML5?
« en: 02 de Agosto de 2010, 00:23:05 am »
Buenas phperos, pues últimamente me e propuesto crear algunos tutoriales para ustedes ayer hice el tutorial de SEO, pero quería saber si les interesaba aprender HTML5 o si no para crear tutoriales de cosas mas útiles, o acerca de que les gustaría aprender. (:

P.D. Soy Diseñador Web experto en HTML & CSS, con conocimientos medios en php & diseño grafico ( Photoshop & Illustrator )

8
General / Manual SEO
« en: 31 de Julio de 2010, 23:56:15 pm »
Buenas tardes, hoy les vengo a platicar un poco acerca del SEO (Search engine Optimization) que vendria siendo la “Optimización en motores de búsqueda”, para poder tener un mejor posicionamiento en los motores de búsqueda como Google, Yahoo, Bing, etc.

La verdad no vi ningún foro adecuado para este tema pero si un mod lo desea mover adelante. También propongo la creación del foro SEO. (:

Este manual seria acerca de los conocimientos mas básicos que necesitaríamos para optimizar nuestro sitio.

Lo primero que necesitaríamos para posicionarnos en Google seria darnos de alta, claro que google nos encontraría sin estar dados de alta pero esto nos puede llevar a un mejor posicionamiento a la hora de la practica. Aquí algunos links de los motores de búsqueda mas conocidos.

Para darnos de alta en google simplemente es necesario ir a la página para agregar URLs de Google, escribir la URL en un cuadro de texto y enviarla. http://www.google.es/addurl/
Para darnos de alta en Yahoo es un poco mas complicado, tienes que estar registrado y enviarles tu URL a través de esta página.http://siteexplorer.search.yahoo.com/es/free/submit
Para darnos de alta en MSN SEARCH simplemente necesitamos entrar página para agregar URLs de MSN Search y enviársela.
Algunos puntos importantes al darnos de alta en los buscadores. http://www.bing.com/webmaster/SubmitSitePage.aspx

Antes de darnos de alta en los motores de búsqueda tenemos que tener una fase del sitio ya completa, ya que si lo tenemos ganaremos bonus de novedad, y si no la tenemos nos podrían penalizar.

También debemos de tener en cuenta que mientras mas tiempo tenga tu dominio y mas visitas ganaremos mas puntos, así que no se apresuren y esperen un mes o dos para darse de alta en los buscadores.

Ya que estamos dados de alta en los principales navegadores deberíamos tener en cuenta unos cuantos aspectos a la hora de crear nuestro sitio para posicionar nuestras palabras claves pero... ¿Donde?

El dominio sin duda es el elemento mas importante para posicionarnos en los buscadores, piensa mucho en tu dominio ya que es mejor tener “www.quesos.com” a tener “www.derivadodeleche.com” Dime ¿Como te buscaran tus clientes?.

El principal elemento para nuestra descripción principal de nuestro sitio ya que es uno de los que los motores de búsqueda les da mas relevancia, también ten en cuenta que los buscadores recortan los titles a 60 caracteres así que evita superar este con caracteres como “a”, “de”, “o”, “para”, “por” y muchos otros mas que después mencionare que los navegadores suprimen. Ejemplo exitoso de un title “Phperos comunidad php tutoriales php html css”

Uno de los elementos mas importantes también ha sido la etiqueta “H1” que ya se nos a hecho una costumbre poner como el titulo de nuestros diseños. Esta etiqueta utiliza los mismos consejos que “title. Ejemplo exitoso de H1 “PHPeros programación y diseño web”

Las etiquetas H2 y H3 cuentan un poco menos que el H1 pero suelen utilizarse como descripciones del sitio y tienen mucho éxito con los navegadores y mas aun si cumplen con los estándares correcto.

El primer párrafo de un sitio es al que los buscadores le dan mas importancia. Debes de asegurarte que la oración tenga algún sentido lógico ya que es lo primero que tus visitantes miraran.

Deberás usar palabras claves en tu ALT y TITLE en el caso de las imágenes para las búsquedas de las mismas.

Usar un elemento “b” ya no es lo mismo que antes, pero sigue teniendo una relevancia importante para los buscadores.

El meta description es muy importante ya que será lo que utilicen los buscadores para mostrar ese pequeño resumen de lo que trata la página en una búsqueda.

Los meta keywords ya no tienen la importancia que tenían debido al abuso que se las ha dado, aunque Yahoo si los toma en cuenta, google los ignora casi por completo.

Stop Words, son las palabras a evitar en las palabras claves.

Preposiciones: a, ante, bajo, con, contra, de, desde, durante, en, entre, hacia, hasta, mediante, para, por, pro, según, sin, sobre, tras, vía
Artículos indeterminados: un, una, unos, unas
Artículos determinados: el, la, los, las

Bueno amigos esto fue la primera fase de mi manual de SEO luego estaré agregando mas puntos para un SEO ético.

9
(X)HTML / MAQUETEANDO HTML5/CSS3
« en: 30 de Julio de 2010, 23:01:09 pm »
Hola phperos hoy en la mañana me puse a poner en practica mis conocimientos adquiridos en html5/css3 y me dí la tarea de hacer una maqueta de estas maravillosos lenguajes.

http://omarsv.com/html5-css3/

Yo estaré agregando en los artículos pequeñas descripciones de las características.

Bueno amigos, hasta la próxima!

10
Exposición de Diseños / [IMAGEN] OMAR
« en: 26 de Mayo de 2010, 03:03:27 am »
Buenas tardes PHPeros, bueno una noche de estas me puse a leer unos cuantos tutoriales y me gustaría saber que opinen con fines de mejorar.(:


11
Charlas / Offtopic / Buscando sugerencias
« en: 19 de Mayo de 2010, 20:58:10 pm »
Buenas tardes phperos, estoy desarrollando junto con un primo una pagina para poder vender nuestros servicios como desarrolladores web, pero estamos en un problema, no encontramos el nombre para la pagina. Si ustedes nos podrían ayudar estaría genial.

12
Tutoriales y Manuales / Buscando opinión.
« en: 10 de Mayo de 2010, 06:05:48 am »
Hola PHPeros les quería preguntar si les gustaría que hiciera un tutorial acerca de como hacer esto:



Mi pregunta es por que es en Adobe Illustrator entonces quería saber si manejan ese programa y si les gustaría aprender a hacerlo para no perder el tiempo si lo hago.

13
Presentaciones / OmarVega
« en: 25 de Abril de 2010, 20:21:26 pm »
Hola comunidad Phpera mi nombre es OmarVega un Diseñador & Maquetador Web aunque también tengo conocimientos PHP, estare aquí con todos ustedes posteando algunos tutoriales muy interesantes acerca de css y muchas cosas mas.

Saludos.

14
CSS / Aprendiendo CSS3
« en: 25 de Abril de 2010, 20:06:40 pm »
Hola, hoy les intentare explicar un poco mas acerca del CSS3 y como utilizarlo, las nuevas funciones, etc.

Para empezar debemos aclarar que CSS3 no lo acepta IE .

Algunas de las propiedades que veremos hoy seran:

  • Text-shadow
  • Box-shadow
  • Border-radius (Esquinas Redondeadas)
  • @font-face

1. Text-shadow:
El Text-shadow es la propiedad quizas mas usada ya que es muy sencilla de usarse y la mas practica.

El codigo es:
Código: [Seleccionar]
text-shadow: 2px 2px 5px #000;El primer valor es la distancia horizontal de la sombra, el segundo la vertical y el tercero al radio del desenfoque y el ultimo al color de la sombra.
Navegadores que soportan text-shadow: Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+

2. Box-shadow:
La propiedad box-shadow se utiliza de una manera muy similar a text-shadow, pero añade sombras a los elementos en su conjunto y no al texto dentro de ellos:

Código: [Seleccionar]
box-shadow: 5px 5px 10px 10px #000;
Los dos primeros valores son el desplazamiento de la sombra, el tercero el radio de desenfoque, y el cuarto valor del radio de propagación. El último valor es, por supuesto, el color de sombra.
Navegadores que soportan box-shadow: Safari 3.1+, FireFox 3.5, Chrome 1.0+

3. Border-radius:

Porque todo el mundo le gusta las esquinas redondeadas, la especificación CSS3 contiene el popular frontera de radio. Mozilla y Webkit requieren sus prefijos estándar, así que para añadir esquinas redondeadas con un radio de 10px a un elemento, utilice la siguiente:

Código: [Seleccionar]
-moz-border-radius: 10px; /* For FireFox */
-webkit-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */

Navegadores que soportar border-radius: Safari 3.1+, FireFox 2.0, FireFox 3.0+, Chrome 1.0+

4. @font-face:
Aunque técnicamente no son una propiedad, la declaración de CSS3  font-face ha estado recibiendo bastante la atención en los últimos tiempos. Håkon Wium Lie, el proponente original de la CSS, escribió un artículo de lectura obligada para todos los A List Apart sobre @font-face. Esencialmente, esto permite a los desarrolladores incorporar fuentes en sus páginas que pueden ser convocadas por el simple propiedad font-family.

Para incrustar una fuente, sólo tiene que añadir una declaración @font-face de la siguiente manera:

Código: [Seleccionar]
@font-face {
      font-family: "Nombre de mi fuentet";
      src: url(Font.otf) format("opentype");
}

Esto le indica al navegador que cada vez que el tipo de letra "Nombre de mi fuente" se utiliza, tire de ella de "Font.otf." Simple y genial, de verdad. Así entonces para usar nuestra fuente, que acabamos de declarar, como lo haríamos con cualquier otra fuente:

Código: [Seleccionar]
h1 { font-family: "Nombre de mi fuente", sans-serif; }Navegadores que soportan @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+

CSS3 trae un poco de materia impresionante a la mesa, y ahora es el momento de empezar a usarlo. A medida que la comunidad de desarrollo web se vuelve más y más sobre CSS3 emocionados, los navegadores Mozilla y Webkit son rápidamente añadiendo más y más apoyo para nuevas propiedades, declaraciones y selectores. Así que toma ventaja de esto!

15
CSS / [Tutorial] Tecnica Sprite con CSS
« en: 04 de Enero de 2010, 00:54:41 am »
Los sprites es una forma de mejorar el rendimiento de nuestra pagina web hasta un 80%,
creando una solo imagen con todos los iconos asi nuestra pagina no carga tanto,
muchas de las paginas profesionales como youtube, google, yahoo o habbo utilizan sprites,
aqui un ejemplo del sprite de google.


Ahora con el ejemplo que aprenderemos es con el siguiente.


La forma mas sencilla de la que nosotros hariamos el ejemplo anterior seria:
<h3>Previsiones meteorológicas</h3>
<p id="localidad1"><img src="imagenes/sol.png" /> Localidad 1: soleado, máx: 35º, mín:
23º</p>
<p id="localidad2"><img src="imagenes/sol_nubes.png" /> Localidad 2: nublado, máx: 25º,
mín: 13º</p>
<p id="localidad3"><img src="imagenes/nubes.png" /> Localidad 3: muy nublado, máx: 22º,
mín: 10º</p>
<p id="localidad4"><img src="imagenes/tormentas.png" /> Localidad 4: tormentas, máx:
23º, mín: 11º</p>

Esta es una solucion muy sencilla y que funciona bien pero el navegador debera descargar
4 imagenes diferentes para mostrar la pagina por lo que debe realizar 4 peticiones al servidor.

Entonces lo que nosotros queremos lograr es lograr el efecto anterior sin que nuestra web carge
tantas veces utilizando la tecnica sprite.

El primer paso consiste en crear una imagen grande que incluya las cuatro imágenes
individuales. Como los iconos son cuadrados de tamaño 32px, se crea una imagen de 32px x
128px:



Para facilitar el uso de esta técnica, todas las imágenes individuales ocupan el mismo sitio dentro
de la imagen grande. De esta forma, los cálculos necesarios para desplazar la imagen de fondo se
simplifican al máximo.
El siguiente paso consiste en simplificar el código HTML:
<h3>Previsiones meteorológicas</h3>
<p id="localidad1">Localidad 1: soleado, máx: 35º, mín: 23º</p>
<p id="localidad2">Localidad 2: nublado, máx: 25º, mín: 13º</p>
<p id="localidad3">Localidad 3: muy nublado, máx: 22º, mín: 10º</p>
<p id="localidad4">Localidad 4: tormentas, máx: 23º, mín: 11º</p>

La clave de la tecnica de los sprites css consiste en mostrar las imagenes mediante la propiedad
background-image. Para mostrar cada vez una imagen diferente, se utiliza la propiedad background-position
que desplaza la imagen de fondo teniendo en cuenta la posicion de cada imagen individual dentro de la grande:

#localidad1, #localidad2, #localidad3, #localidad4 {
padding-left: 38px;
height: 32px;
line-height: 32px;
background-image: url("imagenes/sprite.png");
background-repeat: no-repeat;
}
#localidad1 {
background-position: 0 0;
}
#localidad2 {
background-position: 0 -32px;
}
#localidad3 {
background-position: 0 -64px;
}
#localidad4 {
background-position: 0 -96px;
}
La siguiente imagen muestra lo que sucede con el segundo parrafo:

El parrafo  tiene establecida una altura de 32px, identica al tamaño de los iconos.
Despues de añadir un padding-left al parrafo se añade la imagen de fondo mediante
background-image. Para cambiar de una imagen a la otra solo es necesario desplazar de forma
ascendente o descendente la imagen grande.

Si se quiere mostrar la segunda imagen se desplaza de forma ascendente la imagen grande. Para
desplazarla en ese sentido, se utilizan valores negativos en el valor indicado en la propiedad
background-position. Por ultimo como la imagen grande ha sido especialmente preparada, se sabe que el
desplazamiento necesario son 32 pixeles, por lo que la regla css de este segundo elemento resulta en:

#localidad2 {
padding-left: 38px;
height: 32px;
line-height: 32px;
background-image: url("imagenes/sprite.png");
background-repeat: no-repeat;
background-position: 0 -32px;
}

La solución original utilizaba cuatro imágenes y realizaba cuatro peticiones al servidor. La
solución basada en sprites CSS sólo realiza una conexión para descargar una sola imagen.

Los sprites que incluyen todas sus imagenes verticalmente son los mas faciles de manejar. Pero claro
tambien ahi una solucion para los que tienen sus imagenes horizontales pero claro si las pones en vertical
asi pondras poner un texto a su lado y sera una mejor imagen para su web.

Despues posteare la manera para agrear sprites de manera horizontal.

Nota: Este tutorial lo modifique yo desde un manual de css, las imagenes son las mismas utilizadas, solo
transferi el aporte y agrege mis propios aportes.

Páginas: [1] 2