Artículo Ofrecido al Azar

CONTENIDO LÍQUIDO EN X-HTML

Umm que buenísimo recurso, de hecho yo lo uso en casi todos mis proyectos webs, ya que le dá otra presencia a nuestro proyecto. Ya da lo mismo, que se vea la web que vamos a realizar en un 15 pulgadas, o en un 24. Este recurso permite que el contenedor o div, se ajuste totalmente al centro del monitor...

Read More

MAS DE 30 PLANTILLAS HMTL PARA CORREOS ELECTRÓNICOS

Posted by webmaster | Posted in CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN, RECURSOS, RECURSOS WEB | Posted on 04-05-2009

Etiquetas: , , , ,

1

Paseando por internet, encontré esta web, donde comparten gratuitamente más de 30 plantillas html para enviar por correo. la verdad que he visto alguno diseños muy interesantes y que nos ayudaría a mejorar nuestra imagen de cara a clientes y proveedores.

recursos web tempaltes para correos electrónicos

recursos web tempaltes para correos electrónicos

Os dejo el link, y espero de corazon que le saqueis partido

http://www.campaignmonitor.com/templates/



RECURSOS WEB: APUNTES DE DISEÑO WEB

Posted by webmaster | Posted in ACTIONSCRIPT, ADOBE FLASH, CSS, DISEÑO WEB, DREAMWEAVER, HTML, JAVASCRIPT, MYSQL, PHP, PROGRAMACIÓN, XML | Posted on 17-11-2008

Etiquetas: , , , , , , , , , , , ,

0

RECURSOS WEB: APUNTES DE DISEÑO WEB.

PAra todos los que me visitaís pienso que sería bueno una introducción muy escueta y resumida de qué es esto de Internet, como comenzó y los distintos formatos de creación web que hay hasta la fecha. Sé que la teoría no suena nunca bien, pero creo que puede aportarnos cosas interesantes.

¿QUE ES INTERNET? Y ¿SUS INICIOS COMO FUERON?

internet para el ciudadano de a pie, les diré que no es más que un grupo de computadoras, ordenadores que estan conectadas entre sí intercambiando información. El termino servidor web, lo unico que hace es facilitar estos intercambios de información, ya que los encontraremos trabajando simepre, 24 hrs al dia, los 365 días del año.

Sus inicios, aunque se han datado en fechas al rededor de 1970, internet como tal, vino posterior a eso. Ocurrio como con casi todas las cosas un avance tecnológico en bases militares que poco despues adoptaron universidades y mas tarde pasó a dominio público. La primera conexion la realizaron 3 universidades al conectar e intercambiar información entre ellas. pero a nivel militar, ya se desarrollaba desde hacía algun tiempo.

¿QUÉ ES.....?

"HTML"... el html no es más que un lenguaje de creacion y diseño de páginas webs, html, o tambien reconocido como htm. La página principal de un proyecto web, siempre es index.html, a menos que se usen otras tecnologias.

PHP-XML-JAVASCRIPT....todos son lenguajes de programación y que sirven de complemento a nuestros proyectos realizados en HTML. El php, es un lenguaje de lado del servidor web es decir, es un lenguaje que se procesa en el servidor web, y a traves de nuestros exploradores web, lo que vemos, no es más que lo "procesado" por el servidor.PHP, comunica con el servidor y procesa todo lo que queramos, formularios, respaldos de datos, envio de mails, peticion de datos....etc.etc

XML, es un lenguaje parecido al html, se designa de igual manera, con etiquetas, pero que nosotros podemos escoger libremente, no tenemos que llamar a las etquetas de una determinada manera como ocurre en html. muy válido para almacenar datos, o facilitar información.

JAVASCRIPT.. el javascript es un lenguaje de programación para entornos web, que realiza cosas en local, es decir en el ordenador del usuario, ejemplos prácticos, podrian ser.. validacion de formularios, introducir calves, ventanas de advertencia, etc,etc...

ACTIONSCRIPT.... es el lengujae de programacion que usamos para programar en adobe Flash. Cuando programamos, tenemos que tener en cuenta que programamos de dos maneras, gráficamente, para conseguir un mejor ascpecto o lógicamente, hacer inteligentes las cosas hacemos.

CSS..... se denomina de esta manera a las hojas de estilo, atendiendo a la accesibilidad web, de todo proyecto web, separaremos 3 cosas siempre, por un lado , el contenido, los textos, imaganes, etc.. y por otro la forma/diseño, que tabularemos siempre con otro lenguaje de programación, el css.

MySQL...lenguaje de programacion que ejecuta rutinas para creacion, modificacion, borrado ... de bases de datos. potentísimo lenguaje.

Detras de esto comprendemos más lo complejo que puede llegar a ser una pagina web. dominar sin problemas 4-5 lenguajes de programación para hacer una web.

HTML+CSS+JAVASCRIPT+PHP+MySQL = a una web normalita.

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com


RECURSOS WEB: CSS PARA VARIOS EXPLORADORES

Posted by webmaster | Posted in ACCESIBLIDAD, CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, USABILIDAD, WEB PROFESIONAL | Posted on 17-10-2008

Etiquetas: , , , , , , , , , , ,

2

RECURSOS WEB: DISEÑAR PARA VARIOS EXPLORADORES (RECURSOS CSS)

css en distintos exploradores

css en distintos exploradores

Como bien es sabido por todos, cuando diseñamos una web no obtenemos los mismos resultados. Una web que se vé genialmente tabulada en firefox, la vemos en Internet Explorer (IE, en adelante), y nuestro diseño ni por asomo, roza la genialidad, si lo miramos en versiones anteriores, IE 6 ó anteriores, el caos se hace cada vez mayor.
El principal problema de Internet explorer es que como esta gente de Microsoft, hacen lo que le dan la gana, pensando que alguien algún dia le seguirá sus pasos, pues pasa esto. Ellos no atienden para nada a los consejos y recomendaciones, W3C. Sí, tal y como suena. No hacen caso a las especificaciones que desde el consorcio de la web, se estipulan para mostrar debidamente las paginas web. Uno de los exploradores más extables del mercado (FIREFOX) es de los pocos que cumplen casi en tu totalidad con dichas "recomendaciones"

BUENO PERO AL GRANO....¿COMO DISEÑO PARA VARIOS EXPLORADORES?

Serán 4 pasos muy sencillos:

1. Siempre Diseñaremos para el sistema más estable. En este caso, Firefox. Si se vé genial ahí lo que queremos mostrar pasaremos al siguiente paso.

2. Veremos la web en la version IE6 y localizaremos las reglas de estan dando lugar a mal interpretaciones en IE6.

3. Duplicaremos esa regla de css y la renombraremos de la siguiente manera

ANTES>>>>>>>>>>>>>>>>>>>>>>>>> DESPUES
#wrapper>>>>>>>>>>>>>>>>>>>> *html #wrapper
Es decir, le pondremos "*html" por delante (sin las comillas)

3.A y modificaremos los valores de esa propiedad hasta ajustarla a nuestras necesidades.

hasta aquí si esa web se abriera en firefox, leería del css la propiedad #wrapper, mientras que si la abrieramso con IE6, leeria la otra *html #wrapper. Ya tenemos la web para dos plataformas, la "excelencia" (firefox) y la "decadencia" (IE).

4. Vamos a más vamos a abrir la web en IE7, y zas se han movido cosas verdad? de igual manera que en el 2. localizaremos los selectores base que pensamos que dan problemas, los duplicamos y los renombramos de la siguiente manera:

ANTES>>>>>>>>>>>>>>>>>>>>>>>>>> DESPUES
#photo>>>>>>>>>> *:first-child+html #photo
Es decir, le pondremos "
*:first-child+html" por delante (sin las comillas)

Y ya tendremos arreglada la compatibilidad para FIREFOX, INTERNET EXPLORER VERSION 6 y 7, SAFARI, OPERA....entre otras. en un 90% de los casos sufragando las debilidades de IE6, se arreglan casi todas las de IE7. por lo que esta última regla se usa poquísimo...

PAra los que quieran saber mas de css, os dejo también este link.

CSS PARA TODOS

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com

RECURSOS WEB: SCRIPTS LISTOS PARA USAR

Posted by webmaster | Posted in ACCESIBLIDAD, ACTIONSCRIPT, ADOBE FLASH, CSS, DISEÑO WEB, DREAMWEAVER, HTML, JAVASCRIPT, MYSQL, PHP, POSICIONAMIENTO WEB, PROGRAMACIÓN, RECURSOS, RECURSOS WEB, USABILIDAD, WEB 2.0, WEB PROFESIONAL, XML | Posted on 24-09-2008

Etiquetas: , , , , , , , , , , , ,

0

RECURSOS WEB: SCRIPTS LISTOS PARA USAR

Buenas de nuevo os dejo un nuevo recurso para que le hecheis un vistacillo, se trata de una pagina web, donde podremos encontrar miles de scripts listos y totalmente operativos para insertar en nuestros proyectos webs. Todos o casi todos son Open Source, aunqeu tambien aprovechan en esta web para ofrecernos en bandeja, los scripts comerciales.

NO TODO ESTA HECHO

Cuando comencé en mi andadura profesional del campo del diseño web, me dí cuenta de lo sencillo que podria ser implementar "cosas/scripts" que otros ya habian realizado, la idea suena acojonante, las cosas como son.... pero la realidad no es tan así. Tras muchas horas de investigación acabas por darte cuenta que lo que te ofrecen, o puedes obtener para trus proyectos webs, no es al 100% lo que de verdad necesitamos.

Son recursos, que están ahí pero no terminan de solucionarnos las cosas, casi todos necesitan una adaptación a nuestras necesidades y es ahí donde aparece nuestra capacidad profesional, de "meterle mano a tó" para conseguir lo que de verdad necesitamos. Todo sea por logar llevar a cabo el proyecto de nuestro cliente.¿o no?
No me enrollo más y ahí os dejo el link

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com








CONTENIDO LÍQUIDO EN X-HTML

Posted by webmaster | Posted in CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN | Posted on 20-07-2008

Etiquetas: , , , , , , , , , , , ,

0

Umm que buenísimo recurso, de hecho yo lo uso en casi todos mis proyectos webs, ya que le dá otra presencia a nuestro proyecto.

Ya da lo mismo, que se vea la web que vamos a realizar en un 15 pulgadas, o en un 24. Este recurso permite que el contenedor o div, se ajuste totalmente al centro del monitor que sea, tanto verticalmente como horizontalmente.

Podreis ver un ejemplo en diseño web, haced más grande y más pequeña la ventana del explorador ¿hacia dónde se vá el contenido?

¿COMO SE HACE?

1) para empezar tenemos que crear un div

HTML:
  1. <div> y </div> al que ademas le añadiremos una etiqueta para
  2. controlarlo via CSS, es decir algo asi
  3. <div id="mi_etiqueta">
  4. lo que queramos meter dentro de ese div
  5. </div>

Después de eso iremos al asistente de CSS, y tendremos como ya sabemos 2 opciones para llevar a cabo el css:
a)incrustandolo en el propio docmento( html/xhtml) o
b) con un archivo externo.
Acostumbraros a hacerlo desde un archivo externo siempre, ya que las normas de accesibilidad, quieren siempre lo mismo separar, contenido de la web, de la parte de diseño. Nada con respecto al diseño debe de estar en un html/xhtml, en estos documentos solo encontraremos "etiquetas-tag"(h1,h2,p,div....) y texto plano.Los estilos , ya sabeis, a full con CSS.

bien el codigo/propiedades del css es el siguiente contenido_liquido

HTML:
  1. //esta propiedad body, lo que hace es decirle que el
  2. //cuerpo de la pagina no tenga ningún margen,
  3. //dreamweaver tiene un problema y es que
  4. //los campos vacios, sin valores, por defecto,
  5. //el valor no es cero por eso el margen lo pongo
  6. // a cero pixeles, porque si nos damos cuenta
  7. //al abrir un documento nuevo, no escribe en la
  8. //posición 0,0,sino en la 5,5 , porque los campos
  9. //margin estan vacios....pero no con valor cero.
  10. //no es necesario si no quereis...
  11.  
  12. body {
  13.     margin-top: 0px;
  14.     margin-right: 0px;
  15.     margin-bottom: 0px;
  16.     margin-left: 0px;
  17. }
  18.  
  19. //la etiqueta de mi div la llamé wrapper
  20. // le dí via css lo típico, su ancho y su alto (900x 600px)
  21. //un borde solido en una tonalidad gris, pa ver el efecto
  22. //las posiciones arriba, abajo izda y dcha al 50%
  23. //los margins top y bottom es el valor negativo de
  24. //la mitad de nuestro alto del div y los margin left y
  25. //right es el valor negativo de la mitad de nuestro ancho
  26. //del div
  27. //¿porque tienen esos valores?
  28. //con css, le estamos dando una cordenada,
  29. //de acuerdo al punto central, del ancho y del alto,
  30. //es desde donde css, centra el div en la ventana,
  31. //si fuera una de las esquinas nos volveriamos locos,
  32. //y necesitariamos varios divs más para centrarlo
  33. // (de locos, ya hice pruebas..)
  34. este seria el css de mi div wrapper
  35. #wrapper {
  36.  
  37.     width: 900px;
  38.     height: 600px;
  39.         border: 3px solid #CCCCCC;
  40.     background-color: #FFFFFF;
  41.     left: 50%;
  42.     top: 50%;
  43.     right: 50%;
  44.     bottom: 50%;
  45.     vertical-align: middle;
  46.     position: absolute;
  47.     margin-top: -300px;
  48.     margin-right: -450px;
  49.     margin-bottom: -300px;
  50.     margin-left: -450px;
  51. }

espero os haya sido de ayuda!
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008

[/html]







29 consultas en 0.466 segundos.