Infinito Punto Alfa » CSS : Hojas de Estilo http://blog.redvamas.com Hasta los güevos de la 2.0, algo de diseño gráfico, web y concursos. Mon, 19 Dec 2011 21:29:03 +0000 es hourly 1 http://wordpress.org/?v=3.3.1 HTML5 y CSS3 http://blog.redvamas.com/1281/html5-y-css3/ http://blog.redvamas.com/1281/html5-y-css3/#comments Tue, 19 Apr 2011 16:34:01 +0000 Animatek http://blog.redvamas.com/?p=1281 Continue reading →]]> Hola lectores del Blog, soy Iván Muñoz, Desarrollador WEB y Diseñador Gráfico de Grupo SIE, aunque tienen la manía de llamarme Técnico, y uno acaba acostumbrándose. Mi idea es la de ir recopilando las herramientas, recursos y utilidades que me vaya encontrando en mis visitas diarias a diversos blogs que tengo en muy alta estima y de los cuales os iré hablando en próximas entregas. Hoy voy a empezar con varias cosas relacionadas con HTML5 y CSS3, que en breve, cuando se terminen de desarrollar por la W3C, se convertirán en los nuevos estándares de creación web.

Para empezar voy a enlazaros con una serie de artículos donde se presentan estas tecnologías:

Tabla de compatibilidad en Navegadores con HTML5 y CSS3

Infografía sobre que es HTML5:

HTML 5. El futuro de la web [en inglés]

Tabla periódica de los Elementos HTML5

Artículos interesantes en Ingles:

Colección de recursos, herramientas y tutoriales básicos:

Bueno, de momento esto es todo amigos, en próximas entregas intentare traeros mas herramientas sobre este tema y sobre otros muchos. Que disfrutéis de los artículos que mis compañeros publican en el blog. Fuentes: Vecindad Gráfica, Ateneu Popular y Criterion

]]> http://blog.redvamas.com/1281/html5-y-css3/feed/ 0 HTML5 y CSS3, ayuda! http://blog.redvamas.com/1260/html5-y-css3-ayuda/ http://blog.redvamas.com/1260/html5-y-css3-ayuda/#comments Tue, 19 Apr 2011 16:02:18 +0000 Animatek http://blog.redvamas.com/?p=1260 Continue reading →]]>

Hola Netizens.

Estoy buscando algún manual para empezar a aprender HTML5 y CSS3, recomendaciones para alguien con conocimiento medio?

Me vendría bien algun manual o tutorial, asi como sitios web dedicados al tema, ya sea con ejemplos practicos o con explicaciones, si pudiera ser mejor en español.

Muchas gracias.

Editado: Gracias a @cssblog_es por recomendarme LibrosWEB

]]> http://blog.redvamas.com/1260/html5-y-css3-ayuda/feed/ 0 Recursos variados http://blog.redvamas.com/1272/1272/ http://blog.redvamas.com/1272/1272/#comments Sun, 02 Jan 2011 17:27:44 +0000 Animatek http://blog.redvamas.com/?p=1272 Continue reading →]]> Hoy ha sido un buen día de recursos, herramientas y tutoriales, así que os traigo una nueva entrada con enlaces a distintos blogs para que los podáis disfrutar.

  • Popcorn, dándole semántica a los videos con HTML5
  • Utilizar CSS Text-Shadow en la creación de efectos con Texto
  • Convertir imágenes en vectores con Ilustrador Live Trace
  • Tutorial para crear un empaque emulando 3D en Photoshop con acciones
  • Lo mejor en texturas para diseños estilo antiguo

Popcorn, dándole semántica a los videos con HTML5

Popcorn, es una iniciativa que añade una funcionalidad extra a los elementos <video /> y <audio /> del HTML5 permitiendo que muestren al usuario información extra sobre el video, subtítulos, geolocalización, información sobre personas que aparezcan,…

La idea es añadir una semántica extra a lo que hasta ahora solo era un canal de visualización.

Ver artículo completo en anieto2k.

Utilizar CSS Text-Shadow en la creación de efectos con Texto

Fuente: Vecindad Gráfica y tutorial en ingles: Line 25

Convertir imágenes en vectores con Ilustrador Live Trace

Fuente: Adventure Graphics y tutorial en ingles: Graphics.com

Tutorial para crear un empaque emulando 3D en Photoshop con acciones

Fuente: Vecindad Gráfica y tutorial en ingles: psd tuts+

Lo mejor en texturas para diseños estilo antiguo

Fuente: Vecindad Gráfica y tutorial en ingles: 1st Webdesigner

]]> http://blog.redvamas.com/1272/1272/feed/ 0 Oferta de Trabajo – Diseñador WEB. http://blog.redvamas.com/1250/oferta-de-trabajo-diseador-web/ http://blog.redvamas.com/1250/oferta-de-trabajo-diseador-web/#comments Tue, 02 Nov 2010 14:35:19 +0000 Animatek http://blog.redvamas.com/1250/oferta-de-trabajo-diseador-web/ Continue reading →]]> Esta oferta de trabajo me parece un pelín exagerada… más que nada por la cantidad de cosas que piden, estando cada una centrada en un campo de producción… pero vamos, viendo el desconocimiento que hay por parte de las empresas y el poco interés que tienen en aprender, os lo pongo… que no esta la cosa como para desaprovechar oportunidades.

dv_

Diariovasco.com

Precisa incorporar DISEÑADOR WEB:

Se piensa en un profesional preferentemente procedente de agencias creativas, valorándose experiencia en las fases de concepción y planificación de campañas publicitarias online, así como en la conceptualización y diseño de microsites.

Requisitos

• Experiencia en XHTML, CSS y validación de páginas para estándares W3C.

• Conocimientos de accesibilidad, usabilidad y arquitectura de información

• Perfecto manejo de herramientas de diseño y vídeo como Premier, Photoshop, Dreamweaver, Freehand, Flash, Illustrator y Acrobat Professional

• Dominio de Flash y Action Script

• Dominio de formatos Rich-media (vídeo, eyeblaster, formatos flotantes)

• Dominio de Euskera y amplios conocimientos de Inglés.

Imprescindible enviar URL con un portafolio on-line de trabajos realizados relativos al puesto solicitado.

Se ofrece incorporación a área de diseño web de medio online líder, con un ambicioso plan de desarrollo y retribución de acorde a la valía y

experiencia del candidato.

Interesados enviar CV al apartado 201 de San Sebastián o a la dirección de correo electrónico: personal@diariovasco.com / Referencia: diseñador web

]]> http://blog.redvamas.com/1250/oferta-de-trabajo-diseador-web/feed/ 0 Diferentes medidas en el tamaño de las fuentes http://blog.redvamas.com/1016/diferentes-medidas-en-el-tamao-de-las-fuentes/ http://blog.redvamas.com/1016/diferentes-medidas-en-el-tamao-de-las-fuentes/#comments Mon, 15 Mar 2010 13:37:10 +0000 Animatek http://blog.redvamas.com/diferentes-medidas-en-el-tamao-de-las-fuentes/ tabla_equivalencia_web_tipografica[1]

Fuente: Blog Artes Visuales

]]> http://blog.redvamas.com/1016/diferentes-medidas-en-el-tamao-de-las-fuentes/feed/ 0 Tienda onLine : El Rincon Of Spain http://blog.redvamas.com/191/tienda-online-el-rincon-of-spain/ http://blog.redvamas.com/191/tienda-online-el-rincon-of-spain/#comments Mon, 02 Jul 2007 17:23:17 +0000 Animatek http://www.va-mas.com/blog/?p=191 Continue reading →]]> Os dejo el enlace a mi último trabajo en la web.
Se trata de una tienda de jamones online creada con PHP, CSS y MySQL en ingles y frances.

Lo pongo aqui para promocionarlo un poco e ir posicionandolo en Google… y bueno, para ver si os gusta.
Aún no está terminado del todo ya que le falta activar el carro de compra, en espera de la cuenta del banco, y hacerle los pequeños ajustes finales, que aunque no son mucho trabajo, siempre es lo que mas cuesta.

El Rincon Of Spain:

]]> http://blog.redvamas.com/191/tienda-online-el-rincon-of-spain/feed/ 0 CSS : DIV :Zoom Menu http://blog.redvamas.com/82/css-div-zoom-menu/ http://blog.redvamas.com/82/css-div-zoom-menu/#comments Wed, 25 Apr 2007 08:49:32 +0000 Animatek http://www.va-mas.com/blog/?p=82 Continue reading →]]> PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. body {
  3. font-family: "Verdana", Helvetica, Arial, Verdana, sans-serif;
  4. font-size: 50%;
  5. }
  6. li {
  7. font-size: 1em;
  8. }
  9. li:hover {
  10. font-size: 2em;
  11. }
  12. li:hover + li {
  13. font-size: 1.6em;
  14. }
  15. li:hover + li + li {
  16. font-size: 1.3em;
  17. }
  18. li:hover - li {
  19. font-size: 1.6em;
  20. }
  21. li:hover - li - li {
  22. font-size: 1.3em;
  23. }
  24. </style>
  25. <ul>
  26.     <li><a href="http://www.va-mas.com">VA-mas.com</a></li>
  27.     <li><a href="http://va-mas.es">VA-mas.es</a></li>
  28.     <li><a href="http://ia.va-mas.es">Infinito.Alfa</a></li>
  29.     <li><a href="http://www.va-mas.com/red/hp/">HomePages</a></li>
  30.     <li><a href="http://www.va-mas.com/red/sf/">SubeFotos</a></li>
  31.     <li><a href="http://forako.va-mas.es">Foreko</a></li>
  32.     <li><a href="http://smaily.webcindario.com">SmailyTown</a></li>
  33.     <li><a href="http://www.koldomitxelena.com">KoldoMitxelena</a></li>
  34.     <li><a href="http://www.profesoresupv.com">Profesores UPV</a></li>
  35.     <li><a href="http://www.va-mas.com/clientes/esos/">El Sabore Of Spain</a></li>
  36.     <li><a href="http://www.xabierobeso.com/">Xabier Obeso</a></li>
  37. </ul>

ejecutar ejemplo

]]> http://blog.redvamas.com/82/css-div-zoom-menu/feed/ 0 CSS : DIV :Capa con scroll propio http://blog.redvamas.com/24/css-div-capa-con-scroll-propio/ http://blog.redvamas.com/24/css-div-capa-con-scroll-propio/#comments Tue, 13 Mar 2007 07:10:09 +0000 Animatek http://www.va-mas.com/blog/?p=24 PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. .scroll{
  3. margin: 10px auto;
  4. height:100px;
  5. overflow: scroll;
  6. width:200px;
  7. }
  8. </style>
  9. <div class="scroll">
  10. Infinito.Alfa: Recopilando Diseño WEB de la Blogosfera.
  11. Infinito.Alfa: Recopilando Diseño WEB de la Blogosfera. Infinito.Alfa: Recopilando Diseño WEB de la Blogosfera.</div>

ejecutar ejemplo

]]> http://blog.redvamas.com/24/css-div-capa-con-scroll-propio/feed/ 11 CSS : JavaScript :Ocultar/Mostrar Capas http://blog.redvamas.com/23/css-javascript-ocultarmostrar-capas/ http://blog.redvamas.com/23/css-javascript-ocultarmostrar-capas/#comments Mon, 12 Mar 2007 19:33:09 +0000 Animatek http://www.va-mas.com/blog/?p=23 PLAIN TEXT
CSS:
  1. <style>
  2. .vis1 {
  3. visibility:visible;
  4. }
  5. .vis2 {
  6. visibility:hidden;
  7. }
  8. </style>
  9.  
  10. <img src="http://www.va-mas.com/blog/logo.jpg" name="oSphere" width="162" height="127" id="oSphere" class="vis1" />
  11. <p onmouseover="oSphere.className='vis2'" onmouseout="oSphere.className='vis1'">Pon el cursor sobre este texto para hacer desaparecer la imagen.</p>

ejecutar ejemplo

]]> http://blog.redvamas.com/23/css-javascript-ocultarmostrar-capas/feed/ 0 CSS : DIV :Centrar Horizontal y Verticalmente http://blog.redvamas.com/11/css-centrar-cada-horizontal-y-verticalmente/ http://blog.redvamas.com/11/css-centrar-cada-horizontal-y-verticalmente/#comments Fri, 09 Mar 2007 20:03:17 +0000 Animatek http://www.va-mas.com/blog/?p=11 Continue reading →]]> PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. <!--
  3. .centrar {
  4. background-color:#3366CC; /*color de fondo*/
  5. color: #999988; /*color de letra*/
  6. position: absolute; /*Posicionamiento absoluto*/
  7. height: 400px; /*altura*/
  8. width: 500px; /*altura*/
  9. margin-left: -250px; /*Restamos la mitad de ancho del DIV para centrarlo horizontalmente*/
  10. margin-top: -200px; /*Restamos la mitad de alto del DIV para centrarlo verticalmente*/
  11. left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/
  12. top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/
  13. }
  14. -->
  15. </style>
  16. <div class="centrar">Esta capa siempre esta centrada, tanto horizontal como verticalmente.</div>

ejecutar ejemplo

Fuente

]]> http://blog.redvamas.com/11/css-centrar-cada-horizontal-y-verticalmente/feed/ 7