Herramientas de apoyo para desarrollo

-kuler

web que nos ayuda con colores y cuales combinan con este y sirve para crear y buscar colores https://kuler.adobe.com

-websafecolors

web que reúne hasta 216 colores considerados seguros para el uso en la web con independencia del navegador desde el que accedamos y del monitor que los reproduzca siempre que este pueda mostrar 256 colores o más http://websafecolors.info/

-colorzila 

web que te permite crear gradientes y te genera el css listo para ser usado en tu web 
www.colorzilla.com/gradient-editor

-css tricks

web muy completa que tiene ejemplos y documentacion sobre css y como usarlo
http://css-tricks.com/

-Quirk Tools

web para desarrollar proyectos webs muy facil y tiene para probar responsive sobre una web
http://quirktools.com/

Nuevo elementos de HTML

estas son las nuevas etiquetas HTML5, ahí algunas que mejoran la el SEO o posicionamiento en nuestra pagina en los buscadores y reemplazan el uso de divs, y otras que son elementos gráficos que pueden ser útiles en el desarrollo web.

las siguientes etiquetas estas mejoran el posicionamiento y reemplaza el uso de divs.

nota: el hecho que reemplace el uso de divs no significa que se siga usando

header -> cabecera o titulo de nuestra pagina, es la parte donde va el titulo y generalmente el menú

section-> para designar partes en la pagina web, es una sección de la pagina o secciones

article-> para colocar los artículos o contenido principal de la pagina

aside-> para colocar contenido complementario o secundario de nuestra pagina

nav->para colocar el menús de navegación en la pagina

footer->para colocar el pie de pagina

estas etiquetas mejoran el SEO de nuestra pagina ante los buscadores que usan algoritmos basados en SEO. estas al momento de usarlas no genera ningún cambio gráfico sino mas bien un cambio estructural en nuestra pagina.

video-> para cargar video

audio-> para cargar audio

nota: estas se deben utilizar con la etiqueta source

datalist-> es un campo de texto con lista despegable con auto completado, se usa con el input List

details y summary-> se usa para esconder y mostrar texto

figure->es como la etiqueta img pero se le puede poner descripción con la etiqueta

meter->es una barra para medir "muy interesante para uso con php"

p editable->permite editar el texto en las etiquetas p

para ver como se ven los elementos visita este link

Notas css parte 3

-background

se puede poner multiples backgrounds en una misma pagina de esta forma 

background-image:url(img/andres.png), url(img/textura.jpg);

esta propiedad se puede aplicar tanto al body para que este en toda la pagina como a un div especifico, y para modificar las propiedades es lo mismo 

propiedad:atributo fondo 1(valor1), atributo fondo 2(valor2) ;

y así con las demás propiedades que se el puede dar a un fondo

-gradientes

web para crear gradientes ->www.colorzilla.com/gradient-editor, nos podemos ayudar de esta fuente para crear los gradientes estilo photoshop y genera el codigo css para el gradiente que creamos, es muy weno porque el codigo generado piensa en todo los navegadores ya que algunas propiedades no son compatibles entre los navegadores (por eso existen los prefijos), inclusive entre las versiones de un mismo navegador

notas ccs parte 2

-tamaños en css:

heigth depende del contenido y width depende del ancho de la pagina o resolucion de la pantalla o del marco de trabajo

-resize: 

es un parámetro de css para cambiar de forma dinámica el tamaño, sin tanto cuento ni tanta parla.

-fuentes:

 para especificar el tipo de letra con que se ver la pagina

font-family: Arial, Helvetica, sans-serif;
win mac          linux

esto se hace porke cada SO te muestre el tipo de letra que tu colocaste, cada una es su equivalente en el otro SO si una fuente no esta en el pc no se vera la fuente ke se uso.

-font-face

sirve para aplicar un estilo propio de fuente a la nuestras letras pero ahí ke agregar los formatos otf, eot y ttf, se crea la fuente y después se agrega donde se va a utilizar y se usa asi

@font-face{
font-family:"nombre del tipo de letra";
src:url(url_fuente.ttf), url(url_fuente.eot), url(url_fuente.otf);

}

convertidor de fuentes->http://onlinefontconverter.com para cambiar el formato de extensión de la fuente y tenerla para los diferentes SO, tambien para este efecto se puede usar web fonts de google y explica como hacerlo la diferencia esta en que con font-face la fuente esta junto con la pagina y demora mucho menos que con google font que si se nota el tiempo de carga

notas de css parte 1

notas de css

-las clases "class" 

se pueden aplicar a muchos elementos ejemplo: .texto_gral

-los identificadores "id" 

solo a un solo elemento dentro del hmtl ejemplo: #texto_menu

-pseudo-clases

son aquellas ke modifican el estado de una etiqueta cuando se ejecuta una acción sobre ella asi

        elemento:link
        elemento:visited
        elemento:hover
        elemento:focus
        elemento:first-child
        elemento:last-child
        elemento:nth-child( n elemento)

-pseudo-elementos:

 son elementos que se pueden agregar desde el css. son 4 y sirven para agregar elementos de acuerdo con su funcion

elemento::before->inserta imagen antes de elemento::after->inserta imagen despues de
elemento::first-letter->para texto
elemento::first-line->para texto

-prefijos: 

son las palabras "reservadas" para hacer referencia a cada motor de cada browser
chrome y safari - webkit
mozilla firefox - noz
opera - o
ahi un plugin hecho en javacript para hacer sentencias sin prefijos, -prefix-free